Usability of Pagination Links

In case you missed the thorough pagination gallery that was published in November: Pagination Gallery: Examples And Good Practices

There are really some good (and bad) examples collected at the page, including these written “best practices”:

  1. Provide large clickable areas
  2. Don’t use underlines
  3. Identify the current page
  4. Space out page links
  5. Provide Previous and Next links
  6. Use First and Last links (where applicable)
  7. Put First and Last links on the outside

I am missing a few important points in that article.

Think twice before adding link to “last”

First, i will in some cases disagree with the advice to use a “last” link as mentioned in #6. For big search results it will mostly be irrellevant to jump to the last page. Often a search resulting in lots’ of hits will lead to another more specific search. Who cares what the last of 24,000,000 results on a Google search for “usability”? I think it’s correct of Google not to show a “last” link. Jakob Nielsen notes that 42% use the top link, 8% the second link, and the other links are even less likely to get attention. (see end note for details).

The anatomy of searching is usually to keep narrowing your search until the result you were looking for is in the first page.

Also Amazon uses that technique. Here is a screenshot from the German Amazon.de:

amazon-search-result-paging.png

As you see, there the paging only covers the first 3 pages (or 75 items of 168 found in the query). In my opinion (and backed by the Google and Amazon examples), this should be the default. However, in rare cases there could be an idea in providing a “last” link.

For instance in a netbank, when searching for payments or elsewhere when returning a limited, known resultset you are likely not to narrow down further.

So I would reformulate #6

6. Use First and Last links (where applicable)

6. Provide a link back to first page. Don’t use a link to last page, unless there really is a value for the end user on the last result page.

Number of pagination links

Also I am missing a guideline regarding to how many pagination numbers to show. Here is my suggestion:

8. Provide a reasonable number of pagination links. Usually, the 3 first pages are enough.

The last sentence follows the Amazon example from above. For the record, i have gathered the different states here in case i am missing something

amazon-search-result-paging-all-states.png

Consider “endless” scroll and avoid pagination

One other point that I want to add is that pagination add a lot of controls that don’t necessarily add value to your content. By adding more links, the content gradually gets hidden more and more. In article, there are som example where pages actually implement so many paging controls that it will eventually confuse some people. So, before adding pagination, consider the alternatives.

For instance, does it really, really add value that you are able to jump directly to any of the 28 pages in this example:

pagination jump to any page in result set

One alternative is the “endless scroll” model. Bill Scott originally wrote about this and implemented it for Rico (javascript framework). Bill’s Death to Paging! – Rico LiveGrid Released

Currently, Google Reader also uses this, and it’s very intuitively implemented. You scroll the feed list and when the scrollbar approaches the bottom, suddently, more items are loaded in the background.

Important pros and cons of “endless scroll”:

  • Very intuitive. No need to learn new navigation, just scroll.
  • No need to clutter interface with additional controls that require braincycles to understand
  • Watch out: Can be surprising to new users that the scrollbar itself shrinks as new results are loaded

Because of the last bullet, I would not recommend using “endless scroll” in any situation. But at least I would recommend you seriously consider it. (Btw, if you know of any other easy-to-implement of endless scroll, please let me know and I’ll add it to the article).

Alternative: No pagination

One final option also deserves a mention here. Using no pagination, “endless scroll” or similar is actually the easiest to implement and the easiest to comprehend.

Actually, we recently decided not to implement pagination in a project. Instead we took a principal decision and showed maximum 30 results. The question “what if there are 31 results?” — the classic N+1 question that you would have to face regardless of you pagination strategy or a fixed number of results.

The biggest advantage of this is that it’s the fastest to implement. Just limit the number of search results to a fixed number. But this also puts a burden on you shoulders: You as the application designer must make an informed decision about how many results it would be appropriate to show. In the case of a Google-like search dataset, there are data that suggest that most people choose from the first 10 search results (or else they narrow searching). So 10 results may be appropriate. In other cases you may want to adjust that number to either side.

In any case, make sure you ask your project team the question: Did you seriously consider no pagination? Seriously? Are there features we should spend time on that add more value than pagination?

Making informed design decisions on behalf of the users is one of the things I admire in “getting real” by 37Signals. If anything can be done to reduce the number of braincycles used to understand a user interface, make sure you seriously consider it. Start With No [pagination]. Epicenter Design [to focus on the most important features]. Build less. Beware the bloat monster.

End note:

Jakob Nielsen: “The power of default values” (September 2005), Thorsten Joachims et al.: Accurately Interpreting Clickthrough Data as Implicit Feedback“(178KB pdf file). Nielsen notes that 8% follow link number 2, but I can’t find that result in the publication. This graph I’m reading as follows:

search-result-rank-click-rates.png

  1. 42%
  2. 16%
  3. 12%
  4. 6%
  5. 5%
  6. 7%
  7. 3%
  8. 4%
  9. 1%
  10. 4%

Regardless of the accurate numbers, it does not alter the conclusions that users focus on first results. Furthermore, there is nothing in the materials that backs up my theory that people narrow their search until what they look for are in the top results. Please let me know if you are aware of any numbers that can confirm that.

Technorati Tags: , , , , , , ,

29 Responses to “Usability of Pagination Links”

  1. Tobias Says:

    I guess it will mostly make sense to supply links to the end/all pages, if you have a result set that is sorted — eg. alphabetically or by date. And even then, you would probably also supply an option to reverse the sorting or narrow the result set.

    One thing I miss in the applications I have encountered that uses endless scroll, is a (better) indication that more data is being loaded when you reach the ‘bottom’. While Google Reader does show a message with ‘Loading more items…’ it’s hard to notice.

  2. Jan Says:

    Hi Jesper, like your Blog and I agree with your post. Just one thing for your non-german speaking readers: “zurück” and “weiter” mean “backward” and “forward” and function like one-step-backward/forward. They don’t mean “start/end” or something… :)

  3. Geoff Says:

    I agree with Tobias: being able to reverse the sort order is critical, and replaces the need for a Last button. Nice post.

  4. Geoff Says:

    Need to qualify: my comment above doesn’t apply to Google results (or any other search by relevancy). Price, quantity on hand, age, size, alpha: those all need a reverse sort.

  5. Jesper Rønn-Jensen Says:

    @Tobias and @Geoff: I agree with you that the ability to reverse sort can be important. But my point is, that you really shouldn’t consider adding a “Last” link unless you are in that situation.

    But note that “reverse order” will suddenly add even more controls to the pagination. The flaw about that is that more controls will grab attention away from the stuff that acts value on the page. (this is a classical issue that I regularly encounter in advanced searches… for instance Danish book stores and libraries).

    My advice here is that you have to be careful with how many controls you add. Because controls to less important features are irrelevant. The primary focus is on the data. Maybe you forget (as the designer of the page) to focus on the most important job:

    Prioritize content. Ask for instance:

    • What will be the default search order?
    • How often is the backwards search used?
    • How many people will never use the last page?
    • How many people will need to reverse search results to work effectively?

    And as Geoff mentions, this does not go for generic search results that are sorted by relevance.

    To be a little controversial: If you have to sort by relevancy, ask yourself which other controls you can remove? The pagination, perhaps?

  6. The Usability of Pagination Links | Sideblog | Smashing Magazine Says:

    […] usability of pagination links: Jesper Rønn-Jensen’s annotations. Consider “endless” scroll and avoid […]

  7. Joe Says:

    Don’t use underlines ????????
    but why?

  8. Jesper Rønn-Jensen Says:

    @Joe

    I understand why you frown at that guideline. I think it’s important that pagination is always secondary functionality compared to the actual content.

    Yes, normally underlines indicate that there is content or functionality behind a given text and it’s convenient that you don’t have to discover by moving your mouse around on the screen.

    But I would argue — the same way with menus — that this is secondary functionality. If you don’t instantly discover the pagination, so what! The default sorting of the paginated list should be good enough for most people.

    I would personally prefer that the actual content steal attention — not subsidiary links etc. Of course, it’s a tradeoff, and it depends on your actual data. But in general I think you sould

    1. Start with no pagination (nothing to steal attention from the content)
    2. If in some cases people need pagination to navigate the results, provide the pagination as visually subtle as possible

    Turn this around: You would never start with pagination links that are visual dominant for the content on the page. That would signal that you are on the wrong page.

  9. WebWord » Blog Archive » Usability of Pagination Links Says:

    […] Usability of Pagination Links […]

  10. gmlk Says:

    You may want to look at http://unspace.ca/discover/pageless

  11. Foxinni - Wordpress Designer Says:

    Looking at it from a google point of view…. Showing more that 3 or 4 on a “text-based” search would seem redundant. However, the image search is something that no mathematics “easily” can decipher relevancy to. There it comes quite handy to have many pages. Adding more keywords to an image search might just loose the result you were going for.

    In both cases last results is unnecessary. I also agree wit not showing more than 1, 2, … next >> If you are doing a generic search then page 15 (for example) won’t be much of use. As a layout designer.. i believe that bringing content to a user is much more valuable that making them go look for it.

  12. Alexis Brion Says:

    Great article. I do agree with not using the “last” link, it could finish up confusing users.

  13. Mind Gravy » Blog Archive » links for 2008-02-29 Says:

    […] justaddwater.dk | Usability of Pagination Links (tags: pagination) […]

  14. Mary - custom web designer Says:

    Using incrementally increasing numbers is also a Yahoo recommended design pattern. E.g.

    1, 2, 3, 4, 5, 10, 20, 30 , 100

    Also, although not considered pagination directly, have an option to decide how many results per page to show makes life a lot easier.

    Joe, because: it is hard to read, it is assumed (in this rare case), and everyone is doing it. Do you need another reason?

    P.S. I wish Google would still let me look at result 20,000. I am so nerdy that way sometimes that I want to see the last result when I get tired of the top 100 results.

    10 Top Reasons Why Jakob Nielsen’s USEIT.COM is NOT usable, nor intuitive

  15. hagoleshet Says:

    I know this all about human usability but there are other reasons to put last and/or more than 3 links.
    I’m referring to SEO considerations.
    On indexing pages of all sorts (not search results pages) it is sometimes important to make it easy for spiders too to get to as many pages as possible so that they can be indexed.

  16. Tomelloso Says:

    “endless” scroll may be best option and look nice, I must use this in my next web project.
    Use more that 3 links like tell hagoleshet can be useful to help search spiders but actually think that for this is better and more important add the site to webmaster tools in searches.

  17. Watches Store Says:

    An excellent post, and one that many will have an opinion on. I suppose it comes down to what works best on your own site, rather than on others, and that means either split testing different methods, or testing each over a period of 2-3 months. On some of my sites 1,2,3 is is good enough, but on the forums I need to list to at least 6, and this has proven itself over the years with feedback.

  18. Contratipo Says:

    Great article!
    Congratulations Jesper!

  19. Diseño Says:

    Really an useful post, now and thanks to this I plain better my site structure and I made a few days ago an experiment with different possibilities, one using “endless scroll” and other with pagination links. In a few weeks I will see results and comment here. Thanks for share.

  20. Clean Red Widgets Says:

    That graph is very accurate compared to the way that I search for things also, if I cant find what I am searching for within the first ten results I will change up my wording for a new search. Images is a whole different thing though I will browse through search results forever until I find what I am looking for.

  21. newer phones Says:

    […] justaddwater.dk | Usability of Pagination Links (tags: pagination) […]

  22. Francisco Says:

    The sad thing is how this very good practices (for the web) have been migrated in to enterprise systems, for example, think of an inventory system for a state government, let say they have around 500,000 different things in inventory, and you search for anything that begins with “a”, the result is going to be around 50,000… what is the advantage of pagination here? do we seriously thing that the user is going to spend 3 days reading page by page until he founds what he is looking for?

    I think pagination is one of those overused stuff that migrated from system that work with un-structured data (like Google) an in to systems that work with structured data (based on RDBMS) and that really do not make sense in the structured world, if you are getting more search result than you can read in under 1 o 2 minutes that that pretty much means that your search is not specific enough. Why bother implementing pagination then?. It seems to be a psychological thing we, as developers “like” the idea of offering “freedom” to the user, and the user likes that “freedom”, if you remove the paginator they will complain because they do not see it, even if they always find the search results after the first page useless.

  23. Entaprise Entertainment Says:

    I think there should be a limit to this endless scroll idea. I love long pages, not having to click to the next page, but there should be a cap. It’s freaking annoying to use a little scrollbar, being so sensitive. Therefore, I support Google’s preference option to list 100 search results. It’s much easier for me to find what I want if I have more options up front. Clicking to different pages of listings just discourages me.

  24. Pagination Patterns and Losing Time in Facebook - eri on the interweb Says:

    […] For a more thorough discussion on pagination and pagination patterns see http://justaddwater.dk/2008/01/03/usability-of-pagination-links/ […]

  25. Cubic zirconia Says:

    I agree to the reformulate #6. And that is also right users always focus on first results. But I doubt that the theory that people narrow their search until what they look for are in the top results. Actually the hypothesis are based on the premise that all user are search engine savvy and the serps always are the best possible results. I am afraid both are not sufficient enough. It is not so user-friendly way if treating users as robots. Googlebot can not replace human being when it comes to intuiton. Sometimes I search for somthing and use all keywords I could think of, but the top serps just did not show what I need. So I have to browse them page by page. I know this is crazy but I have no idea what else I can do at all.

  26. claude Says:

    What often annoys me in this context, is the limit how many products (or search engine results) will be displayed on one page.

    I clearly prefer one long page I can scroll through instead of using pagination. With on page I am able to search through the whole page for words I am lokking for, for example (text search). Furthermore I can visually scroll thorugh product lists and get an idea if there is something for me quickly.

    Best wishes,
    claude

  27. Konversionsbooster Teil 5: Die Paginierung | Conversion Optimierung, Konversionsrate verbessern - KonversionsKRAFT Says:

    […] Usability of Pagination Links – Jesper Rønn-Jensen Pagination Gallery: Examples And Good Practices – Smashing Magazine In search of the ultimate pagination – wolfslittlestore Infinite Scrolling Best Practices – UX Movement Über den Autor: Manuel Ressel ist Conversion Designer bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Folgen Sie ihm auf Twitter oder besuchen Sie seinen Blog Conversion Design. […]

  28. Frank-ly » Gevonden: veel resultaten Says:

    […] is dan wel handiger dan weer door die 159 resultaten scrollen… Hoe je je resultaten op een gebruiksvriendelijke manier pagineert, is weer een verhaal apart…Wat te kiezen?Uit bovenstaande blijkt dat er wel redenen […]

  29. Taj Moore Says:

    Do you have any recommendation or usability research around making the pagination left-, center-, or right-justified? Google, Yahoo, and Hulu all do it differently. Is one more usable than the other?