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.

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