Pagination Design

How would you design your pagination? Let’s say you have a search function on your website and the results could be over 100 pages. How do you let your users navigate between those pages?

Some examples and comments:

Google’s system is simple: first they list out 1-10, with “Previous” and “Next”. Let’s say you’re on page 1, “Next” will bring you to page 2, and the page listing now includes page 11 (so 1-11). Whatever page you’re on, Google lists out at most 10 previous pages and 9 next pages (so, let’s say you’re on page 20, it’ll show 10-29). This is straightforward - “next 10″ is not important here because it’s very unlikely you’ll want to skip 20 pages of your search results. Or will you? One thing though - when I’m on page 30, it’d be hard to go back to page 1. I think a “fast forward” button would be useful here. Still, I love the quirky graphic design here - the 20 “o”s with all of them yellow except for the current page which has a red “o”. Beautiful.

The above is Yahoo’s pagination. Hmmm… 10 at a time: it shows at most 5 previous pages, and however more pages after the current page that makes the total 10. This is easier on the eyes for you, compared with Google’s, which could have a total of 20 little links, but it also makes things a lot more convenient. For one, it’s a pain to go back more than 5 pages with Yahoo’s design. On a side note, Yahoo numbers each search result. I can see that being useful.

A9 is Amazon’s search service. I must admit that I haven’t used it enough to say anything about it. The thing is, they’re offering way too many features. But the bookmark and history features seem interesting. I’ll give it a shot… In any case, if you cannot come up with reasons to use A9, they will,

” Why Use A9.com? (Really worth reading…) “

“Really worth reading”… oh really…

So their pagination is a blend of Google and Yahoo’s. A total of maximum 11 page links - 5 previous, 5 next, and the very first page. I think it works well.

My problem is, and this applies to all the pagination shown here: say I’m on page 10, how would I get to page 30? Obviously I can go next, next, next. If I’m smarter, I’d click on the maximum number available (in A9’s case it’d be 15) and then from page 15, click on 20, then 25, then 30. So is there a point in putting a link that says “next ten results”? Like a fast forward? Simplicity is always good, but sometimes you sacrifice convenience for simplicity. However, you can argue that this pagination is simple enough that people will get it after using it once or twice. But really, has there ever been a case where pagination design drives you nuts?

Last but not least,

This, graphically speaking, it so much more pleasant than all the ones above. Another immediate big plus: all the previous ones’ page links are text links, so for the case of single digit numbers, the clickable area is small. In Flickr’s case, the numbers are encased in a square, and the entire square is clickable. The beauty is that those page links are text, but with stylesheet you get a bigger clickable area. The other obvious difference here is that with a finite, manageable set of results, they offer two links to the very last two pages of your result set. Other than that, it’s similar to the other pagination systems.

By the way, why does Amazon not use pagination for their search results?

Post a comment