Paging
Boyd de Groot, Martijn van Welie
Users need to browse through a large list of items looking for the item that interests them most
From www.digg.com
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 where this pattern is nearly t always used. Paging is also often used together with a , 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.
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
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 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 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 or Dzone
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:
At www.uxmag.com the page numbers are placed in a box in order to make the targets easier to be selected:
www.flickr.com, Squidfingers and many others also use this kind of large click targets.
At www.alltheweb.com the page numbers have been enlarged in a different way:
Endless-scrolling
Stuff on End-less scrolling:
http://www.codeandcoffee.com/2007/04/17/ajax-and-the-endless-scrolling-feature-of-pages/
http://looksgoodworkswell.blogspot.com/2005/06/death-to-paging-rico-livegrid-released.html
http://way.nu/archives/2006/08/humanized-very-nice-ajax-eternal-scrolling-ui/
Paging is very similar to Tabbing. However, with Paging the users will typically browse from the first page to to other pages in a (semi-) linear way. Moreover, all items together have
a task-specific order while items in Tabbing are ordered on category.