Daniel Hoelbling-Inzko talks about programming

The paging antipattern

Posted by Daniel Hölbling on September 7, 2009

Wherever you look on the internet, everywhere you’ll see pagination. This is especially important in web shop scenarios where you don’t want to overwhelm your user.

Usually you just take these things for granted and use them to navigate around, until you discover a gem of bad design like this one on the German bookstore Thalia:


This is a 1:1 screenshot, no scaling from the original. And as usual: the one < will take you to the previous page, the << will take you to the very first page.

Now, let’s consider these options that are only 3 pixels apart from each other: First page, previous (thus page 4), page 1.
Let’s just assume that unless you are really careful with you mouse you’re looking at a 2/3 chance of finding yourself on page number 1 instead of 4!

Instead of trying to home in on that tiny next button I found myself using the numbers to get to the next page, totally ridiculous.

Upon getting frustrated by this particular eBook store I decided to take a look at the other major players and their pagination solutions.



I just measured a distance of over 40 pixels between the 3 and the Next button. And even on a search where with less than 3 pages they keep a distance of at least 20 pixels between Next and 3. Also important that Next is always last and Previous is first. No First and Last button anywhere to be found.



Again, hitboxes for Previous and Next are enormous while completely lacking First and Last.






Conclusion: Nobody uses these  Last and First any more. Get over it and leave them out! Why should anyone want to go to the last page of a listing that is probably already sorted by relevancy?

Instead use the space for huge Previous and Next buttons that are far away from any other navigational controls. At any rate, never ever use those <> Symbols alone as you means to navigate, always provide a big enough hitbox to avoid frustration.

Filed under internet
comments powered by Disqus

My Photography business


dynamic css for .NET