Layout revamp ideas

[hftf]

1 Separate TOC

.———————————————————————————————————.
| Header (Instructions,             |
| examples, etc.)                   |
|———————————————————————————————————|
| TOC    ↑: Current    ↑| Large     |
| only    : screen      | canvas    |
| (a)    ↓: (b)        ↓|           |
'———————————————————————————————————'

• TOC has screen titles only
• Boxes (a) and (b) scroll independently
• Clicking on an item in (a) jumps to the corresponding screen in (b)
• Scrolling (b) changes the “current position indicator” in (a) as in this example

Cons: Still 1 dimension of scrolling

2 Graph

Something more graph-based in 2 dimensions

3 Interact more with screenshots

• Click on a button region in a screenshot to jump to the next screen
• Checkboxes and button labels are positioned on top of the screenshot

[MattiasBuelens]

The adjusted layout structure looks good, should be simple enough to implement in CSS as well.

The "current position indicator" is a great idea. However, I think you linked to the wrong Bootstrap component: you're looking for the ScrollSpy component. The Affix component (which switches between position: fixed and position: static depending on the scroll position) may still be helpful depending on how we're planning to implement the scrolling. If we want the scroll bar to appear on the body, we'll probably need Affix to keep things like the TOC in place when the header goes off-screen. (Also, you do realize that Bootstrap is a framework, right? :stuck_out_tongue: )

What do you mean with "still 1 dimension of scrolling"?

I like the idea of putting the checkboxes on the screenshots. One thing that worries me a bit though is that we'll have to make the screenshots big enough so the button regions can contain the checkbox and the button labels. For example, I can see issues with screens like Overworld > Bag where a lot of small buttons are put closely together (Items, Medicine, TMs, Berries, Key items).

[hftf]

On second thought, I don’t think keeping the header on the screen is a good use of space. The few things we want to keep on the screen can go in one of the side sections (like Reset all checkboxes).

          .—————————————————.
          : Header          :
          : Instructions    :
          : Screen 1        :
          : Screen 2        :
.————————————————————————————————————.
| TOC    ↑| Current screen ↑| Large  |
| only    | Screen 4        | canvas |
| (a)     | Screen 5        |        |
|        ↓| (b)            ↓|        |
'————————————————————————————————————'
          : Screen n – 1    :
          : Screen n        :
          '—————————————————'

By “1 dimension of scrolling” I mean that this doesn’t really do anything to alleviate the really tall main box besides add a TOC. It’s difficult to have a mental spatial map of a lot of objects in a single dimension, even with two indicators (TOC position and scrollbar position if visible on your device).

---

Instead of checkboxes on the screenshots how about:

• Click a button to toggle it between the 3 states. (Maybe indicate state by colors, borders, or icons.)
• Hover over a button to display its title, coords, and refs (in some sort of tooltip).
• Secondary-click (right click? double click? shift+click?) to jump to the button’s first ref.

But then we have competing click actions. (That is, it makes sense for click to change a button’s state; it also makes sense for click to jump to the next screen, just like in the game.)