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 - letters, numbers, etc. (rolodex style)
- General indicators - dots (motoblur overlay with the dots and house?)
Each of these can also be interacted with in several ways:
- Direct selection - Click on the indicator from a series...
- Drag selection - Drag to a specific indicator, select an individual...
WRAP UP...
Interaction Details
Generally sometimes visible, you have to start a movement, or select an almost hidden version to open it big enough to access the controls. Then just tap the selection to jump.
Can sometimes grab an indicator. Say this overlaps with scrollbar so see those guidelines, but discuss here, because it's part of the location indicator system...
Presentation Details
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...