Navigation via the link element

June 30, 2008 / A few thoughts on adding meta-level navigation.

Pretty much every navigation menu on every site is different. They have commonalities, but obviously they’re not exactly the same. The minute you want to find something else on the site you’re viewing a small part of your brain energy goes into figuring out what’s available to get you there. You probably look for a navigation menu, some persistent pattern of options that outlines the site’s scope and allows you to move across, down into, or up and out. Unless the designer hates you, you’ll probably find the navigation in the same place on each page. It will take you time and effort to move your mouse there. Not much, but some.

[Opera's Navigation Bar]
Opera’s Navigation Bar.

Another way to provide navigation is through the page’s meta information. If you mark up the head of each page with link element relationships to nearby documents then visitors with a capable user agent can navigate to nearby stuff using their application controls. Opera is one such browser. Note the available Home, Previous, Next and Author buttons on the lower toolbar in the screenshot. There’s also a Firefox plugin called Link Widgets that works in a similar way. The blue arrow buttons are Top, Up, Previous and Next though there are others you can add by customising your toolbar.

[Link Widgets for Firefox]
Link Widgets for Firefox 1.5+.

In this scenario you expend some brain energy seeing which options are available, and some time moving your mouse to the one you want, say the “Previous” button. But the next time you come to a site that supports this type of navigation, you know those buttons are in exactly the same place, the same distance from each other, the same distance from your Reload and Back buttons, i.e. not far.

In HTML4 this was the intention of the link element: to provide a way for the browser to render links through the user interface (though I just learned about it). Opera’s implementation is quite addictive—fast the way a feed reader is when you’re skipping through a list of posts. I’ve no idea how widely supported this is, but it’s another tick for Opera. I think they are slowly winning me over.

2 responses

  1. Dan Todd

    I haven’t used this technology yet, but I’m struggling to understand the utility. I can see it being useful on a blog, photo gallery or a reference website. Can it be used on an ecommerce or banking website? What do you like about the browser handling the links, apart from the muscle memory thing?

    July 1st, 2008 at 3:40 am #

  2. Adrian

    Can it be used on an ecommerce or banking website?

    In practice, I’m not sure. Home, Search, Glossary, Help and Copyright all seem relevant here. Login would be a nice addition. For commercial sites I can imagine My Account and Shopping Cart being useful in the same way—though the browser would need to apply the same security defences it does against other kinds of navigation.

    That brings me to another point: link element navigation is a GUI helper for hackable URLs. It provides a way to standardise on existing navigation conventions and make the choices easy to select.

    July 1st, 2008 at 9:48 am #

Zero to One-Eighty contains writing on design, opinion, stories and technology.