Pagination Best Practices

One of the most commonly overlooked elements of a site or app is their pagination controls. In many cases, they are treated by designers and developers as an afterthought. Actually pagination is pretty easy to get right, but still there aren’t so many sites and apps that has a decent pagination.

Before going into analyzing good pagination, I want to explain just what I consider to be pagination: pagination is the method of splitting up content into several pages and providing a set of links you usually see at the bottom or top of a page that allows you to go to the next or previous page, or choose a page number you want manually. Google Search results are the obvious example, but it’s good to realize that pagination is also found on blogs (Previous/Next post links) and significant number of eCommerce sites.

Pagination

And one last thing, the importance of pagination is very subjective —  it depends on the content and context. For Google search results, pagination is pretty important thing because Google wants to give you exactly what you search for in the first 10 results.

Rules For Good Pagination

Making good pagination isn’t a difficult task. In order to complete this task you should remember and follow these guidelines.

1. Provide Reasonable Page Length

Don’t make your pages too short. Safe option for search results is to display 25 to 75 items per page. However, this number is very approximate. The real number will depend on your site’s context and industry. For lists with more spec-driven products (consumer electronics, hardware, automobile parts and supplies), you should use the lower range (e.g. Best Buy uses 15 the most relevant items per page). In contrast, for visual-comparable products (like apparel) users can deal with a higher number of items (e.g. eBay uses over 300 items per single page).

2. Provide Large Clickable Elements

Many sites and apps underestimate how important the size of pagination click targets are. Large clickable targets is a solid rule for any kind of navigational link, whether it’s a menu elements or a pagination elements, but in the context of pagination elements this may be even more pertinent. It’s simply essential to make the targets big enough so users will be able to spot and hit them faster and easier. To provide good user experience on mobile devices you should design elements that measure at least 44 points x 44 points so they can be accurately tapped with a finger.

Large pagination targets help users navigate easier and fater. Image credits: Apple

3. Identify Current Page

“Where am I?” is one of the fundamental questions users need to answer to successfully navigate. Users rely on visual cues from navigation elements to answer this critical question. That’s why you should identify the current page clearly with a proper styling. Your users need to know where they are right now. The current page should be significantly different in style from the other pages, so that users can easily keep track of where they are. And don’t rely on color alone, ensure that the status is understandable when viewed without color!

4. Limit Number of Pages and Space Out Elements

The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.

Good example: Google has a set of 10 links.

You should also make sure that there is enough space between each page link so that a user can’t accidentally click on the wrong page number.
Bad example: Page links are a bit too close. Another problem is double digit page numbers very difficult to distinguish from one another.

In most cases, Previous and Next links are very useful for users. But, in order to create a decent pagination control, you should clearly separate them from the page numbers and give them sufficient distance or unique styling so that they can't be mistaken as a page; this is particularly pertinent if you use arrows instead of text for Previous and Next.

Some paginations in addition to ‘Next’ and ‘Previous’ links provide links to the first and last page. They are usually displayed using double arrowheads, which users can mistakenly press thinking that they’re the single arrowheads’s next and previous navigation buttons.

Don’t: Arrowheads are able to confuse users

Labeling the links “first” and “last” doesn’t help too much, because users may accidentally click them when they actually want to use ‘Next’ and ‘Previous’ (this is happen due to the proximity to the “next” and “previous” link).
Don't: ‘First’ and ‘Previous’ are too chose to each other.

In most cases, the first and last links aren’t necessary because users prefer to view content in chronological order. There’s no reason for them to start from the last page unless they’re trying to find content from the past that they’ve already seen before.

In most cases, the links to the first and last page aren’t necessary because users prefer to view content in chronological order. There’s no need for them to start from the last page unless they’re trying to find content they’ve already seen before. However, there is practical value in providing the option to go back to the first page — after paginating the user might want to go back to the first page in just one click and you should help them. That’s why it’s a good idea to display the first page link as the clickable number one.

Do: First page is always available for selection and the total number of pages is visible.

When your pagination has a large number of pages you can use a solution displayed below.
Do: Pagination clearly marks Previous/Next controls and not causing any confusion. Also in page numbers three dots (…) followed by last two page numbers clearly showing the pagination goes till 200.

7. Adjust Pagination for Mobile Devices

It’s known fact that mobile devices have a limited screen estate. And we must use it efficiently. While for a desktop we able to provide a list of pages, for mobile devices we should provide only essential elements — current page number and basic navigation options (First page, Previous page and Next page).

Left: Pagination for desktop. Right: Pagination for mobile devices.

8. Provide Paginating with Keyboard Arrows and Tabs (Desktop-only)

Give users the freedom to paginate using keyboard only. A simple press of the right arrow key takes them to the next page while the left arrow takes them back a page. However, users should be notified about this feature or they won’t know it’s available. A simple message like “Use keyboard ← left and right → arrow keys to navigate through the pages” below the paginator would be enough. 

It’s also good to allow user to navigate between links using a Tab key, and when an individual link is in focus, hitting the Enter key should resulted in moving to the linked page.

Use Page Numbers or Next/Previous combination?

If your pagination has only a few pages in the low two digits, showing the pages in your pagination can encourage users to browse to the end.
However, if your pagination has a lot of pages in the high two digits or above, it’s not helpful for users to see how many total pages there are simply because they won’t be able to get through them all.

Thousand pages of content don’t encourage users to explore it.

There is one exception to this rule. When designing a pagination for eCommerce sites or apps, you need to show the page numbers in your pagination so that users can refer back to a specific page when they’re considering to buy a specific products.

Takeaway: In general, you should display page numbers when the amount of pages are small, but go with a simple previous and next buttons when it’s big.

Conclusion

Good pagination improve readability and reduce complexity. Hopefully you’ve received some clues as to what makes good pagination and this will help you to establish perfect user experience.

Thank you!