Having read Duncan’s post about Information Architecture, I thought I would write a short follow-up about an important means of navigation and IA: the paging navigator.
Providing a well thought out paging navigator can immensely increase the value of your website for both search engines and users. What follows is a selection of different popular paging navigators and a short evaluation.
1. Show all links
As far as search engines are concerned, the best way to go is to show all links to pages so that the bot can easily access the content of each page by digging no further than one level. A nice example is deezer.com’s artist browser.
This approach, however, lacks usability if the paging navigator contains a lot of pages. For example, on a screen with the (still) standard resolution of 1024×768, the paging navigation of the letter ‘T’ consumes more than 50% of the screen, which would be unacceptable if the page wasn’t built specifically for search engines 😉
2. Show adjacent links only
To avoid the bad user experience mentioned before, a lot of sites show only the current, the first, the last and some adjacent pages. A good example is digg.com‘s paging navigator.
That’s pretty good if your users tend to read page by page and skip only one or two pages at once. It’s bad, however, if your list is ordered alphabetically and contains a huge amount of items. A user is then unable to skip, say, ten pages at once. An example of that don’t make me click behaviour is the following. Just image you’re looking for “Ashcroft, Richard” – you’ll end up clicking at least 7 times, which would be level 8 if you need an extra click from the homepage to the browsing page.
If you have a lot of terms arranged alphabetically, like the deezer.com’s artist browser mentioned before, it’s best to provide a paging navigator that is based on letters rather than numbers and to provide a sub-navigation. A good example is gemm.com‘s browser:
As far as SEO is concerned, this approach doesn’t flatten the website’s hierarchy and thus makes it less crawlable.
3. Combine 1 & 2
One of the best paging navigation I’ve seen in recent months is the one on erweiterungen.de. They combine the two approaches by showing some pages on demand:
The best thing about this is that they do this by using javascript only, so a bot sees the following:
4. Automatic paging
The geekiest approach to implement a paging navigator is to just load the content as you scroll down, just as dzone.com does it:
Search engines, of course, just crawl the first items shown. The same applies for the minority of users browsing without javascript. There, an additional pager for non-javascript users would be appropriate.
5. [slightly off-topic] The “show results per page” option
Some websites provide the option to manually select how many results you wish to see on one page. It’s already a some kind of standard that you use a dropdown choice for that, just as Google Analytics does it:
There are other websites that use links or a textfield for that. If you use links you should be aware of the following:
- Nofollow these links – otherwise, the bot might get confused and index pages you don’t want to be indexed (e.g., pages with just one item on it)
- Make sure your users know what they’re about to get by just seeing the link – e.g., use an anchor text like “Show 2 results per page” and not just “2”
- Also make sure that it doesn’t look like a paging navigator. This sounds logical, but …
… look at the following example, taken from the ‘Top Ranked Members‘ page of SEOmoz, and tell me what you would click in order to get to the second page:
I always click on the ‘2’ and always get surprised seeing just Rand and Rebecca instead of the next 100. It’s not that I don’t like seeing them, I just didn’t expect them there 😉
6. Conclusion
Be careful how you design and implement paging navigators on your websites. Choosing the wrong type can easily result in upsetting your users and search engines. If you find yourself asking “How should I make a pager with that huge amount of pages?”, reconsider your information architecture and divide your items into categories and/or tag them and use faceted browsing. And – of course – provide a search box.
