Ditching ‘Next’ and ‘Previous’ for Blog Navigation

06.22.07

Design This Site UX

One of the defining characteristics of a blog is the manner in which the content is presented. The home page is organized in reverse chronological order, and traditionally, the entirety of each entry is exposed in that view. The competing model of content presentation is one embodied by news portals: the articles are reduced to snippets and navigating away from the home page is necessary to read anything that amounts to prose. Both of these approaches also impose divergent conceptual models of the site’s organization. Whereas the news portal is taxonomy centric, the blog’s content has much more relevance in the context of time.

It is no wonder then that you will find “previous” and “next” links (linear navigation) on just about every blog, in the same way you will find links like “More articles in Politics” on news portals. One deals with time and sequence, the other with categories.

Having accrued enough posts to justify it, I decided to add linear navigation to my permalink pages.

The Accepted Solution

The most common approach to presenting these links has been to position the “previous” link on the left and the “next” link on the right. The “previous” link points to an older entry, while the “next” link points to a newer one. When not labeled with “previous” or “next”, the links rely on a guillemet to communicate that message. This approach is endorsed by the default templates of two blogging powerhouses: Six Apart and Automattic. In other words, millions of sites have unintentionally given their nod to this design pattern.

Example of linear navigation in typepad and wordpress

Since time is most often visualized as going from left to right, this approach is also logical on the visual level. The left link will take you to the the past, the right link, to the future. I think this is a good solution, and this is what I started with when I decided to add linear navigaton to this site. I am going to presumptuously refer to this as the accepted approach or accepted solution from this point on.

Scratching the Itch

After adding “next” and “previous” links to my permalinks, I still felt unsatisfied. Despite the fact that I frequently use linear navigation on other sites, I often find the experience marred by a good degree of indecisiveness. I’m never really sure where exactly I’m going: am I going to be taken to an older post or to a newer one?

I think the problem lies in a conceptual disconnect between the home page and the permalink.

On the home page, because posts are listed in reverse chronological order, the concept of “next” (as you scroll down the page) points to an older post. On the other hand, on the permalink, the “next” link typically takes you to a newer post.

Concepts of next and previous on homepage and permalink page

When I am reading a blog’s homepage, I am reading the newest posts followed by older ones. When I decide to drill down to the permalink (to read comments or view rest of entry), my instinct is to continue to browse in that order. In that situation, I instinctively feel that the “next” link should point me to the older entry.

However, when I’m not coming from the home page (search engine results or my feed reader), I typically want to read the newer entry. Perhaps this is describing a personal preference. (If presented with two options: to read an older post or a newer post, I feel the very nature of blogs makes the older post a losing proposition.) But regardless, in this scenario, the “next” link feels more natural pointing to a newer entry.

It is no surprise then that there are plenty of prominent sites that do the exact opposite of the accepted solution (i.e. by making the “next” point to an older post). This ignores tradition and does little to alleviate my indecisiveness.

Detouring to Blogger

Blogger, the other mega-popular blogging tool, has a slightly different approach. Rather than rely on little arrows, or the ambiguous “next” and “previous” labels, they simply use two links titled “older” and “newer”:

Blogger Linear Navigation

Google, who owns Blogger, mirrors the approach on their official blogs and also in Google Groups, where they are also sorting posts in reverse-chronological order (same problem space). Whether this is a product of legacy implementation or the final synthesis of quantifiable research, it can’t be discounted, as it’s unlikely Google would be doing something on that scale to their disadvantage. Personally, I like to entertain the idea that every decision at Google is answered with algorithmic, supra-logical precision (but sometimes with odd results):

Google advice[dramatization] Googlebot’s algorithm favors self-preservation to the detriment of this poor searcher.

There is little ambiguity with “Newer Post” and “Older Post” - they are great labels - but I think it lacks some of the elegance of the accepted solution:

  • Doesn’t surface the title of the posts
  • Presentation subverts the traditional visualization of time as moving from left to right

Adding Training Wheels

The solution I settled on was a simple combination of the two most common approaches: I decided to compliment the accepted solution of linear navigation with the hyper-precision afforded by the labels of “older” and “newer”.

When solving an interface problem, using words, or any kind of help text, is often viewed as a crutch to be avoided. To make the approach less like a crutch and more like training wheels, I muted the labels’ color to a light grey and positioned it outside of the linear flow of the link text. I retained the arrows and surfaced the post titles, while keeping the older post on the left and newer on the right.

Linear navigation on Ephram Zerb in 2007

As of this writing, the linear navigation appears below every post.

In the process of me surveying the web and trying to get an understanding of what is most common, I noticed that there are plenty of blogs that don’t have “next” and “previous” links. If there is to be one takeaway from this post: make sure to have such navigation to begin with.

I’d like to hear other’s experience with linear navigation. Do you find it intuitive? In what situations do you find it helpful? Which approach do you find most appealing? When do you find yourself using it?

Snap Preview Extreme Make-out

03.15.07

Design UX

About a month ago, Snap Preview was dodging a backlash to its suddenly-pervasive preview tool. Along with dozens of bloggers, I offered my assessment and promised to post a follow up with some solutions and approaches to using Snap Preview effectively.

In that time, Snap rounded up all the criticism, addressed it personally and delivered a thoughtful update to the product (twice) – largely making my intended follow-up obsolete.

Judging from comments on my last entry, the web-savvy individuals that contributed were largely unimpressed with what Snap Preview could provide and saw it as a superfluous nuisance. One of the two different Erik’s that posted a comment, made a good point in that the status bar already solves a lot of the problems that the Preview purports to solve (the ability to pre-qualify links prior to clicking on them). To that, I point to Apple’s Safari browser. There is a reason why Apple’s designers chose to ship Safari with the status bar disabled by default: for most people, the URL information is cryptic, non-essential and only confounds the decision making process.

Erik also added that a lot of indecisiveness could be resolved by using informative anchor text that provides context to the link. This mark of good web production is a luxury not afforded to the nature of modern content. With the barrier to content creation lower than ever before, masses of new information are being stitched together in blog posts, comments and social apps. There isn’t a long-established tradition of online content publishing to help regular individuals understand the value of crafting anchor text. But as the web standards movement showed us, a cultural change is not impossible, as long as people remain vocal about it. To that, I will add my contribution in bold: Snap Preview Anywhere is not a substitute for poorly formed anchor text.

Among his other good points, Jonathan Nicol also contributed this interesting observation:

It is distracting to wait a second for a preview image to load, look at and absorb the image information. In other words, it slows me down.

read full comment

The Snap Preview can be quite jarring, especially when activated accidently. The accidental activation problem was nicely tackled with the introduction of the Snap Link Icon. Instead of having the entire link trigger a Snap Preview, it would only be activated by hovering over a small icon next to every Snap-enabled link. This also acts as a nice extension of a design pattern in which external links are denoted with a presence of a small icon appended to them, creating a distinct, scanable distinction between external and internal links. Unfortunately, this behavior is not one of the default settings when customizing the Snap Preview for a site. I would recommend choosing: Snap Link Icon: On & Trigger: Icon Only.

But even without accidental activation, it requires some effort and distracts from a more linear consumption of information - locate icon with your eyes, move your mouse, wait for the Preview to appear. However, most site visitors don’t consume content in a linear fashion, and the interaction of breaking from a logical flow is much more intuitive that it sounds. On sites where I am trying to digest a lot of information, great, give me more of it - but “new information, often” is not a primary objective of every site. A Techcrunch is meant to be consumed differently than a Daring Fireball. I will follow every link on Daring Fireball, whether I want to or not - and a preview will certainly slow me down in this case. Analogously, I don’t want a news ticker or graphical pop-ups annotating every scene when I’m watching Heroes; and I would feel similarly deprived if CNN was devoid of all graphics.

Another visitor, going by “Haarbal”, also offered his appraisal. Particularly, I identify with his sentiments that Snap Preview should be determined on a per-link basis. For me, examining the quality of each link is a pleasant thing to ponder about, but that necessitates a design decision for each link. Despite this, the latest version of the tool actually does a good job of solving this problem on the site-level, simply by adhering to one maxim. When Erik Wingren listed best practices in an exhaustive post on Snap’s blog, all of his real-world examples were external links and he explicitly dismissed the value of using it for internal links. It goes without saying: Snap Preview should only be used on external links. Further trivializing this follow-up post and adding weight to a site-level solution, he touched upon the two use patterns which I thought were best fit for the widget: external links in post content and the blogroll.

To top it off, in a move that fully subverted my efforts, Snap launched the “Snap Preview Anywhere Extreme Makeover Contest”. With a substantial cash prize, Digg-like voting model and a well-executed email marketing campaign, the crowdsourcing machinery has so far generated a good amount of interesting suggestions on how to improve the product. If anything, I’ll be taking the rest of my thoughts there, now that I have fulfilled my follow-up obligations.

Judgement Day for Snap Preview

02.1.07

Design UX

In the age of plug and play widgets and turn-key publishing, bloggers are empowered to add new functionality, behavior and information to their websites with a push of a button. One only has to look as far as MySpace to see how individual expression manifests itself in the form of plug and play additions and customizations. Let me assure you: there is nothing wrong with accessorizing one’s piece of digital property.

However, if you’re an individual publisher adding widgets with the intention of improving the user experience, a great deal of restraint is in order. With these kind of goals, you have left the realm of self expression and entered the world of design. Which brings us to Snap Preview Anywhere™ - a tool that allows you to preview a website with a small thumbnail before committing to a click on a link.

Allow Snap’s marketing team to introduce the Preview widget:

Previews give site visitors the ability to ‘look before they leap’ when determining whether or not to click on a link.

Previews help you, the site owner, keep the user on your site instead of losing them to the site behind the hyperlink (increases relevant, on-site page views).

While it supposes a somewhat miserly approach to links, beneath the veneer lies a pretty compelling value proposition that promises to improve the user experience on a website.

Still, bloggers implementing this functionality on websites have garnered mixed reviews from their readers. Nick Wilson felt really passionate in his assessment, in a post titled: 3 Reasons Why Snap Preview is Ruining Your Blog, and Hurting Your Readership. The first gripe he mentions, really resonated with me, as the accidental triggering of Snap Preview forced me to consciously change my typical browsing behavior, and left me constantly aware of the daunting possibility that another Snap Preview might appear.

Snap Preview links leave my mouse scrolling the content gutterWhen I view a website, I leave my mouse stationary and use the scroll wheel. Each link that has Snap Preview makes the vertical area above and below it a hazard for accidental activation. Forcing me to find a gutter in the content to place my mouse cursor.

What problem does it solve?

Overusing any tool without first addressing what problem it tries to solve will leave you with frustrating results. The Preview has the capacity to provide extra information on a destination link that the user wouldn’t be privvy to unless they visited the website, such as:

  • Is the destination website a blog?
  • Does this link point to a wikipedia entry?
  • Is this the same website the author linked to earlier?

The use of a visual thumbnail preview to qualify a link is not exclusive to Snap, and can also be seen in Ask.com’s search results, among other sites. This reaffirms that there is some viability to the approach, as more than one group of UX designers is convinced of its potential benefit.

Ask using the preview pattern

The challenge

While a Snap Preview seems perfectly capable of addressing some unanswered questions before clicking on a link, this problem is not universal to every visitor. The challenge is to provide the extra information for those who need it, when they need it, and abstract it for those who don’t. Additionally, not every link should qualify to have a preview.

A prime example of problems Snap Preview can cause would be a large photo that links to Flickr: when used, the Snap Preview pops up and ends up obscuring the image, only to show a smaller thumbnail of the image that was just obstructed. Here is an analogous example that might be accompanied by a tear in the universe (thanks to yizzle for the inspiration):

A recursive Snap Preview

I wanted to show some compelling examples of the widget in action, but many of the sites that have used it have simply removed it by now. Either way, when I was using sites that had the Snap Preview enabled, I found myself leaving the site and, out of habit, hovering over links on sites that didn’t have the functionality, expecting a thumbnail preview. This might suggest that there is some more value left in the concept than the recent backlash suggests.

I will argue that no content publisher needs such functionality. Still: can this widget be redeemed and turned from a nuisance to a complimentary feature? How does one decide whether Snap Preview is right for their site, or how does a blogger still have fun with it in a way that doesn’t burden their readers? What are some good examples? Feel free to post your personal experiences with the widget in the comments section. I’ll summarize people’s sentiments and offer some solutions in my next post.

Get Your Internet On