Good Practices Of Pagination Design
- Provide large clickable areas
- Don’t use underlines
- Identify the current page
- Space out page links
- Provide Previous and Next links
- Use First and Last links (where applicable)
- Put First and Last links on the outside
Bad Practices Of Pagination Design
Navigation options are invisible
The color of the links on Hugg.com has a very low contrast with the white background. The hover-effect isn’t provided.
Pagination isn’t intuitive
Helium.com is a perfect example for this mistake. Take a look at the screenshot below: what do the arrows stand for? For the page you’ve already visited or for the page you are currently on? And why does the link to the second page have a white background color? Why do the arrows have different colors? This is unintuitive.
Unintuitive designs result from the lack of structure, hierarchy and well thought-out design decisions. “Blank” pagination is as unintuitive as overcrowded design solution.
Not spaced out page links are harder to scan and to navigate through. Make-Believe.org as an example. The design is unintuitive.
Creative Solutions Can Be User-Friendly
Slider-based Pagination Menu
Dirty.ru uses a slider-based pagination menu; users can drag it to get more available options, that means links to the older pages of the site.
Further Navigation Options
Erweiterungen.de, the German version of the official Firefox extensions web-site, provides more navigation options once the visitor clicks on the “…”-button.
Simple Enumeration
Colors and Shapes In Use
Pagination with Manual Page Input
In some cases users can provide the number of the page they’d like to see manually, via the input-element. This is common for paginations with the limited number of options — e.g. in these designs you can’t jump to the last page if you’d like to.