Paging
Problem
Long lists of similar looking data, such as search results, are difficult to make sense of.
Solution
Present the items grouped across multiple pages, with a consistent number of items per page, and provide an easy to use set of controls to navigate the pages.
Context
- There are too many items to be shown on a small number of pages, or too many to be shown without confusing users.
- Items can be represented in a consistent format, so that it is clear when one item begins and ends.
Rationale
Large lists of data are not only difficult to initially navigate and make sense of, but it is also very difficult to keep track of where you are in the data, and to get back to an item previously found. Breaking up the items into smaller sets that can be viewed one at a time reduces the effective perceived complexity for users.
Increased technical performance achieved by only having to return subsets of the overall data will also benefit users, in that quicker response times will mean less time waiting for each page of items to load.
Implementation
Show users how many total items make up the overall data set, how many pages the items are broken up into, and which page is currently being viewed. Provide controls that allow users to jump to specific pages, as well as step back and forth one page of items at a time.
The above example from Google Analytics provides a way to change the number of items shown per page and to go to a specific page.
Navigation Row Content and Layout
At a minimum, place navigation controls directly below the list of items. In many cases, it will make sense to additionally provide navigation controls above the list of items to ensure that the controls are always visible.
Standard practice is to use links or buttons labeled 'Previous', then the specific page links, and then 'Next.' Do not show ‘Previous’ links on the first page, and do not show ‘Next’ links on the last page of items (or show these links, but show them as inactive). You will usually want to provide quick links to the first and last pages, especially when these may be the most relevant (e.g. most relevant news links on the first page or the most recent discussion board posts on the last page)
The above example from Flickr display links to the first/second page and the last two ones, with an ellipsis to separate them from the current page range.
Provide visual elements such as arrows for Previous and Next in addition to textual links. This will differentiate them from the specific page links. The above example from Yahoo uses color to differentiate them in addition to just the arrow shape.
Page Links
Clearly identify the current page, for example by deactivating the link for the current page and by visually differentiating it from the other page links.
While many existing implementations still only provide small links for each page, it is important to offer large enough targets for users, so that each page link can be quickly and easily selected. One way to accomplish this is to make the area around the number part of the link as well, as seen below in the example from Windows Live Search.
Making the area surrounding the page number increases ease of use.
It is standard practice to allow users to select how many items are shown per page.
Accessibility
Allow each link to be navigated to with the Tab key, and when an individual link has keyboard focus, hitting the Enter key should navigate to the linked page.
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
Paging pattern is implemented in the following ASP.NET controls: WebDataGrid, WebGrid, WebDropDown. Check out the samples browser to see it in action.
Silverlight
The NetAdvantage for Silverlight xamWebGrid and xamWebTileView controls both allow you to configure paging of lists of data.
Examples
I like the visual design for this example from Flash Den. The black for hover and the no-button-look for selected are very effective, along with the design that makes each page look like a button. They appropriately afford clicking and are spaced nicely as to make a right-sized target.
http://quince.infragistics.com/11fu
The primary example is from Google. The number of O’s in the “Gooooooooooooogle” above correspond to the number of search result pages, and become part of the visual indication of what page you are currently viewing.
http://quince.infragistics.com/10vr
Windows Live Search puts boxes around the navigation links to provide a larger target to click on.
http://quince.infragistics.com/10xy
At Yahoo’s alltheweb, the number of results on each page is shown as part of each page link itself.
http://quince.infragistics.com/1108
This sample shows an example of the Infragistics WebGrid ASP.NET component’s paging capabilities.
http://quince.infragistics.com/114w
This example shows a sample from Infragistics JavaServer Faces WebGrid, which uses the numeric pages and the arrow indicators for first, previous, next, and last.
http://quince.infragistics.com/1188
Sources
Patterns in Interaction Design, Paging
UC Berkeley Web Patterns, Paging
Faruk Ateş, Pagination 101
User Interface Design Pattern Library, Pagination
Tags
