Problem

Scrolling to items in a long vertical list is cumbersome. Information is ordered and could be categorized to assist in retrieval.

Solution

The problem of accessing long lists of ordered data is not unique to interactive systems, and the solutions are directly related to the methods derived in the machine-era. The Rolodex (a portmanteau of "rolling index") is the prime example, a series of cards separated by tabbed label cards for letters of the alphabet. This might seem to be akin to the Tab pattern, but in fact the tabs are simply markers inline with the continuous list.

The variation on this, the flat Autodex with a single list of letters and a sliding control to select the section is even more directly what is copied into digital Location Jump systems. An indicator of location, or indexing system, is visible on the screen and this may be used to jump to the front of an indexed section.

These are used with the Vertical List pattern, but could be used in other types of displays as well. Specifically, the Location Within pattern used on [Filmstrip] like Home & Idle Screens can be interactive instead.

The Location Within pattern is very similar, but does not have interaction.

Variations

There are two key sets of variations. The first is in display:

• Content indexing - The strict Rolodex style, with letters, numbers, or whatever other key indexing item in the list. Thumbnails generally do not work well.

• General indicators - Most often dots, sometimes in varying quantities or sizes, but also icons and numbers. These are only really suitable for smaller sets, like Home & Idle Screens but there is much room to expand the pattern here.

Each of these can also be interacted with in one of two key ways:

• Direct selection - Click on the indicator label directly. Press a P, and jump to the "P" section.
• Drag selection - Drag an indicator of the current position, much like a scrollbar, to the position you want.

Of course, both of these can be used together. And other methods can also be used to move the list, such as simple [[Scroll].

Interaction Details

Interaction is very straightforward. The two interaction methods are either simply selection, or scrolling via typical methods.

For Vertical List displays, any scroll bar must generally be removed, in favor of the Location Jump indicators. Any use of other scroll methods, such as gestural scroll or hardware keys must work in concert with this pattern, and indicate changes immediately.

Presentation Details

The key problem with this pattern is making the widget large enough to be visible, or to be selected, without using too much screen space or distracting the user from the primary task.

Two methods are used to accomplish this:

Scroll on action -- Or, if too long, simulate a scroll by accelerating, then jumping closer, then decelerating to the location. The total transition should only take 0.5-1 sec, but the transition helps a great deal in understanding that the action was carried out. One part of a list is very much the same as another, so a change may not be noticed if an instant jump occurs.

indictors, in their compressed state, may be much smaller than usual for readability; about half the normal minimum size is usually acceptable, as long as there are sufficient pixels for it to be legible. It's a hint of the function, instead.

Always must indicate the current position in this position indicator. Anything clear will do, from highlight, to bold to an indicator bar or other icon in the bar. This must also animate live when jumping to a new position. Do not allow it to disappear and then reappear when the move is completed...

Antipatterns

Don't jump... transition by scrolling as describe above...

Examples