Navigation

Avoid the Pains of Pagination

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 separate pages.

It’s important to have on your site to prevent your pages from becoming too long and overwhelming. 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 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.

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.

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.

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.


Book

Affiliate

elegant wordpress themes

This Post Has 27 Comments

  1. Michale Reply

    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 Reply

    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 Reply

    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 Reply

    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 Reply

    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 Reply

      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 Reply

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

  6. Martin Tournoij Reply

    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 Reply

    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 Reply

    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 Reply

    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 Reply

    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 Reply

    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 Reply

    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 Reply

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

    • Ty Cahill Reply

      Horizontal scrolling can be problematic because it’s difficult to know the vertical size of the screen when designing the page. Will things be viewed on a huge monitor, or a small phone? And for web content, people are much more familiar and accustomed to vertical scrolling.

  14. asdf Reply

    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.

    • Ty Cahill Reply

      The etsy article does a pretty good example of showing when pagination may be a useful thing to have. It all depends on how people use the site, so it’s important to get user feedback and make continual improvements.

  15. Joel Siddall Reply

    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 Reply

    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

  17. Sherif Sans Serif Reply

    This post seems to be contradictory. You say that the perfect height of a page should be determined by the scroll bar and then endorse infinite scrolling as the easiest way to view content. Clear UI determines the success of pagination, which has it’s benefits in appropriate situations. Infinite scroll tends to be better for leisure browsing situations such as Pinterest.

    In this example people tend not to sort or filter pins, and so, an infinite feed is appropriate. Pagination works for well when filters get you half way. True, most users won’t view all pages 1-100, but some do start at 50 and progress. The problem with current sort & filters is that they often provide extremes: highest price, most popular, highest rated, best selling, newest, etc.. When users might be looking for something that is fairly priced as long as it’s appropriate for their purposes. In this case these items might not be the most popular or highest rated but a perfect match for our “Goldilocks” user.

  18. Ty Cahill Reply

    “…a web page has infinite height and can hold or load as much content as the website can handle.”

    it should be “as much content as the BROWSER can handle.” If you throw too much content at the browser you’ll cause trouble, especially on less powerful devices.

  19. Steve Clark Reply

    All hail scrolling! I always prefer scrolling to pagination on websites I visit. Sadly some outlets prefer to slice their articles in an unnecessary amounts of pages and that drives me nuts

  20. Water Boy Reply

    I think web pagination should die in a fire. I see a interesting headline and when I go to the website there’s like 10 pages on the article. Scrolling pages generally load as quick as a small one. I have to keep using my phone data or lagging my PC browser to see those multiple pages. From this day when there’s pagination I’ll close it immediately.

  21. keekooko Reply

    Pagination is good when you are displaying tons of data. You’ll get lost when it’s an infinite scrolling. Btw, not all people knows Crtl+F.

  22. yiannis Reply

    In your “Don’t Use First and Last Links” screenshot, I don’t think the arrow buttons are needed (in the approved example). When you are on page 7 you can click on 6 or 8 to go o previous or next page, or you can click 1 or 13 to go to the first or last page, respectively.
    E.g:
    – I am on page 1. Display: 1,2,3,4,5….13
    – I am on page 7. Display: 1…5,6,7,8,9…13
    – I am on page 12. Display: 1…9,10,11,12,13

  23. Niamh Walsh Reply

    I am more interested in the next and previous button. If we have to use next and prev for sake of an argument –

    [ Prev ] — [ Next ] or [ Previous ] — [ Next ] ? which on would be better to use? I know using full word make sense but nowadays people use short word to fit content in the smaller screen size, which tells me that people are familiar with the word Prev as Previous when it is used in the context with [ Next ] and they won’t mistake it for something else.

Leave a Reply

Your email address will not be published. Required fields are marked *