User-friendly Pagination

Pagination feature is often implemented when there is a need to browse large amounts of data lists. This feature saves a lot of bandwidth by giving user the option to download data only if he is interested in whats next.

But most of the time this feature is implemented very badly. Somewhat like this:

The problem with this implementation are

• Reachability :-
  The font is small and the links are so packed together, user feels difficulty in clicking the page number that he is interested in.
• Feedback :-
  It doesn’t give any feedback on which page the user is currently viewing. And there is no mouse hover feedback.
• Comprehensibility :-
  User should easily understand which are previous and next links but they look more like a decoration. Considering that previous and next links are the most used links on a pagination links this is a major issue.

These problems are fixed in the following example

Advantages

• The links are easily reachable. Hover effect is supported which tells user on top of which link the mouse is hovering.
• It gives proper feedback on which page user is currently viewing.
• User can easily understand which are previous and next links. And these links gets disabled accordingly if there are no previous and next pages.

This implementation brings aesthetic to webpage and can be implemented with just HTML and CSS. You can find a demo and implementation at “CSS Pagination Links”.

-- by Santosh on January 25th, 2008