May 18 2010

Small Pagination Sucks!

Small 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.

Blockbuster Pagination

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.

Yelp Pagination

Not obvious and tiny - hard to use - Yelp.com

Thinkgeek Pagination

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:

CSS Mania Pagination

Click-able areas larger, but no hover state. No response given to user- cssmania.com

Smashing Magazine Pagination

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:

flickr Pagination

Large clickable area, obvious pagination, clear hover state - flickr.com

delicious Pagination

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:

Reblog this post [with Zemanta]

About the Author:

John is a web developer at digital-telepathy. He graduated with a Bachelor of Science degree in Media Arts with an emphasis in Web Design from Platt College of Graphic Design, San Diego and graduated with honors at the top of his class. During his education he interned at digital-telepathy as a developer/support specialist, which then lead to a full-time position upon graduation.On a day to day basis he is always learning and growing in his knowledge of the web, which is a must! When not working John enjoys brewing beer, playing games, baking bread, and most of all spending time with his wife Amy and daughter Eliana.Find him on Google+

Leave a Response

2 Responses

  1. May 19 2010
    Lakeside Techies

    Cool… certainly the more the clickable area the more better it looks.

  2. Pingback: WordPress: Pagebar zum Blättern der Seiten ohne Plugins realisieren › Seitenblättern, Pagebar, Paging, Pagination, Pages › Playground

  3. Pingback: Webnews #11: HTML5, CSS3, I/O, SEO & Eulen | Andi Licious' Blogosphäre

  4. Pingback: L’actualité de la semaine sur Twitter en 25 liens (#3) | Les 7 pêches et Capito

  5. Dec 06 2011
    Kaufen Anabolika

    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.