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 -

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 -

Thinkgeek Pagination

Tiny and hard to see. Item count instead of pages work due to small number of pages per item category -

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-

Smashing Magazine Pagination

Large click-able area - could use background color change too -

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 -

delicious Pagination

Large click-able areas, obvious in layout, good hover state -

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, where he delights in writing clean and consistent code while creating the best user experience. When not working John enjoys making things, anywhere from brewing beer to woodworking.

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 mein Freund. Ich wollte nur einen Kommentar und sagen, halten die Qualität der Arbeit.