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: , , , , , , ,

12 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. Digital Nomad | links for 2008-01-04 Says:

    […] justaddwater.dk | Usability of Pagination Links […]

  6. 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?

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

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

  8. Joe Says:

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

  9. 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.

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

    […] Usability of Pagination Links […]

  11. gmlk Says:

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

  12. 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.

Leave a Reply