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.

Delicious Bookmark this on Delicious

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?

  1. 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.
  2. Hyperlink the letters that refer to pages containing content; do not hyperlink letters that would give a null result.
  3. Emphasize the page that is currently being viewed in the link set (if any).
  4. 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.