Alphabetic Listings (Short)

From MobileDesign

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.

[edit] 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 by the following rules.

[edit] Scroll and Select with number-access platform

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:

2 ABC (3 items)

3 DEF (2 items)

4 GHI (5 items)

5 JKL (3 items)

6 MNO (12 items)

7 PQRS (15 items)

8 TUV (6 items)

9 WXYZ (2 items)

It is also possible to show this quantity without the key "items" or "results" label.

Return all items starting with those letters.

If desired, use accesskey 1 to directly type all or part of the name.

[edit] Rationale

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.

[edit] Stylus Devices

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.

[edit] Rationale

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.

[edit] Scroll-and-Select Devices with full alphabetic keyboard

Same as Alphabetic Listings (Long): a text entry field inviting the user to type a few letters of the item, then display matching results.

[edit] Rationale

Most web browsers do not support alphabetic accesskeys and typing letters is very easy.

[edit] Scroll and Select on platform without number access

Similar to the standard design, without number access. Avoid placing numbers in front of these groups for any reason, as they may be misidentified as accesskeys.

Groupings can be assigned based on the distribution of values in the set, and no longer have to reflect existing key groupings. See the example to the right. Alternately, use Alphabetic Listings (Long).

[edit] Rationale

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.

[edit] When Used

Use when items lend themselves to an alphabetic collection but the list is not very long.

[edit] Rationale

Displaying a list of results, when the list is of manageable size, reduces the need for direct text entry, reduces issues with not knowing the spelling of an item, and also provides the user information about similar results.