Pagination Gallery: Examples And Good Practices

Advertisement

Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways.

In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. And there are situations when pagination is also necessary for weblogs. Additional navigation can simplify the access to some site pages — e.g. make it easier for users to browse through the archives of the site.

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
  • An ultimate article about pagination, Pagination 1011, has already been written by Faruk Ates.
  • Style sheets freely available for free download: Some Styles For Your Pagination2.
  • If your weblog runs upon WordPress you can use WP-PageNavi3 plug-in to generate pagination “on the fly”. It’s easy to install, however, requires some changes in the source code of your WordPress theme.

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.com64 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.

Screenshot Pagination5
The color of the links on Hugg.com64 has a very low contrast with the white background. The hover-effect isn’t provided.

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.com1197 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.

Screenshot Pagination8
Unintuitive pagination design on Helium.com1197

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

Screenshot Pagination10
Our favourite example: Helium.com1197
Screenshot Pagination12
Not spaced out page links are harder to scan and to navigate through. Make-Believe.org13 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.ru1614 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.

Screenshot Pagination15
A slider on Dirty.ru1614

Erweiterungen.de1917, the German version of the official Firefox extensions web-site, provides more navigation options once the visitor clicks on the “…”-button.

Screenshot Pagination18
Further navigation options are displayed once the “…”-button is clicked. Erweiterungen.de1917.

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

Facebook20
Screenshot Pagination21
Businessweek22
Slanted23
Cpluv24
Stylegala25
Screenshot Pagination26
Overture27
Misal28

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.

StylishLabs29
Apple Store30
Bildblog31
Screenshot Pagination32
Sitepoint33
Amazon34
Maple35
Screenshot Pagination36

Screenshot Pagination

Screenshot Pagination37
Flickr38
Screenshot Pagination39
Screenshot Pagination40
Screenshot Pagination41
UXMag42
Screenshot Pagination43
Screenshot Pagination44
Screenshot Pagination45
Screenshot Pagination46
Screenshot Pagination47
Screenshot Pagination48
Screenshot Pagination49
Screenshot Pagination50
Screenshot Pagination51
Screenshot Pagination52
Screenshot Pagination53
Screenshot Pagination54

Screenshot Pagination55
Screenshot Pagination56
Screenshot Pagination57
Screenshot Pagination58
Screenshot Pagination59
Designshack60
Screenshot Pagination61
Screenshot Pagination62

Screenshot Pagination63

Screenshot Pagination

Screenshot Pagination64
Screenshot Pagination65
Screenshot Pagination66

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.

Screenshot Pagination67
Veer68
Screenshot Pagination69

Unusual Solutions

Screenshot Pagination70
Screenshot Pagination71

Footnotes

  1. 1 http://kurafire.net/log/archive/2007/06/22/pagination-101
  2. 2 http://www.mis-algoritmos.com/2007/03/16/some-styles-for-your-pagination/
  3. 3 http://lesterchan.net/wordpress/readme/wp-pagenavi.html
  4. 4 http://www.hugg.com
  5. 5 http://hugg.com/
  6. 6 http://www.hugg.com
  7. 7 http://www.helium.com
  8. 8 http://www.helium.com
  9. 9 http://www.helium.com
  10. 10 http://www.helium.com
  11. 11 http://www.helium.com
  12. 12 http://www.make-believe.org/
  13. 13 http://www.make-believe.org/
  14. 14 http://www.dirty.ru
  15. 15 http://www.dirty.ru
  16. 16 http://www.dirty.ru
  17. 17 http://www.erweiterungen.de
  18. 18 http://www.erweiterungen.de
  19. 19 http://www.erweiterungen.de
  20. 20 http://www.facebook.com
  21. 21 http://www.iht.com/
  22. 22 http://www.businessweek.com
  23. 23 http://www.slanted.de
  24. 24 http://www.cpluv.com
  25. 25 http://www.stylegala.com
  26. 26 http://www.everyzing.com/
  27. 27 http://www.overture21.com
  28. 28 http://www.subcide.com/tutorials/csslayout/
  29. 29 http://stylishlabs.com/
  30. 30 http://store.apple.com
  31. 31 http://www.bildblog.de
  32. 32 http://www.nnm.ru
  33. 33 http://www.sitepoint.com
  34. 34 http://www.amazon.com
  35. 35 http://www.maple.nu
  36. 36 http://www.chow.com
  37. 37 http://www.empressr.com/
  38. 38 http://www.flickr.com
  39. 39 http://www.ttiqq.com
  40. 40 http://www.crankk.com
  41. 41 http://www.ebizmba.com
  42. 42 http://www.uxmag.com
  43. 43 http://www.digg.com/
  44. 44 http://www.wykop.pl
  45. 45 http://www.wikio.com
  46. 46 http://www.become.com/
  47. 47 http://www.meneame.net
  48. 48 http://msdn2.microsoft.com
  49. 49 http://www.tutorialsgarden.com
  50. 50 http://www.pixsy.com
  51. 51 http://drupal.org/forum/
  52. 52 http://www.ulf-theis.de
  53. 53 http://www.quintura.com/
  54. 54 http://www.programmableweb.com
  55. 55 http://www.newsgarbage.com
  56. 56 http://www.drweb.de/weblog/weblog/
  57. 57 http://www.toplinks.gr/
  58. 58 http://www.blogmarks.net/
  59. 59 http://www.ulf-theis.de
  60. 60 http://www.designsnack.com/?page=browse&asc_desc=desc&site_level=approved&order_by=approved_id&category=all&rows=40
  61. 61 http://www.listible.com
  62. 62 http://www.sproose.com
  63. 63 http://www.mister-wong.com
  64. 64 http://www.gizmodo.de
  65. 65 http://justice.anglican.org.nz/
  66. 66 http://codesnipers.com/
  67. 67 http://www.newyorker.com
  68. 68 http://www.veer.com
  69. 69 http://www.talkdigger.com
  70. 70 http://www.metacafe.com
  71. 71 http://blogs.icerocket.com

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

Advertisement
  1. 1

    I’m using Joomla. All these styles work very well on pagination of my articles in categories view, but not on my single articles view… Have you got an idea of my problem ? Regards.

    2
  2. 102

    In truth well-off content and exceptionally constructive information. I got it my resolution from over here. I exceedingly propose his/her moving parts with the constructive edifying information. Thanks a lot………..

    1

↑ Back to top