Working Solution · Last modified July 15, 2009
Bookmark this on Delicious
When searches return too many results to display on a single page, separate the information into a sequence of pages.
Provide pagination control, as a row of links, to enable the user to browse through more results than can be displayed on a single page.
What Problem Does This Solve?
The user needs to view a set of search results ranked by relevance that is too large to easily display within a single page.
When to Use This Pattern
- Displaying search results.
- There are more results than can comfortably fit within one screen.
What's the Solution?
- Break the information into a sequence of pages sorted by relevance.
- Provide a pagination control for providing access to paged content
- Display the navigation controls as a row of links.
- Present links in the following order: 'Prev', page links, 'Next'.
- Display a left arrow after the label 'Prev'.
- Display a right arrow before the label 'Next'.
- Make the arrow(s) clickable.
- The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.
- When on pages 1-6, the page links should always start at '1'.
- When on any page after 6 (7 and onward), the page links should start at the current page minus 5. For example, when on page 7, the first page will be 2 (7 - 5 = 2) and the last page will be 11 (still shows 10 pages.)
- When on first page of results do not display the label or arrow for 'Prev'.
- When on the last page of results do not display the label or arrow for 'Next'
- Do not display a hyperlink for the current page in the page links.
- Label the control 'Results Page'.
Why Use This Pattern?
- Displaying arrow graphics helps differentiate the links and provides larger click targets.
- Disabled controls add little value in this context since
- These links often appear blow the fold.
- The first page of results makes up the vast majority of pageviews. Displaying a disabled "previous" control on all of these is of little added value.
- Although a "First" link has value, it competes with the functionality presented in the random-access links.
- The "Last" link is of little value as the results are sorted by relevance. This is is also problematic since the total number of results (and therefore, the last result) may not be known.
- Allow each link to be navigated to with the Tab key.
- When an individual link has keyboard focus, the Enter key will navigate to the linked page.