Pagination Gallery

from keep & trend 2012/01/04 14:44

In most cases pagination is better than traditional “previous – next” navigation as it offers visitors a more quick and convenient navigation through the site. It’s not a must, but a useful nice-to-have-feature.

Let’s take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented.

 Good Practices Of Pagination Design(7 Aspects according to Faruk Ates)

1.Provide large clickable areas
2.Don’t use underlines
3.Identify the current page
4.Space out page links
5.Provide Previous and Next links
6.Use First and Last links (where applicable)
7.Put First and Last links on the outside

 Mistake #1: Navigation Options Are Invisible
Since pagination’s primary purpose is to serve as an improved navigation, it is supposed to make it clear for the visitors where they are, where they’ve already been and where they can go next. These three facts give users a complete understanding of how the system works and how the navigation should be used.

But most importantly, the navigation options should be visible. Hugg.com (http://www.hugg.com) doesn’t follow this guideline. The color of the links has a very low contrast with the white background. The hover-effect isn’t provided.

User image




 Mistake #2: Pagination Isn’t Intuitive
If you have to decide between a quite complex (but beautiful) pagination and a simple one with necessary functionality always prefer the simple solution. If users don’t understand the mechanism behind navigation they won’t be able to use it and therefore won’t use your web-site.

Helium.com (http://www.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.

User image



Unintuitive pagination design on Helium.com (http://www.helium.com)

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

User image



Our favourite example: Helium.com (http://www.helium.com)

User image



Not spaced out page links are harder to scan and to navigate through. Make-Believe.org (http://www.make-believe.org/) as an example. The design is unintuitive.


 Creative Solutions Can Be User-Friendly
The more frequently a design element is used, the harder it is for designers to introduce some creative approaches without risking to make the design less intuitive. Consequently, pagination designs have rather a variety of different patterns — revolutionary approaches are used very rarely.

However, creative approaches can be user-friendly. E.g. Dirty.ru (http://www.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.

User image





A slider on Dirty.ru (http://www.dirty.ru)

Erweiterungen.de (http://www.erweiterungen.de), the German version of the official Firefox extensions web-site, provides more navigation options once the visitor clicks on the “…”-button.

User image









Further navigation options are displayed once the “…”-button is clicked. Erweiterungen.de (http://www.erweiterungen.de).


 Gallery
Although “standard” pagination — linked blue numbers following each other — is very common for most web interfaces, designers tend to experiment with colors, forms, backgrounds and shapes.

The pagination doesn’t need to look nice aiming to captivate users’ attention; as a part of site navigation it offers users an important functionality and as such has to be used effectively. Still, visual clues can be helpful. In most designs blue and grey colors dominate — colors traditionally used by services.


Simple Enumeration

User image




User image




User image




User image




User image






User image





User image





User image




User image






 Colors and Shapes In Use
Often designers use colors to highlight the current page and separate it from the other pages. The numbers of the pages are also given a shape: a rectangle, a circle or a button. The current page is usually not linked.

User image




User image






User image




User image





User image





User image





User image




User image






User image






User image






User image






User image






User image





User image





User image







User image






User image





User image





User image





User image





User image






User image





User image






User image





User image






User image






User image






User image





User image






User image






User image






User image





User image






User image





User image





User image





User image





User image





User image





User image





User image






 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.

User image








User image







 Unusual Solutions
User image







User image

2012/01/04 14:44 2012/01/04 14:44
Tag // ,

Trackback Address :: http://www.cksay.com/tc/trackback/282

댓글을 달아 주세요

[Login][OpenID?]
You have to log in with and OpenID to leave a comment.