Alphanumeric Filter Links
Working Solution · Last modified July 15, 2009
Display a list of links, starting with symbols (if any), followed by a single link to all numerical results (if any), followed by alphabetical links each pointing to the first page of results for a given letter.
Do not hyperlink letters that would give a null result.
What Problem Does This Solve?
The user needs the ability to look up information alphabetically within a large data set.When to Use This Pattern
- There is more information than can comfortably fit into one screen.
- The content is arranged alphabetically. (Note that this solution does not work well for double-byte character sets that do not have an alphabetical order.)
- The user can be expected to know the first letter of the result (this method is more effective for recognition tasks, and not exploratory tasks.)
What's the Solution?
- Present a list of links.
- If there are numerical results, the first link should point to them as a set.
- If there are entries whose labels are symbols or begin with symbols, list them first as individual links.
- The subsequent links should each point to the first page of results for the given letter.
- Hyperlink the letters that refer to pages containing content; do not hyperlink letters that would give a null result.
- Emphasize the page that is currently being viewed in the link set (if any).
- If the potential number of results could be unwieldly to the user (resulting in information overload or lengthy delays) or to the system (resulting in degraded performance)
- Simply use the links to "jump" to a position within the paginated set that begins with the chosen letter, or
- Combine with a pagination method, bearing in mind that mixing alphabetization and pagination can easily confuse the user.
Why Use This Pattern?
Long lists that require extensive scrolling can place a cognitive burden on the user and may also slow down page rendering. Breaking a list into alphabetical chunks, when appropriate, can make the experience easier and more responsive for the user.
Pattern Information
Related Patterns
As Used on Yahoo!
Blog

