This article was written in 2013. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
Where should the Previous and Next links be placed?
Today I asked on Twitter where the links that link to the next and the previous article should be placed . They are often found on blogs. Should they be placed below the article but before the comments? Should they be placed below the comments but before the comment form? Or should they be placed below the form and be considered as a part of the extended footer, with all the navigation in it?
The semantically correct answer is the last one. The previous and the next links are a part of the site wide navigation. And the comments, including the comment form, are part of the article. So if we were building a website for the HTML5 outliner we would have to place these links below the form. But, most of the time we build blogs for people to read, and we use these links so people will read more. So, if we build a site for humans, is the footer really the right place for these links?
Most people on Twitter didn’t think so. The consensus was that these links can be made pretty small, so they won’t hide the comments. But a long list of comments, and a form, will definitely hide these links from your visitors. It turns our not everybody reads all comments. So, the most logical solution, from a human perspective, is to place these navigational links right below the article, but before the comments.
There are, of course, more options. You could leave out the comments entirely, which is probably a good idea on many sites. Then this whole question is irrelevant. You could place them before the article, which seems completely silly to me. Or, you could just leave them out completely. This last option sounds nice. I understand that these links can be very useful, but I hate designing them.
What should they look like? They’re not very useful if they just say next and previous, or older and newer. So I always end up showing the whole title. But titles can be very long. You could end up with two links that say: We need more artists on the web and Can the web stack be replaced?. And I find long links like these hard to design, especially on smaller screens. I haven’t seen the perfect solution yet. Have you?
Is there any REAL logic to a previous and next link? A pressing need to link to the previous article? What does ‘previous’ actually mean? The chronologically previous article, on a whole different subject. It makes more sense to seduce your visitor to visit all ‘related articles’ (under your article). But if you MUST place previous and next links, you should visually place these to the left and right of your article (after your article, in your HTML).
You write that semantically, they should be in the footer, eg after article and comments, but from a human perspective, it makes more sense if they are placed before the comments.
Both can be done at the same time, as the first would be a matter of mark-up (HTML) and the second a matter of appearance (stylesheet). Ideally.
Personally, if a user has a wide enough screen, I like this kind of links to be on a fixed position at either side of an article, somewhere at the top of the page. I was going to say ‘above the fold’, haha. This allows one to click through posts by reviewing the title and first few paragraphs and then clicking through or reading.
@Paul van Buuren: you’re right. In most cases a list of related articles makes more sense than these more or less random links.
@Hidde: thanks for your thoughtful comments. I agree with most of it, even though I find the remark about the position of these links too easy. Sure, if the window is wide enough it’s easy to find an ideal position. But designing for wide windows is not the challenge. Where would you place them on a smaller screen?
@Vasilis Liking to click/touch through articles, I would still put them somewhere at the top, so that one can easily go to the next article without scrolling/swiping to the bottom of the page.
As to what Paul van Buuren says: chronologically sorted posts may not have their subject in common, they often do have the author that wrote them in common (or in some cases the website that published them). On a blog where something thoughtful is published, I can imagine users may want to be inclined to read more thoughtful stuff from that same author or blog. Therefore I think we should make it easy for people to find more interesting stuff: preferably at the top, to allow scanning without the need for scrolling, but at the bottom could work too.
I personally really like the kind of next-previous links you see on a lot of photo websites. You know, the kind that appear when you hover on the left or right side of the image. Why can’t that be used in normal textual content or articles with images or even search results?
Next / Prev is part of the navigation, not of the content. Therefore it should be at the bottom of your content (e.g. your blogpost), not after the reactions, which are part of the content.
Hmm. looks like I am contradicting myself there. Not after the reactions, which are a subclass of content is what I meant.