The whys, hows and whens of pagination

Why

In the most basic form, pagination is best illustrated by books: there’s a lot of content, and just expanding the sheet would too cumbersome. And then we discovered that by dividing the content into pages, and stacking them we’d get a lot of content in a handy way, and also making it pretty easy to navigate. Especially by prepending or appending a table-of-contents (ToC).

Web-pagination came, I believe, in the days of modems as a solution to keep the amount of data to download smaller, and then letting it up to the user to decide which parts of the paginated content (s)he’d check – although that’s a pretty basic assumption – anyhow, that’s not of the scope of this post.

The problem

What I see all too often is something like this:

Typical example of navigation of paginated content

Example of common pagination

The problem with this approach, even though it’s the most common one, is that the links to the different pages gives no indication of what you’ll find there. Yes, if you’ve performed a search, then you’ll know that you’ll find even more results, and as it probably is sorted by relevance you know that the entries will be less and less relevant (probably) the further you go. But what then if the decrease of relevance between each entry isn’t linear? Then entries in page 10 won’t no longer be half as relevant as those in page 5, etc.

Typical example of navigation of paginated content

Another example of common pagination - guess from where!

In books, pagination is practical mainly in cooperation with the ToC, and also for keeping track of relevant pages – like which page something specific is written, or the current position of your progress. On the web we usually just throw in pages – and skipping the ToC – leaving it up to the user to manually search.

This is again no problem for those who are reading the entries from start to end – but rather for those who are looking for something specific.

Alternatives – and when and how to use pagination

Dynamic filters

Example of filters on search-result

Screenshot from Amazon.com's filters - click for full image

Filters are a great way to allowing the user to skip those entries he assumes is unrelevant to the current search. Webshops, catalogs and similar sites are now becoming pretty good at using this approach – just take a look at Amazon.com’s approach (image). Here I’ve searched for blues-DVD’s, and is presented with relevant filters depending on the current result. I can ie choose to just see entries from 1960 – 1969, and skip out all those who aren’t english as well. This reduces it down to sub-13 from 914 – great! Now I won’t need to browse among 76 pages anymore.

To integrate a good implementation of this you’ll have to find out what attributes of the entries are reasonably to filter by (remember to take into account the demgraphics of the users going to use this), and make sure your solution present this in a good way.

It will usually be reasonable to allow multiple filters (I want english entries from the 1960’s), but in some situations singe-filter-support will suffice.

Other sites using this technique: finn.no (no), ebay.com, telefonkatalogen.no (no)

Table of contents

This is probably mostly relevant for web-books, but elements of this can also be integrated into other solutions and situations. It will usually be used instead of dynamic filters where the content is linearly continuated in a given order – instead of some arbitrary sorting.

Web-books, online documentation etc is natural places where this is applicable.

Informative links

Screenshot from my framework which takes care of descriptive links depending field and sort-ordering - with norwegian i18n. The arrow (not included in screenshot) is pointing at "3" and the UA is accordingly displaying the information.

Screenshot from my framework which takes care of descriptive links depending field and sort-ordering – with Norwegian i18n.There will probably always be some situations where you have to use pagination, and often will dynamic-filtering be a little overkill. The solution here can be to add information to the title-attribute of the link which says something about what you’ll find there. For example, if I have a result-set sorted by dates ascending, then a link to page might have the following pattern for it’s title-attribute: “Articles from <fromdate> to <todate>”. This way you’ll give the user an indication of what to find at that page, without having to check first.

Related reading

Feedback

This is how I feel about the issue of organising larger amounts of data, and making it easy for users to find whatever is relevant. I’m sure there is situations I havent’ covered here, and would like your comments on how this can be improved to give our users a best possible user-experience – and with that giving our clients a more valuable website.

  • Is the title-attribute of anchors the best / right way to display information for informative links?
  • Are there other ways then filters, ToC’a and informative links that can solve the problems?
  • What other places can ToC’s be a good alternative?

Your feedback is very much appreciated.

Be Sociable, Share!

3 Comments

  1. traxxas says:

    While this is better suited for the web_design reddit, the author is right. I’m using dynamic filters for my site and they are great for sorting through the masses of products we sell. The only downside is the programming for them was and is a pain to write and maintain.

  2. modden says:

    Regarding category: I’ve now posted it over at the web_design reddit, should I delete this one?

    Yes, that’s the main obstacle with dynamic filters – but there are of course ways to simplify this if it has been taken into account from early stages of development. It’s especially a pain to implement as a last minute thought.

  3. uint32 says:

    Upvoted. What the author is beginning to realise is that is that pagination is the lowest form of record navigation, essentially analogous to a full table scan in database terms. That is to say, pagination is what you do if you can’t think of a better access path. It works for search results because you only ever want the top N results. It rarely works anywhere else because you want a more efficient access path.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>