Pagination design pattern

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

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.

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.

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.

Pagination at a standard wordpress blog.
Pagination at a Yahoo! 360 blog.
Pagination at a Blogger blog.
Pagination at a Digg.com.

View more example screenshots

9 Comments

yuva

3 Mar, 2008

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

seregaborzov

5 Jun, 2008

Great pattern! Thanks!

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!

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!

Willie

26 Oct, 2011

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.

Chris Jakeman

30 Mar, 2012

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.

Martijn

1 Nov, 2012

@Chris Jakeman
You can’t know the size of the visitor’s screen, or their zoom level. Therefor, you can’t possibly know how many items of data to display before the page becomes scrollable.

@topic
Should we be using pagination (paging?) as well for articles of text? Or only for listings and alike?

Annie

18 Feb, 2013

I’m implementing this pattern, and trying to decide what the set of numbers should be when there are e.g. a million rows.

For example, if you’re showing 10 rows, it should NOT be

1 … 3456,3466,3476,3486,3496,3506 … 134527

but what SHOULD it be?

responding to Willie:
This pattern is appropriate even with a million rows if there’s no way to search the data. Example – imagine PHPmyadmin without this pattern. Very awkward.

Finally, I’ve seen a list of links used when a slider would have been a better choice.

sarkosa

22 Mar, 2013

You can’t know the size of the visitor’s screen, or their zoom level. Therefor, you can’t possibly know how many items of data to display before the page becomes scrollable.