Design Pattern Library

Item Pagination

Problem Summary

The user needs to view data items from a potentially large set of sorted data that will not be easy to display within a single page.

EXAMPLE:

Pagination control for Yahoo! 360 blogs

Pagination control for Yahoo! 360 blogs

Use When

  • There is more information than can comfortably fit within one screen.
  • The items of interest can be usually found on the first few pages.
  • If the data needs to be explored deeply, consider displaying the content in a scrolled area instead.

Solution
  • Break the list of items into a sequence of pages.
  • Provide links to access the previous and next pages of information.
  • Provide links to jump to the first and last pages in the set.
  • Provide information about what type of object the user is browsing.

    • Illustration of item pagination control


  • Provide information about the set of objects the user is currently viewing.
    Use the form: "[$ObjectName]s [DisplayedItemRange] of [TotalItems]
  • Present links in the following order: First, Previous, Next, Last.
  • Use graphical arrows to increase the target size of the links.
  • Show the displayed states of controls when they are unavailable.

Rationale
  • Displaying arrow graphics helps differentiate the links and provides larger click targets.
  • Unlike in Search Pagination, the controls are visible at all times during paging (even when disabled). This prevents distraction to the user that would occur when removing unavailable controls during paging.

Accessibility
  • Do not hyperlink the page that is currently active, i.e. if on the page three, the number 3 should not be hyperlinked.

Copyright © 2005-2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings