Differences between revisions 14 and 15
Revision 14 as of 2011-01-30 20:10:21
Size: 3954
Editor: shoobe01
Comment:
Revision 15 as of 2011-01-30 20:34:33
Size: 5723
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 21: Line 21:
 * Direct selection - Click on the indicator label directly. Press a P, and jump to the "P" section.  * Direct selection - Click on the indicator label directly, or type it in. Press a P, and jump to the "P" section.
Line 28: Line 28:
Interaction is very straightforward. The two interaction methods are either simply selection, or scrolling via typical methods. Direct selection, or scrolling within the list, is very straightforward when touch or pen interfaces are used. Virtual cursors and 5-way pads do not work well with this pattern.
Line 30: Line 30:
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. Scroll-and-select interfaces do not often use this pattern. They may take advantage of it by using '''[[Accesskeys]]''' for the input method. This works best when the input method corresponds to the indexing method. A 10-key device will present difficulties with alpha input, though methods have been devised, such as clustering and using numeric keys to jump to sections. More often, the '''[[Search Within]]''' pattern is used for the actual keypad input, even if a '''Location Jump''' like '''[[[Position Within]]]'' indicator is also presented.

For '''[[Vertical List]]''' displays, any scroll bar must generally be removed, in favor of the '''Location Jump''' indicator complex. Any use of other scroll methods, such as gestural scroll or hardware keys must work in concert with this pattern, and indicate changes immediately.
Line 34: Line 36:
The indicator, whether a symbol, or an index value like a letter, will be stored in a strip (which may not be opaque) along the axis of movement of the list. A vertical list will have a vertical strip. Generally, this should be on the lowest-use side, so the right side for vertical lists.
Line 36: Line 40:
Two methods are used to accomplish this: The general solution is to always present the indicator, but very small (with the characters as much as half the conventional minimum size). As soon as any action occurs relating to item finding -- such as scrolling, direct input via keypad or on-screen gestures to that edge -- the indicator strip will expand to a viewable and selectable size.
Line 38: Line 42:
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. An alternative is to have only the currently in-focus portion expand to the larger size, if scrolling instead of direct selection is the access method. For all scrolling-only interfaces, the index item currently in focus should be approximately in the center of the screen. At the ends of the list, this may be odd looking, and it may be to the natural side instead.
Line 40: Line 44:
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. When a position is selected by scrolling the '''Location Jump''' widget, the list itself must live scroll, although this may be simulated by blurring much of the data if the distance to be scrolled is very large. When jumping to a new position by direct selection of an index feature, scroll to the new position to indicate the change.
Line 42: Line 46:
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... If the distance is very long, simulate a scroll by accelerating, then jumping closer, then decelerating to the location. The jump may be obscured with a brief motion blur as well. 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.

The current position in the position indicator must always be communciated. Anything clear will do, from highlight, to bold to an indicator bar or other icon in the bar. This must also animate live when scrolling or jumping to a new position.
Line 48: Line 54:
Do not allow indicators to disappear and then reappear when the move is completed...

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, or type it in. 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

Direct selection, or scrolling within the list, is very straightforward when touch or pen interfaces are used. Virtual cursors and 5-way pads do not work well with this pattern.

Scroll-and-select interfaces do not often use this pattern. They may take advantage of it by using Accesskeys for the input method. This works best when the input method corresponds to the indexing method. A 10-key device will present difficulties with alpha input, though methods have been devised, such as clustering and using numeric keys to jump to sections. More often, the Search Within pattern is used for the actual keypad input, even if a Location Jump like [Position Within] indicator is also presented.

For Vertical List displays, any scroll bar must generally be removed, in favor of the Location Jump indicator complex. 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 indicator, whether a symbol, or an index value like a letter, will be stored in a strip (which may not be opaque) along the axis of movement of the list. A vertical list will have a vertical strip. Generally, this should be on the lowest-use side, so the right side for vertical lists.

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.

The general solution is to always present the indicator, but very small (with the characters as much as half the conventional minimum size). As soon as any action occurs relating to item finding -- such as scrolling, direct input via keypad or on-screen gestures to that edge -- the indicator strip will expand to a viewable and selectable size.

An alternative is to have only the currently in-focus portion expand to the larger size, if scrolling instead of direct selection is the access method. For all scrolling-only interfaces, the index item currently in focus should be approximately in the center of the screen. At the ends of the list, this may be odd looking, and it may be to the natural side instead.

When a position is selected by scrolling the Location Jump widget, the list itself must live scroll, although this may be simulated by blurring much of the data if the distance to be scrolled is very large. When jumping to a new position by direct selection of an index feature, scroll to the new position to indicate the change.

If the distance is very long, simulate a scroll by accelerating, then jumping closer, then decelerating to the location. The jump may be obscured with a brief motion blur as well. 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.

The current position in the position indicator must always be communciated. Anything clear will do, from highlight, to bold to an indicator bar or other icon in the bar. This must also animate live when scrolling or jumping to a new position.

Antipatterns

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

Do not allow indicators to disappear and then reappear when the move is completed...

Examples

Location Jump (last edited 2011-07-31 22:00:07 by shoobe01)