By John BoticaSmall pagination sucks. It is difficult to see, a pain to use, and can be frustrating to the user. Here are a few tips on making your pagination more usable and friendly.
1. Increase its size
If your pagination is tiny, like Blockbuster’s, it would be worthwhile to increase its size.
Tiny links, not obvious - hard to see and use - Blockbuster.com
Their pagination hides at the top and bottom of the page, not really styled to be obvious or stand out. The links are small, and they’re using their standard link style, underline for hover, which you really cannot see when your cursor is over the page number. Their hover state is not very obvious, and the links are hard to click. Upping the pagination text size from .75em to .85em is an improvement, and increasing the click-able area would help.
Not obvious and tiny - hard to use - Yelp.com
Tiny and hard to see. Item count instead of pages work due to small number of pages per item category - thinkgeek.com
2. Make the click-able area larger
A lot of pagination links are left to inherit the link style on the page, as in the case with Blockbuster. By writing some pagination specific CSS and increasing the click-able area of the link, you instantly improve the user experience. The pagination links are now easy to click, and the user does not get frustrated trying to hit your 5px wide page numbers. Here are some examples of well sized pagination:
Click-able areas larger, but no hover state. No response given to user- cssmania.com
Large click-able area - could use background color change too - smashingmagazine.com
3. Make it obvious
Style your pagination out so it is obvious that it is pagination. A nice border or background color assigned to the page numbers work well. flickr and delicious are good examples of usable and obvious pagination:
Large clickable area, obvious pagination, clear hover state - flickr.com
Large click-able areas, obvious in layout, good hover state - delicious.com
Small pagination that is un-styled just does not work. It is an important piece of your site and you do not want your users to get frustrated using it.
For further reading and inspiration:
- Pagination Gallery: Examples and Good Practices – Smashingmagazine.com
- Pagination: Best Practices for SEO & User Experience – SEOmoz.org
- 42 Pagination Design Inspiration – Komunitasweb.com
- Pagination Design Patterns – ui-patterns.com
- Reverse Pagination For SEO? – seroundtable.com
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=e945401c-a81d-46cb-899a-347aed8fce42)
Comments 5
Cool… certainly the more the clickable area the more better it looks.
[...] allen Regeln der Usability wurden die Archivseiten des Blogs um eine erweiterte Blätterfunktion expandiert. Jeweils am [...]
[...] bessere Shoptexte. Da hast’ n Schatten. Geld im Web verdienen, für die Einsteiger. Schick paginiert soll’s besser gehen. Der erste WordPress-Theme in 3D mit CSS3 umgesetzt. Zehn plus Fünf [...]
[...] 3 conseils pour la pagination des sites à la sauce Web2.0 [...]
Ich bin beeindruckt! Wirklich informative Blog-Post auf http://www.dtelepathy.com mein Freund. Ich wollte nur einen Kommentar und sagen, halten die Qualität der Arbeit.
Leave a Comment