This post is part of a series on mobile user interface design patterns, excerpted from Designing the Mobile User Experience, John Wiley & Sons, 2007. This third set of patterns will address application navigation design for mobile applications.
Any long list can be tedious to navigate. A list of alphabetically sorted items can be navigated more quickly using a combination of numbered links and fetching.
See "Alphabetic Listings - Long" for managing lists in excess of approximately two hundred items.
Design
If the list of items is two pages (each at most three screens full of items) long, then simply display the results immediately. If the list of items is longer, add an intermediary level of navigation:| Platform or Node | Implementation | Rationale |
|---|---|---|
| Scroll and select - standard keypad (platform supports accesskey or number access) | Group letters based on their arrangement on the keypad. Typically this is 2=ABC, 3=DEF, 4=GHI, and so forth.
Consider adding the number of items in each category, in parentheses: 4 GHI (5 items) Return all items starting with those letters. If desired, use accesskey 1 to directly type all or part of the name. |
Accesskey provides fast activation of a link, and this distribution of letters is well-learned and readily recognized. The user need not carefully evaluate each group to determine whether the desired letter is in it, but instead just "types the first letter" of the name. |
| Stylus | Display every letter of the alphabet on the screen, with two or more spaces between them. Any letter that begins items in the list is a link and visually distinguished, usually by both bold and underlining. If possible, use a larger font than usual. | Standard best practices for mouse lists. Making a letter a link when there are no results behind it destroys predictability. Visually distinguishing link and non-link letters enhanced predictability. A larger font increases the target size for the stylus, for faster more accurate access. |
| Scroll-and-select - full alphabetic keypad such as QWERTY or Fastap | Same as "Alphabetic Lists - Long", below: a text entry field inviting the user to type a few letters of the item, then display matching results. Most web browsers do not support alphabetic accesskeys and typing letters is very easy. | |
| Web page or platform with no number button shortcuts | Same as the standard design, without number access. Alternately, use the "Alphabetic Lists - Long" pattern. | This design is largely for simplicity: rearranging the letters for even distribution of results for a small number of devices means that each device and list result will vary, reducing both within-device and cross-device predictability. |