Alphanumeric Filter Links

Example of the Alphanumeric Filter Links UX pattern.

Problem

You have too many items for people to reasonably digest in one screen.

Solution

Show a list of alphabetical links that filter the list with the words that start with the selected character.

Context

The list needs to have a primary aspect, such as title or name, that is word based and so can be sorted alphabetically.
The words are in a language that has an inherent alphabetical order.
The users typically will know which letter to choose to find what they want.

Rationale

Long lists that require a lot of scrolling could place cognitive burden on to the user, and may slow down page loading and rendering. Breaking the list into chunks can make the experience easier and more responsive.

For lists that have a word as their primary aspect, it makes sense to filter the content alphabetically. It is a long-lived categorization scheme that most are familiar with since childhood, so it is almost intuitive.

Because the user must know the first letter of the result, this approach is not as good for exploratory browsing.

Keep in mind that is a way of filtering, not paging. It only works as a paging mechanism is the number of items that start with a letter is small. By the same coin, this is not a good mechanism to use if the total number of items is small or if there is highly uneven distribution, e.g., 80% of the items begin with the same one or two letters.

Implementation

Display a list of links with alphanumeric characters. If there are numbers in the list, then evaluate creating a group for all the numbers, like the “0-9” section in the Yahoo Movies example. If there are entries with special symbols, use those symbols as links. Each link should point to the first page with results for the selected characters.

Only create hyperlinks for letters that will display results. If there’s a letter that does not have any row that starts with it, display the letter anyway but make it clear that the letter has no results, i.e., make it look disabled and don’t actually link to anything. If there are still too many items for any one particular letter, you can use a paging scheme within the letter, but you need to be careful when doing this to structure the paging navigation in such a way that it is clearly distinct from the alphanumeric to avoid confusing the user.

You need to make the currently selected letter clear, highlighting it in some way, and disable the link unless you have paging within the result set, in which case, the link should work as normal—taking the user to the first page. You may also need to provide a way to clear the filter. In that case, using “Clear” is probably best, but if clearing the filter would show all the records, using “All” is a viable alternative.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Alphanumeric filtering pattern is implemented in the following ASP.NET controls: WebDataGrid, WebGrid, WebDropDown. Check out the samples browser to see it in action.

Windows Forms

You can use the WinTabControl or the WinTabbedMDI to implement this pattern.

WPF

You can use the XamTabControl to implement this pattern.

Examples

The primary example is from Quince. We found that using “All” to clear the filter could be confusing, so we opted for using “Clear” instead.

http://quince.infragistics.com/1157

This one is from Microsoft CRM. They use the number sign (#) to indicate filtering by numbers.

http://quince.infragistics.com/1173

The Yahoo Movie Trailer Video Archive provides alphabetical links to filter the movie titles. It also provides a way to paginate through the filtered list. See how the paging links are clearly different from the alphanumeric navigation. In fact, the navigation feels like tabs, which works well for showing what is currently selected, creating a clear visual connection between the content and the selected letter.

http://quince.infragistics.com/11a8

Example of the Alphanumeric Filter Links UX Pattern

LinkedIn uses alphabetical links in a few places. Here, all the contacts are loaded in a scrolled list, and clicking on the first letter moves you to the beginning of that letter. In this case it’s not used for filtering or paging. Note that there are some letters without links, like H, because there are no contacts that start with that letter.

http://quince.infragistics.com/113r

Example of the Alphanumeric Filter Links UX Pattern