Where should the Previous and Next links be
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.
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?