Many people -- even seasoned Web designers -- don't know about <link rel="prev"... /> and <link rel="next"... />, which are two lines of HTML code you can put on any Web page in order to give your users easy navigational cues to the "previous" and "next" pages on your site.
With those two pieces of code in a page, modern browsers (such as Mozilla, or Netscape 6 and up, but not Internet Explorer) will automatically provide a way for users to navigate to the previous or next page. In Mozilla and new versions of Netscape, for example, there's something called the Site Navigation Bar, which is a GUI for site navigation. (Turn on the feature by going to the "View" menu, then "Show/Hide," then "Site Navigation Bar," then "Show Always". When you do that, you'll get a small horizontal bar with buttons that include "Previous" and "Next.")
Doing this offers an obvious benefit: a supplemental, consistent way of navigating your site. Plus, it makes your site more accessible. Those two simple lines of code can be a great benefit to users of alternate browsers. See Dive Into Accessibility for more.
So why do I bring this up? Two reasons.
One, I've added this functionality to Holovaty.com.
- From any permalink page, you can access the previous and next blog entry through the Site Navigation Bar.
- From any day archive page, you can access the previous and next day's worth of entries.
- From any month archive page, you can access the previous and next month's archive page.
- And from a year archive page, you can access the previous and next year's archive page. (Of course, I started the blog this year, so that's not possible yet.)
(I've also added textual links to "previous" and "next," under "THIS PAGE," on all the aforementioned archive pages.)
Two, I think every news site should be doing this.
One of the biggest problems with online newspapers is the experience of reading them. There's no clear path through the news -- an advantage print newspapers have had since the get-go.
In a print newspaper, you start at the front page and read until you've reached the end. If you don't feel like reading a story, you skip it and go to the next one. When you reach the end, it's over. Complete. There's a sense of accomplishment and a sense of closure. You can move on with your life.
Not so online. There's so much garbage on news sites that, oftentimes, reading one actually leaves you more frustrated and overwhelmed than enlightened. Each click to a new page brings more headlines. You start forgetting what you've read, what you haven't read, what you don't want to read -- and what you wanted to read but lost track of five clicks ago.
That's why I'm convinced "previous" and "next" links are such a good idea.
More people would read more online news stories if they were given something as simple as a linear navigation. Many sites try to overwhelm users with "Complete coverage!" "Unedited transcripts!" "50 related links!" I'm not advocating the abolition of these features; they're a great help to someone who's interested in a topic. But for the people who just want to catch up on the day's news, there's no clear path. And, importantly, there's no sense of closure.
A few news sites already provide this feature. Some examples:
- Journal-Pioneer (Prince Edward Island, Canada)
- Australian Broadcasting Corporation
- Detroit News (Michigan)
- North County Times (California)
- Los Altos Town Crier (California)
- Wooster Daily Record (Ohio)
- Amarillo Globe-News (Texas)
- ZDNet (U.K.)
- Ottawa Sun (Canada)
It's great to see "previous story" and "next story" links in action, but what these examples lack is consistency. Sometimes the "previous" and "next" links appear at the top of the page; sometimes they're at the bottom. Sometimes they're colored arrow icons; sometimes they're text links. Web users have very little incentive to relearn a convention for every site they visit.
That's where <link rel="prev"... /> and <link rel="next"... /> come in. They're consistent. Those links will always be in the same place -- in your Site Navigation Bar (if you're using Mozilla and NS6+).
Put those links in, tell the public they're there and explain how to use them -- and I'm sure your site will see results.
Comments
Posted by xian on October 1, 2002, at 8:39 p.m.:
all my sites are hideous compromises, but i like to be inspired by people like you who walk the walk and also document your decisions and make a path for the less gifted among us to follow. thank you!
a question about implementing next and previous links: how do you automate the logic for identifying where those links point on any given page?
Posted by Adrian on October 1, 2002, at 9:29 p.m.:
Thanks for such a nice comment!
Because this blog is database-driven, automating the logic is simply a matter of making two database queries: One to find the previous entry and the second to find the next entry. You could do it in a single SQL statement, using subqueries, but MySQL, which runs this site, doesn't support subqueries (yet).
Let's say your blog is stored in a MySQL database (the most popular blogging db) with fields "headline" and "timestamp."
To find the previous entry for an entry with timestamp "XXXXX", execute this query:
SELECT headline,timestamp FROM blog WHERE timestamp < "XXXXX" ORDER BY timestamp DESC LIMIT 1;
To find the next entry, this is what you'll want:
SELECT headline,timestamp FROM blog WHERE timestamp > "XXXXX" ORDER BY timestamp ASC LIMIT 1;
(Note the "LIMIT 1," because we only want to return one entry in both cases.)
Of course, this assumes you have access to the blog's database and are comfortable executing SQL, and all that. If you use somebody else's blogging tool (e.g. Radio or Movable Type), check out Dive Into Accessibility for tips on how to implement it in those systems.
Posted by AgentKen on October 1, 2002, at 11:17 p.m.:
It's funny when we talk about "next" and "previous" stories on the web.
I don't think that logic makes any sense. There is no "next" in hypertext.
After we finished the EcoLatino.com site launch, the editor said, "Why is there no link to the next story?" and I said "How do you know which one is next?"
I'd much rather see links to related stories like we do in local stories about beach safety in St. Augustine.
And to circle back to another blog topic, wouldn't a random or automated "next" feature in a news site give rise to more Streisands being placed next to Saddams?
Posted by Craig on October 2, 2002, at 12:37 a.m.:
Have to agree with AgentKen on this...
But I should point out that all papers in Canada's Sun chain (accessible via CANOE, as well as The Toronto Star and The Globe and Mail's print stories all have them. In fact, the only major Canadian newspaper sites that don't have them are those owned by CanWest (find them at Canada.com)
Posted by Adrian on October 2, 2002, at 12:55 a.m.:
"Previous" and "Next" wouldn't be random; rather, they could be organized in one of two ways: date/time (as in a wire service's news feed), or editorial judgment (as in a newspaper). What the heck -- you could offer both paths and give users the choice.
Also, I think "previous" and "next" links wouldn't cause a Streisand situation as long as they were isolated in a non-content part of the page.
I agree that related content is a good thing, and I'm not saying everyone would be forced to use the previous/next links. This idea is more of a feature than a requirement. On this site, for example, it's there for you if you want to use it.
Posted by Nollind on October 2, 2002, at 6:42 a.m.:
I unfortunately agree with AgentKen as well. This has very limited uses, since we aren't reading books online with previous and next pages. If I have a corporate site, after reading our "people" sections, I wouldn't have a "next" link to our "portfolio" section. People would be choosing what they wanted to read next. They control is with them. Your examples, however, do make good use of it though, as the previous and next usually relate to time-based sequential events. So anything similiar in nature would probably make use of this. Still, if I was on a news site reading a news article on a major fire in a state, what should the "next" link go to? Somebody might say to the next released news item, yet someone else might say to the next article relating to that state, while someone else might say other natural disasters, and so on and so on. I guess this also drives home AgentKen's point on "related stories" as well but more so from the premise that people want to see related links based upon their personal "relationship viewpoint". As I said, someone may want to see all of the related news in that state, whereas someone might want to see other natural disasters, and so on. It would be interesting if a site could dynamically created these "relational links" based upon the specific visitors interest.
Posted by Ben Meadowcroft on October 2, 2002, at 11:51 a.m.:
I have to disagree with a few of the comments here, have you guys never read an article or feature that spanned more than one page?
Admittedly with one page stories what comes next might be open to debate but there are plenty of sites that split features over more than one page (wired springs to mind of the top of my head). Using standardised prev and next links in a page enables interesting possibilities such as prefetching the next page in a story while the connection is idle etc. When the reader clicks on a link to the next page the page is rendered much faster = happy/ier reader.
If you're interested in related links then the power of RDF/RSS can come to your aid, as well as having a specific news channel (the frontpage items etc), a more persistant category based feed could be produced. These could even be dynamically created (see the customised feeds for this for an example) using keywords, voila an instantly manipulatable and queryable representation of related stories. I've written about this before see the Google Groups archive [near the end of the post] for more info.
Posted by Jonathan on October 2, 2002, at 8:44 p.m.:
In Radio adding these tags is not so obvious... as a relative new blogger, I am not sure how to do this and think the idea of linking through based on time is an excellent one. I used Grey Matter briefly (before deciding that server admin was not for me right now) and noticed that this was a standard component of the system.
Posted by xian on October 3, 2002, at 2:39 a.m.:
There are Radio macros for previous and next day links. I'm using them in my blog, although of course I instantly forgot the syntax as soon as I added the markup. Email me if you can't find the info via Google.
With hyperlinked publications, it's an open question whether the editors should provide a linear recommended "path" through each "issue" of the publication. At Enterzone, we released a bunch of "articles" together as one "episode" but offered a page called Path of Least Resistance and always had next and previous links based on that recommended reading of the 'zine. An example is episode 6 or episode 11 (etc.). This was, unfortunately, all handcoded.
Posted by James Robertson on October 3, 2002, at 8:51 a.m.:
I can't comment specifically on news sites, but I can say that in a recent usability test of an intranet, *no* users understood or successfully used Next & Previous links. I have now recommended that these be removed from the current design.
There is no "right" or "wrong" design. Instead, each site should be usability tested on representative tasks. It then becomes possible to determine whether specific features are useful or not.
James
Posted by Nollind on October 3, 2002, at 5:37 p.m.:
Ben, I for one am not saying they shouldn't be used. I'm justing saying that uses for them would probably be limited. In other words, they are something I wouldn't plaster on every single page of a site. I think James point says it all. If they work in the instance you are using them for (i.e. next page, etc) then use them. If they don't, then obviously don't use them for the sake of using them, as you'll only probably end up confusing your visitors. It's like the old "don't use Flash for the sake of using Flash" motto. Remember, with regards to usability, sometimes too many choices can be just as confusing and frustrating as too few choices.
Posted by Adrian on October 3, 2002, at 6:42 p.m.:
Something worth clarifying is that the <link rel="prev".../> and <link rel="next".../> tags, in and of themselves, do not generate any visible content in the Web page. Rather, they provide meta information, which some browsers (e.g. Mozilla) are able to display in a separate part of the browser window (e.g. Mozilla's Site Navigation Bar). James, did your usability testing account for those types of links? Or were you simply testing "normal" in-content links that said "previous" and "next"? There's a big difference. (I wasn't advocating simple "previous" and "next" links in the content area, although I did point out that my blog has adopted these -- so I can see how that might have been confusing.)
Some excellent points have been raised here. I think the main issue with my idea is the logic (AgentKen's point). What is a "previous" story? What is "next"? In order to pull this off, a site would have to define clearly how "previous" and "next" are determined. As I mentioned in a previous comment, I think the best ways would be either to sort/rank stories by time, or by editorial judgment.
But then the problem becomes finding a place to explain all this. That's where a starting page (like Xian's Path of Least Resistance) comes in.
Posted by Martin on October 7, 2002, at 11:07 p.m.:
I like the idea but....I do have some concerns that the function of 'previous' and 'next' might easily be confused with the standard browser functions of 'forward' and 'back'. Even if this is not the case, I suspect that any visitor mixing their use of these two navigation methods within a single site might quickly get lost (unless the site supports them with additional strong navigational clues)
Nevertheless, I agree with Adrian's sentiment that this might provide an additional navigation tool which has the potential - if used carefully - to make a site more accessible.
Comments have been turned off for this page.