Avoid the Pains of Pagination

by on 02/06/13 at 5:06 pm

Everyone has scrolled to the bottom of a web page before and seen that row of numbers. That row of numbers is a website’s pagination. Pagination is a user interface pattern that divides content into different pages. It’s important to have one on your site to prevent your pages from becoming too long and overwhelming. But the way paginations are designed today are painful for users to use. It’s time to turn the page on painful pagination.

Stop Making Your Pages So Short

A web page is not like a book. The size of a book limits how much content can fill a page, but a web page has infinite height and can hold or load as much content as the website can handle. The only drawback to putting too much content on a page is that it can make the site load slower. However, most sites have enough bandwidth to support showing more content per page without compromising the loading time. The problem is that most sites show users very little content with short pages. By making your pages longer without compromising loading speed, users will get more content per page and won’t have to click the pagination as much. They’ll be able to easily scroll to see more content faster.

pagination-scrolling

Users have better experiences with scrolling than clicking. The mouse wheels, touchpads and touchscreens of today make scrolling faster and easier than clicking. To get to the next page in a pagination, the user has to find the link target, hover the mouse over it, click it and wait for the new page to load. That’s a lot of work when you break it all down. Imagine the user having to do that over and over because of short pages. To scroll, all the user has to do is flick their finger on the mouse wheel, touchpad or touchscreen. There is no wait time and new content comes to them with minimal effort. Stop making your pages so short and allow users to scroll for more content instead of clicking.

pagination-scrollbar

A clever way to measure if your pages are too short is to look at the height of your scrollbar. A short page will have a tall scrollbar. A longer page will have a short scrollbar. You don’t want to have a scrollbar that’s too tall or short, but something that’s in-between. This balance will offer users more content without slowing down page loads.

Offer Content Filters to Users

Some paginations can have so many pages that the page numbers start to reach triple digits. No user will ever sit and browse from page 1 to 100. This is why you should never display your content as a giant, endless archive. Instead, offer your users different content filters that organize and display the archive by specific categories or attributes. This allows users to only see content that matters to them without getting overwhelmed.

pagination-contentfilters

Make Your Click Targets Bigger

Many sites underestimate how important the size of pagination click targets are. That click target is the user’s only means of getting to the next page. Make the target big and easy to see so that users will want to keep going to the next page. This means turning your “next” and “previous” links into larger links or buttons. With a larger click target, users will be able to spot and hit it faster and easier.

pagination-clicktargets

Don’t Use First and Last Links

Some paginations have first and last links that allow users to skip to the first or last page. This is unnecessary and ususally confuses users. Sometimes the first and last links are displayed using double arrowheads, which users will often mistakenly click thinking it’s the single arrowhead link that takes them to the next page. Labeling the links “first” and “last” also causes clicking errors because of its proximity to the “next” and “previous” link.

pagination-firstlast

The first and last link is not necessary because most users prefer to look at content chronologically. 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. For those cases, you should have a search field in your navigation for that.

However, there is utility in giving users the option to go back to the first page. The first page often has the most relevant and recent content. After paginating the user might want to go back to the first page without having to click the “previous” link over and over. You should display the first page link as the number one with an ellipsis, such as “1…”. This way it won’t visually interfere with the “next” and “previous” links.

When to Display Page Numbers

It’s not necessary to always show a row of page numbers in your pagination. If your pagination has a lot of pages in the high double digits or above, it’s not helpful for users to see how many total pages there are because they won’t be able to get through them all. However, if your pagination has only a few pages in the low double digits or below, showing the pages in your pagination can encourage users to browse to the end. You should display page numbers when the amount of pages are small, but go with a simple next and previous button when the they are enormous.

pagination-pagenumbers

There is one exception to this rule. When dealing with eCommerce sites, it’s better to show the page numbers in your pagination so that users can refer back to a specific page to look at products they’re considering to buy. Page numbering also allows users to shop for products more throughly because it shows them which pages they’ve viewed, and where they are in their viewing progress. Not only that, but when users need to bookmark a page, it saves it with descriptive title tags of the page number and product category so that they can pick up where they left off without forgetting what they were shopping for.

pagination-bookmarking

When to Use Infinite Scrolling

There are only a few instances where infinite scrolling is effective. When your content opens in a new tab or modal window, infinite scrolling is a useful technique. But if your content opens on the same page, infinite scrolling can frustrate users. When the user clicks to go back, they’ll lose their place and progress in the content stream and will have to scroll from the top of the page again. Opening content in a new tab or modal window allows users to keep their place and progress and continue scrolling without restarting or refreshing the page. An example of infinite scrolling opening content in modal windows is Pinterest. An example of infinite scrolling opening content in new tabs is Inbound.

pagination-infinitescrolling

Another issue with infinite scrolling is that when users get to a certain point in the stream, they can’t bookmark where they are and come back to it later. If they leave the site, they’ll lose all their progress and will have to scroll endlessly down the page to get back to the same spot. This is why infinite scrolling is bad for eCommerce sites. When users shop online, they want to be able to come back to the place they left off and continue their shopping. They also want to be able to save a page of products they’re comparing. Infinite scrolling is effective only when it’s used in the right context.

Paginating with Keyboard Arrows

Not many sites are taking advantage of arrow key pagination yet. This unique technique gives users the freedom to paginate without clicking the pagination. 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 won’t know this feature is available unless you make note of it on your site. An example of this technique in use is Dribbble.

pagination-keyboardarrows

Avoid the Pains of Pagination

The pains of pagination run deep. For most users, a hard to use pagination is what stops them from continuing to browse a website. If the deeper pages of your site aren’t seeing the light of day, you could have a pagination problem. There are a lot of bad paginations on the web today. Do your part to stop bad pagination by making sure the pains of pagination aren’t found on your site.

18 Responses to “Avoid the Pains of Pagination”

  1. Michale

    Feb 7th, 2013

    Don’t Use First and Last Links

    ———————————————

    Just a quistion how would you tackle this is RWD – when you’ll have to increase button size, and have very limited view port visibility. For example screen size smaller than 320px wide.

  2. Zack

    Feb 7th, 2013

    The scroll bar height is relative to your monitor’s dimensions. Because of this, your article is ironically too long and my scroll bar is about as short as the example in “too long”.

  3. James

    Feb 8th, 2013

    Interesting article – but:

    “A clever way to measure if your pages are too short is to look at the height of your scrollbar”.

    This is fine if all your users are on a 1024×768 display, but is it really relevant in todays multi device world?

  4. Brian

    Feb 8th, 2013

    I really can’t agree more on how pagination of the past is currently outdated. With today’s *huge* parallaxing sites that are starting to creep up visitors are going to start being groomed for infinitely large pages. However “in page navigation” is huge to get from section to section of your page.

    A lot of thought has to go into this to get this right, and it really begins with the application. Does it make sense to have it a, b, or c?

    Great article!

  5. Mathew Sanders

    Feb 22nd, 2013

    Infinite scroll and bookmarking can play nice with each other if you use HTML5 history APIs (see http://warpspire.com/experiments/history-api/ for a proof of concept).

    One problem with a lot of lazy infinite scroll implementations is when people keep links in the footer that aren’t easily found elsewhere.

    An alternative would be to have a ‘load more’ button at the end of results (most of the time I think people just want to see more results and rarely want to jump to a specific page).

    • Nk

      Feb 26th, 2013

      This is not a problem of lazy, infinite scrolling, it’s a problem of people using footers with lazy, infinite scrolling. If you’re going to use infinite scrolling implemented that way, don’t use a footer. If you must have a footer with important links, using a “load more” button as you suggested is a good solution.

    • Alex

      Oct 14th, 2013

      Facebook is an example of footer links with infinite scroll. I’m amazed they still haven’t fixed that problem.

  6. Martin Tournoij

    Feb 25th, 2013

    Another drawback to infinite scrolling not mentioned is that it changes the size of the browser’s scrollbar, which breaks the scrollbar.
    When it changes size, the mouse cursor position is suddenly somewhere else on the page, and so is your browser. It’s pretty annoying and frustrating, especially when it’s unexpected.

  7. Devitaliser une dent

    Mar 20th, 2013

    I really can’t agree more on how pagination of the past is currently outdated. With today’s *huge* parallaxing sites that are starting to creep up visitors are going to start being groomed for infinitely large pages. However “in page navigation” is huge to get from section to section of your page.
    A lot of thought has to go into this to get this right, and it really begins with the application. Does it make sense to have it a, b, or c?
    Great article!

  8. Rob

    Mar 25th, 2013

    Infinite scrolling seems to be a solution for a rare few. Instances, each site is different so you need to do testing for whatever solution you implement. Etsy has quite the tail of whoa on failed infinite http://danwin.com/2013/01/infinite-scroll-fail-etsy/

  9. Adam

    Apr 4th, 2013

    How does everyone feel about using an omnipresent menu system with infinite scrolling – context dependent, of course. I can’t imagine this would work well with e-commerce, for instance.

    Instead of the navigation being omnipresent, what about having an omnipresent icon or representation of navigation that expands on hover (first tap)?

  10. Sneha

    Apr 25th, 2013

    What do you think about a pagination that gives a scroll bar to view list of pages..

    See http://d3.ru/

    Go to the end of the page..

    If styled well, do you think it is user-friendly?

  11. Alex

    Jun 1st, 2013

    Reading this post I have learned that we could set the keyboard keys to go to the next page. Great.
    Secondly, there are still many websites that do not afford a good bandwidth and therefor a lot of results per page could slow down the website. I think the best solution would be to have filters. If the filters are done properly is it possible that in the end you wouldn’t need a pagination at all.

  12. James

    Jun 18th, 2013

    Unfortunately the truth about short web pages has nothing to do with user experience or bandwidth. The more pages your visitors have to click through to read the whole story/article, the more adverts you serve.

  13. daslicht

    Jun 19th, 2013

    what about using the ‘Scrolling Card Model’ ?
    Fixed Chunks of content but with teh ability to scroll horizontally through these pages…

  14. asdf

    Jun 22nd, 2013

    Screw pagination. The website is only too long if it starts to slow down the browser. Only then should you divide content into pages.
    Almost all website that use pagination fit too little content per page.

    And there’s something very important you forgot to mention in the article. Ctrl+F can only find results on the current page, so here’s another argument for long pages.

  15. Joel Siddall

    Nov 13th, 2013

    Some very interesting points here on page length and infinite scrolling. As mentioned, there is a time and a place for infinite scrolling and all alternatives must be considered before deciding which route to take.

  16. Manticorp

    Apr 18th, 2014

    Just a note to those out there, there is a chrome extension which allows you to use keyboard navigation on most/all sites:

    https://chrome.google.com/webstore/detail/previous-and-next-page-ke/bgddcngmfadknajipncoemekkikibfhg

Leave a Comment