Search Pagination

Also known as: Paging
Tags: navigation

When there are too many search results to comfortably fit on a single page, split the results into separate pages. Allow the user to navigate between pages using a pagination (paging) control.

Navigate between your search results

Flickr uses pagination to let the user flip through search results and gallery pages. The pagination control is well designed: it tells the number of result pages and the items found in total, the current page is clearly indicated, link targets are large enough, and there are links for moving back and forward in the results.

The number of pagination links is limited to 7-11. When on pages 1-4, the page links start at “1”, and 7 links are displayed. On pages 5-8, the first page is 1, but last page is the current +3. For example, when on page 8, the first page is 1, and the last page 11. When on pages 9 and onward, the page links start a the current page minus 3, and end at the current page plus 3.

What Problem Does The Pattern 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 It?

  • Displaying search results.
  • There are more results than can comfortably fit within one screen.

How to Use It?

  • Break the information into a sequence of pages sorted by relevance.
  • Provide a pagination control for providing access to paged content.

Pagination Control

  • Display the navigation controls as a row of links.
  • Provide large clickable areas for links, and add enough space between them.
  • Present links in the following order: “Prev”, page links, “Next”.
  • Display a left arrow after the label “Prev”, and a right arrow before the label “Next”.
  • Make the arrow(s) clickable.
  • Consider providing a link back to first and last page.
  • Display a reasonable number of pagination links (usually showing more than 10 page links is a bad idea).
  • 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.

Why to Use It?

  • Results load quickly.
  • Using pagination means less, if any, scrolling.

Pagination Control

  • 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.

Accessibility

  • 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.

Sources

This pattern is based on the “Search Pagination” pattern from Open Design Patterns.

Useful Links

Code Examples

Where Is It Used? (No examples yet)

Comments