Splitting content up into pages is pretty common on the web – you might see it in articles, comments, search results, or other lists of data. Want to use pagination? Let’s take a look at the options available to you.
Option one: links to new page
Having separate web pages for each page of content is original flavour.
- Pros: Gives you N pageviews instead on one (if you’re worried about that metric), works on non-JS browsers
- Cons: Slow, as a whole new pageload is required
Here’s an example from Tom’s Hardware. This shows how many pages exist, and also what’s on each (so you can just skip to the conclusions page, for example.)
Option two: one page, AJAX changes the view
Here, all of the content is loaded in the initial pageview, but the pagination buttons switch what’s displayed to the user.
- Pros: Faster than a new pageview
- Cons: More complex to code (if you’re rolling your own)
Here’s an example from YouTube, but you’ll also find this all over the web on most large sites. Start watching the video, and click the page numbers at the bottom to get more comments. You don’t get another pageload – not only would that be slow, it would interrupt the 80s goodness you’re hearing.
When designing these, there’s a problem. If your list of stuff is kinda short – great. But if you have a long list, you scroll down to the bottom, click the page 2 button … and you’re at the bottom of the second page, not the top. To put it another way, you’re reading item 1, item 2 … item 10, then click Page 2, and instead of looking at item 11, you’re looking at item 20.
There are some solutions to this – Disqus, which powers sites like Engadget, collapses the whole comments section and re-expands it so you’re looking at the top. Steam does some batshit-crazy scrolling of the page and list to get you back to the top.
Option three: Don’t use pagination
If you’re feeling bold, you can just let the whole page load with every list item.
- Pros: Easy to code, easy to understand
- Cons: Unworkably large pageloads for very long lists (e.g. user generated comments)
A hybrid solution is using a MORE link that appends the next page to the current one. The nice part is that the list now goes from item 1 to item 10, then item 11 to item 20, and so on – the list order is easy to interpret.
- Pros: Easy to understand
- Cons: Harder to create references to data (e.g. item X is on page N is now an invalid reference), your list can look weirdly long compared to the rest of the page
You can see examples of this on Quora and other sites.
Which one should I use?
First – if you don’t need pagination, don’t use it. Nothing is as easy as having the whole page in front of you. Consider what your pageload times will be without it, both on desktop and mobile. If it’s too heavy – either right now, or in the future when a thousand people have created comments – consider the hybrid solution. Can you append items to the current list? Remember that from the user’s point of view, they are reading down a page of text – make it as easy as possible for them to continue that reading.
