12.14
The purpose of search is to help people find what they’re looking for as quickly as possible. Search engines attempt to facilitate this by taking the user’s query and responding with results, placing what it thinks are the most relevant results first.
Unfortunately, pagination doesn’t always do the best job of guiding the user through the search results in the most beneficial manner. I’ve noticed three common problems.
Problem 1: The “Last” button
Time Out's pagination includes a link to the very last page of results.
If the first page of results is the engine’s best guess at what the user is interested in, the last page of results is inherently the engine’s worst guess. Which begs the question: why do you often see a link to the last page of results?
For the user to find what they’re looking for, it’s important to get highly relevant results in front of them. Encouraging users to look at irrelevant results is simply counter-productive. Avoid having a “last” link.
Problem 2: Pagination above results
Career Builder's search page has pagination above the results.
A second harmful practice is placing the pagination above the search results. Again, the purpose of search is to present the most relevant results first. It doesn’t make sense to encourage users to skip to page 2 before they’ve encountered all of page 1.
Problem 3: Next
If the first two problems are akin to sending the user on unnecessary detours, the third problem is like not giving the user a green light when we should.
Google, not surprisingly, got it right by giving their "next" button a prominent graphic and bold text.
Imagine you enter a query, scroll down the page as you look over the results, and reach the bottom of the page without finding what you’re looking for. What would you want to do next? Go to page 7? No, you’ll most likely want to go to the next page of results. So, why doesn’t the pagination always offer us a big, whopping “Next” button?
In Summary
TwigKit's default pagination.
All three of these side effects are the result of one illness: forgetting to optimize pagination for helping users move from highly relevant results to less relevant results in a proper progression.
For TwigKit, we also wanted to make it easy for people to get back to the earlier pages of more relevant results once they have navigated to a later page.
Tyler Tate
Tyler is a user experience designer at TwigKit. He has been designing websites and web applications for 9 years and is the creator of The 1KB CSS Grid. You can keep up with Tyler on Twitter.
Nice article, do you have some tracking set up? My best guess is that next get’s the most clicks, 2 will be second and previous will get the lowest amount of clicks. Would be interested how this turns out in reality
I haven’t done tracking myself, but you brought up an excellent point. This type of thing could be easily measured. In addition to your predictions, I would guess that pagination at the bottom of the page would receive more clicks than pagination at the top of the page, and that the link to the last page of results would get hardly any clicks. Good thought!
Pagination at the top of listings is just silly, worse still when its only at the top.
If you have been to Kanye West’s blog (yes I’m a fan), you will see the “next” link has been replaced by a “last” link?! Which I’ve mistakenly clicked more than once before. http://www.kanyeuniversecity.com/blog
One of my favourite examples of pagination (how geeky does that sound) is at http://minimalissimo.com/page/2/ I love the simplicity of it, yet it keeps all of the relevant functionality.
Those are two excellent examples of good v. bad pagination. Thanks Andy!
Tyler,
Great write up.. ! I cannot say how many times I’ve ranted (ok, more like a heckling-vent) when it comes to the pagination encounter on a day to day basis. For the life of me, I cannot see why ANYONE would not provide the ‘prev’ and ‘next’ links, and make them prominent while they’re at it. We’re not talking an ‘alpha’ bar where you may know which alphabetical letter you wish to review,.. so, the most common use of pagination is going to be ‘next’ or ‘prev’. If the user wants to find a specific page that’s more the job of the searching/filtering/sorting functionality of the app, and shouldn’t be put off on the pagination to handle.
All in all, I think you put it well when you stated,. “pagination …. helping users move from highly relevant results to less relevant results in a proper progression”.
It’s great to see a thoughtful write up on the main issues with how pagination is implemented.. now, we’ve just got to get those lazy coders/designers who think pagination is a search feature, over to this article :D – Great work !
** I know I tweeted you to let you know (and thanks for popping by the temp page to have a look),.. but our new ‘light-commerce’ engine is using your 1kb grid throughout and it’s almost ready for the lime light.. thanks again for the slick work on the CSS grid.. it’s really handy! **
just came across this post, also a nice attribution