Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Pagination Gallery: Examples And Good Practices

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) Link

  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
  • Style sheets freely available for free download: Some Styles For Your Pagination1.
  • If your weblog runs upon WordPress you can use WP-PageNavi2 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 Link

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.

Mistake #2: Pagination Isn’t Intuitive Link

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.com753 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 Pagination4
Unintuitive pagination design on Helium.com753

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 Pagination6
Our favourite example: Helium.com753
Screenshot Pagination8
Not spaced out page links are harder to scan and to navigate through. Make-Believe.org9 as an example. The design is unintuitive.

Creative Solutions Can Be User-Friendly Link

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.ru1210 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 Pagination11
A slider on Dirty.ru1210

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

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

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 Link

Facebook16
Screenshot Pagination
Businessweek17
Slanted18
Cpluv19
Screenshot Pagination
Overture
Misal20

Colors and Shapes In Use Link

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.

StylishLabs21
Apple Store22
Bildblog23
Screenshot Pagination24
Sitepoint25
Amazon26
Maple
Screenshot Pagination27

Screenshot Pagination

Screenshot Pagination28
Flickr29
Screenshot Pagination30
Screenshot Pagination31
Screenshot Pagination32
UXMag33
Screenshot Pagination34
Screenshot Pagination35
Screenshot Pagination36
Screenshot Pagination37
Screenshot Pagination38
Screenshot Pagination39
Screenshot Pagination40
Screenshot Pagination41
Screenshot Pagination42
Screenshot Pagination43
Screenshot Pagination44
Screenshot Pagination45

Screenshot Pagination46
Screenshot Pagination47
Screenshot Pagination48
Screenshot Pagination49
Screenshot Pagination50
Designshack51
Screenshot Pagination52

Screenshot Pagination

Screenshot Pagination53
Screenshot Pagination54
Screenshot Pagination55

Pagination With Manual Page Input Link

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 Pagination56
Veer57

Unusual Solutions Link

Screenshot Pagination58
Screenshot Pagination59

Footnotes Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  1. 1
  2. 2

    This article is great! I’m doing a step-by-step system for my own site so it really came in handy, I was using a basic links 1,2,3 etc but now I might add some CSS to them and make them more user friendly!

    great article!

    3
  3. 4

    YES! The UE is most important.

    0
  4. 5

    Great timing. I’m in the middle of a final redesign before launching and adding pagination was one of my final tasks. Does anyone know how to code pagination into a wordpress template? So far, I’ve only come across this wordpress plugin.

    -1
  5. 6

    Guys, you’re outstanding! The magazine is a weekly blast of superlative, effective and useful articles. This one is perfect. And kudos to you right because is about a so important but too often underrated argument. Pagination is the core of this so overloaded world of informations and documents and answers that is the web today.

    -2
  6. 7

    The simplest is always the best. bold better than bord..er !

    Nice exhaustive gallery

    0
  7. 8

    I think facebook has some of the best pagination styles. Super easy to read and understand how to use it.

    -1
  8. 9

    Wow..excellent pagination

    1
  9. 10

    That’s great! I must add it on my site SingleParentLoving.com

    0
  10. 11

    Sure I’m biased, but I really like my pagintation design for Masterfile.com. I’ve never seen anything like it on the web, and I even blogged about it a few months ago. Compact and versatile it is. Funny how you have Veer listed.

    0
    • 12

      @Ryan. you’re right. That’s a pretty nice option. I definitely think ten or more links just to go from page to page is way too cumbersome. Your design balances the real-estate efficiencies found in some of the jump to entry field designs with the simplicity of clicking on a number. I’m sure others will feel that a single click to page 2 is better than the two required in your design. Also there is the added movement of scrolling the drop down. …At any rate, kudos! I like it.

      If anyone knows of an actual user study comparing, please post a link to results.
      -jackie

      -1
  11. 13

    I was just putting together a pattern library entry on pagination tools, this will be a great help. Thanks!

    -1
  12. 14

    Great article, simple and easy to use is the best option for Paginations. But that doesn’t mean they have to be ugly.

    1
  13. 15

    Thanx a lot for that wonderful list!

    0
  14. 16

    1..2..3..4..5 pagination is just not intuitive to begin with. Navigation is about context, and there’s no way to know what “3” is, at-a-glance.

    Keep the prev/next/first/last if you have to, but paginate, predominantly, based on something less-arbitrary than page number, like letter…

    2
  15. 17

    Great post! You guys have inspired me to take another look at Paging possibilities.

    Another method of paging that I like is the simple dropdown. Tom’s Hardware, Anandtech and most other tech sites use this effectively.

    -1
  16. 18

    It never crossed my mind how important is the pagination thing!
    Thanks for the great article

    1
  17. 19

    80% of the pagination examples are the same… =/

    1
  18. 20

    Thank you for this good source of ideas. It’s always a lot of detail work but the navigation is so important for any website!

    0
  19. 21

    Thanks a lot for this great article.

    0
  20. 22

    I appreciate the range of themes that are shown and discussed on this blog. Pagination is so important and really worth to be thought about.

    0

↑ Back to top