2009
Sep
06

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.

Hugg

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.

Helium

Unintuitive designs result from the lack of structure, hierarchy and well thought-out design decisions. “Blank” pagination is as unintuitive as overcrowded design solution.

Helium

Not spaced out page links are harder to scan and to navigate through. Make-Believe.org as an example. The design is unintuitive.

Make Believe

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.

DirtyRu

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.

Erweiterungen

Simple Enumeration

Facebook

Business Week

Slanted

Computerlove

Stylegala

EveryZing, Inc.

Subcide

Colors and Shapes In Use

Fashion Style Blog

Apple Store

BilDblog

nnmru

SitePoint

Amazon

Maple

Chow

iTalk News

Empressr

Flickr

TTiqq

eBizMBA

UX Magazine

Digg

Wykop

Wikio

Become

meneame

MSDN

TutorialsGarden

Pixsy

Drupal

ulf-theis

Quintura

ProgrammableWeb

News Garbage

Dr. Web Magazin

Top Links

Blogmarks

ulf-theis

Design Snack

Sproose

Mister Wong

Social

CodeSnipers

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.

New Yorker

Veer

Talk Digger

Related Posts


回應 (Leave a comment)