Effective and Appropriate Pagination – a showcase

Pagination is the system by which the information on a newspaper, bookpage, manuscript, or otherwise handwritten, printed or displayed document is laid out.  In a strict sense of the word, it can mean the consecutive numbering to indicate the proper order of the pages, which was rarely found in documents pre-dating 1500, and only became common practice circa 1550, when it replaced foliation, which numbered only the front sides of folios. Pagination can also refer to the process of organizing information on web pages. For instance, threads on a bulletin board might be paginated such that 50 appear on each page. wikipedia

Pagination can be a minefield for a web designer.  Decisions need to be made whether pagination is actually needed or not; and if it is then whether to use numbers, or dates, or any other quantitative or sequential measure.  Once you've ironed out the details of exactly whats needed you then need to make it look good, flow with the sight and ultimately provide a functional navigation tool for your users.  Sounds easy huh?

Well it's not easy, and if you see an effective example of web-site pagination let me know, let everyone know, because its something that's too often executed badly.  To help you out a little I'm going to show you some examples and explain briefly what makes them good or bad.

.

Schuh - www.schuhstore.co.uk

Schuh's top page Pagination

Schuh's bottom page navigation

At first glance Schuh's pagination is very simple.  Simple graphics, simple controls, it all makes sense.  This is the case for the top of the page, enabling the users to skip right through without any scrolling, which is good.  The bottom pagination however is a different story ... but don't let all the numbers intimidate you, as I feel this actually works quite well; giving the user the ultimate browsing freedom without input or pointless clicking through untill the number you want is made available.  However, and this is a big however, the problem with this is how do you know what page to navigate to?  Assuming you've sorted the shoes by price, what does the number '12' represent?  If there are a lot of cheap shoes this could be £10, or if the opposite is true it could be a collection of shoes worth £100 ... no one really knows.  I hear what you're saying, "But what if I saw a pair of shoes I liked and told a friend to check out page 24? That's useful right?" - well it would be, if they never updated their site again.  The thing with pagination is that it rarely relates to permalinks, but to a database.  This means that nothing is static and pagination can't, and shouldn't be used as a perminant source of navigation.  These arbitrary numbers actually mean nothing.  Although I like the pagination system, and they did get it half right - the uselessness of the numbers is where this design falls.  Didn't I say it'd be tough?

HMV - www.hmv.com

HMV Pagination

Aaah, the satisfaction of finding a truly useful pagination system, it's unrivaled!  HMV's site, although very cluttered and not something I would be proud of designing, does have one redeeming feature, it's database navigation.  Here I'm presented by an array of sorting methods and something truly useful, the ability to sort by alphabet.  This is perfect; paginating via price wouldn't be useful on a site like HMV's, as most of their CD's will be a similar price, and you can select genres easily enough on the left menu.  They still have the numbering system, as within each letter you will still have large amounts of content, but this is completely excusable, infact its kind of essential.

.

Google - www.google.com

Google Pagination

Now here's an example we've all seen, Google.  Now this is a perfect situation where numbers serve as an appropriate content and page organisational tool, as there are no obvious, defining characteristics that search results can be paginated by.  The pages are clear and the interface obvious and intuitive.  They've even had some fun with the design and worked the logo into the paging system; so aesthetically have a think about not only how user friendly your pagination will be, but also if there are any interesting ways to present the system to your users.

.

Spreadshirt - www.spreadshirt.com

Spreadshirt Pagination

This last example isn't anything groundbreaking, but it is a very nice execution of pagination.  The Spreadshirt web site has a great, up-to-the-minute design anyway, and this paging system ties in nicely; its simple, intuitive and attractive.  If it had of been my design I would have probably put more emphasis on the next and previous buttons, as I feel these would be used more than the direct number linking, but maybe that's just me.

.

The Conclusion

So in an ideal world pagination would directly relate to the content being paginated.  People have become far too used to page numbers and have forgotten the purpose of pagination; to display large amounts of data in a digestible and easy to navigate way.  Using numbers to mark the pages is as good as pointless, they might as well be capital cities, or sandwich varieties - I don't even know why they bother to put them in order, why not backwards, or just even numbers?  Ok maybe that's a little unfare, after all in some cases numbers really are the most logical choice, as seen in some of the above examples.

To all web designers out their facing a pagination challenge, please use a relevant system to order your data, whether it be a list of dates (in the form of a year, a month, or a day - whatever is appropriate), Order ID's or price ranges, it doesn't matter, just keep it relevant.

Thanks for reading and please remember to rate the article, especially if you enjoyed it or found it useful.  Also feel free to leave some comments in the form of feedback, or as an addition to this article.

The author - Nathan Hornby

Nathan Hornby is a professional UX designer living and working in London, UK.