Pagination Edit
Problem summary
The user needs to view a subset of sorted data that is not easily displayed on one page.
Example
Usage
- Use when there is more data than what is comfortably fitted into one screen.
- Use when the dataset is ordered into amount of interest (that usually means newest first)
- Do not use when you don’t want the user to pause for navigating to the next page.
Solution
Break the complete dataset of items into smaller sequential parts and show these on separate sequential pages. Provide pagination control to browse from page to page. Let the user browse to the previous and next pages by providing links to such actions. Also, provide links to the absolute start and end of the dataset (first and last).
If the dataset is of defined quantity, also show a link to the last page. If the dataset to show possibly is of varying size (for instance as a result from a search), do not bother to show a link to the last page.
Rationale
First and foremost, pagination parts large datasets into smaller bits that are manageable for the user to read and cope with. Secondly, pagination controls conveys information to the user about, how big the dataset is, and how much is left to read or check out and how much have they already checked out.
Pagination provides the user with a natural break from reading or scanning the contents of the dataset, and allows them to reevaluate whether they wish to continue looking through more data, or navigate away from the page. This is also why pagination controls are most often placed below the list: to provide the user with an option to continue reading through the larger dataset.
More example images of the 'Pagination' pattern
-
-
Pagination at a standard wordpress blog.
-
Pagination at a Yahoo! 360 blog.
-
Pagination at a Blogger blog.
This document is in version 1 and was last updated on Dec 25, 2008 by Anders. Edit this pattern.
Related information
Collection
Related patterns
Related links
Pagination has 4 comments
-
about 1 year ago
yuva
3 Mar 2008
can you tell how to do pagination…..........
-
about 1 year ago
seregaborzov
5 Jun 2008
Great pattern! Thanks!
-
11 months ago
webgurl
10 Jul 2008
Thanks for putting such a simple, easy to understand tut. This is what I have been searching for all over. Cheers!
-
5 months ago
Mike
9 Dec 2008
@yuva: you can see a copy/paste pagination example at http://www.mgitsolutions.com/blog/2008/11/design-guidelines-pagination/
@Anders: thx for this pattern! great job!