Pagination Design Pattern

Problem summary

The user needs to view a subset of sorted data that is not easily displayed on one page.

Example

dirty.ru

▲ At dirty.ru, there are several hundred pages of posts, why jumping only 10 at a time can be a tiresome process. A slider solves the problem.

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.

More examples

See all 36 example screenshots

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.

This article has been commented 5 times.

More examples of the Pagination pattern See all 36 example screenshots

30 0
Add to set
12 0
Add to set
18 0
Add to set
7 0
Add to set
65 0
Add to set
24 0
Add to set
35 0
Add to set
11 0
Add to set
See all 36 example screenshots

User Interface Design Patterns

Getting input
Navigation
Dealing with data
Social
Miscellaneous

Persuasive Design Patterns

Cognition
Game mechanics
Perception and memory
Feedback
Social

5 comments

  • D7559f39e910660955c663c329618029

    yuva on Mar 03, 2008
    Remove Edit

    can you tell how to do pagination………….

  • C8bbdd700f12abdf4275b869b196f6a8

    seregaborzov on Jun 05, 2008
    Remove Edit

    Great pattern! Thanks!

  • 127370b8282bd50d7a7ec62a8f85c964

    webgurl on Jul 10, 2008
    Remove Edit

    Thanks for putting such a simple, easy to understand tut. This is what I have been searching for all over.
    Cheers!

  • 42ec1cd69a0bd3dc1299d587ababf927

    Willie on Oct 26, 2011
    Remove Edit

    While this is a slick solution to the problem. It’s the wrong problem to solve. How is someone to know that the content they’re looking for is on page 262? With that much data, they’re going to want to search for it.

  • 01c7b0a5d301046bd941601389b9b598

    Chris Jakeman on Mar 30, 2012
    Remove Edit

    If you are paginating, the content should fit on a single screen so you don’t have to scroll.

    You should be able to step through several pages without re-positioning the mouse.

    You can provide a keyboard shortcut for Next Page and you can position the Next Page button in exactly the same location on every page.

    Just my thoughts.

Comments have been closed