Users need to browse through a large list of items looking for the item that interests them most
Present the results grouped in pages with a fixed number of items and allow the users to move easily from one page of items to another
Often users need to go through a large list of items. This pattern is applicable when the items are too numerous to fit on one page. The items are typically ordered and the users are likely to find their desired item somewhere near the start, for example in Search Results
where this pattern is nearly t always used. Paging is also often used together with a List Builder
, for example in an web-based e-mail application. The number of items is typically at 10 to 200 items. The 'Items' can be anything such as e-mail headers, names, photos, phone numbers and so on.
Show navigation of the pages below the list of items. Provide a direct link to a particular page and links to the next/previous page that allow Stepping
through the pages. Show around 5 to 10 items at a time. Also show the total number of items and use a title to say what kind of items they are.
The basic structure for the navigation bar is: "Nr. of items", "previous", "1 2 3 4 5 ...", "next". The "previous" and "next" are only shown when there is a previous/next page. Additionally, links may be added to jump to the first or last page of items.
Depending on the font size for the page numbers, the size of the page number is quite small and therefore hard to click on. It may help to create an Enlarged Clickarea
by summarizing the hits, e.g. "11-20 21-30 ..." instead of "1 2 ...". The downside of this is that you may run out of space when there are too many items. In that cause, show the current page and a couple more, then some '...' followed by the last pages.
The navigation bar tells the users the most important information about the list; how many items there are, how many they see now and how to get to the rest. By placing the navigation below the list it is there when users need it most: after scanning all items on the page.
Although paging is a very common and accepted way of interacting, the arrival of Ajax technology has introduced new possibilities where paging is no longer needed. All results are simply shown but only loaded as the user scrolls down. See for example the Apple store's software section
This example from www.google.com
makes use of multiple O's to indicate the number of results and the clickable area around the previous/next button has been enlarged:
the page numbers are placed in a box in order to make the targets easier to be selected:
and many others also use this kind of large click targets.
the page numbers have been enlarged in a different way:
Stuff on End-less scrolling: