/Culture/ The rules of navigation
22/08/2006 | Filed under Develop > Culture
No website could exist without it but, if you don’t get the planning phases right, it’s very easy to get your navigation all wrong. Jesse James Garrett reveals that location, location, location is the key
Just about everybody who designs websites got their start designing other things. Some people came from graphic design, others from designing software. Many came into it from doing work they might not have considered design at all, such as creating databases or classification systems. We all had to learn about this new medium when we started designing for it. The thing we’ve got to learn about now is designing navigation to enable users to move through our sites.
Navigation must fulfil two key functions. First, it must communicate to users the areas available to them. Second, it must afford the user’s movement to those areas. If, for example, a page has a set of links but those links are unlabelled blobs, the navigation element fails because it does not communicate choices. On the other hand, a list of content elements with no links does not provide access.
Location, location, location
It is said that the three most important things about buying a property are location, location and location. And it turns out that the same can also be said of navigation, but in this case we mean location in three completely different ways. In order to really specify how any navigation element works on our site, we must first identify these three separate types of location for it.
The first kind of location is the type where the navigation appears on the page. Primary navigation items are given prominent design treatment, with bold graphics and a position near the top of the page so you spot them first when you’re browsing. ‘Secondary’ elements may appear just below or near primary ones, with slightly less attention-grabbing treatment. Other supplementary elements are placed elsewhere on the page in small, unobtrusive type. The choices we make about which elements appear where infl uence the way users interpret the relationships between areas of the site and the relative importance of those areas.
The second kind of location is the area of the site where the user can access the navigation. Some navigation items are persistent, meaning that they are available on every page of the site. Other contextual items appear only in limited contexts, based on the particular needs of users in that area of the site. In some cases, contextual elements are determined based on what we know about the users themselves: some users may get options that are invisible to others.
The third kind of location are places on the site to which the navigation affords movement. In other words, the locations that the user can get to by using the navigation element you’ve designed are just as important as where the navigation element actually appears. Global navigation affords movement to the entire site – or at least, to the handful of key access points that provide access to the whole range of available content. Local navigation affords movement to a limited set of pages, such as those placed within a section of the site.
Jesse is director of User Experience Strategy and cofounder of Adaptive Path, a user experience strategy firm based in San Francisco. In 2005, Jesse coined the term AJAX and defined the concepts behind it. Adaptive Path’s work focuses on creating innovative products by bringing user-centred thinking to product strategy. Jesse’s book The Elements of User Experience has been widely acclaimed and he’s a frequent keynote speaker and writer on user experience strategies whose work has been published in over a dozen languages.
The definition of navigation
By putting these three kinds of location together, we can precisely define how a particular navigation element works. Most sites have some sort of navigation element that is primary (appearing as the most prominent element on the page), persistent (accessible on every page) and global (affording access to the full range of site content). Section-level navigation elements tend to be secondary, contextual, and local. The varieties of navigation provide a rich vocabulary for us to connect users with our content.
But that doesn’t mean we should overuse navigational devices. When everything is equally important, nothing stands out. Navigation sends a message to users about what matters: what matters to the company, what matters to the user, and what the company thinks ought to matter to the user. People read navigation the same way they read a menu: it helps them interpret the experience they have with the site. Every navigation element tells a story. What story is your site’s navigation telling?
Bookmark with:
Comments
Liam Giles / 11/04/2007 / 18:22 / http://www.spindogs.co,uk
Good article!
Some really straight forward and simple points here that designers should take on board. Team this up with some of Neilsons pointers for usabilty and you cant go far wrong.
Mathew Browne / 31/05/2007 / 15:48 / http://www.mbwebdesign.co.uk
I once had a client ask for very slightly off-white link text on a white background. "I want readers to have fun trying to find the links."
I advised they'd be more likely to get bored or frustrated and leave the site. Client can't be told and breaks out the classic "customer is always right" line. Finished site, launched site (without footer links back to me, obviously). Problem is, the client is thrilled with the site and is telling everyone that I made it, when actually it's barely navigable. Whoops!
Darren Azzopardi / 25/06/2007 / 16:24 / http://darrenazzopardi.wordpress.com
Aaah, "the client is always right" card, bless em.
john Sousa / 18/02/2009 / 22:41
Wonderful article. I especially like how you said that users read navigation like they read a menu. Great example.
jon / 08/02/2010 / 17:23
Nice artical, it helped defined the differences between navigation points.
Tom / 20/08/2010 / 10:37 / http://www.cvpreview.co.uk
"People read navigation the same way they read a menu"
... that pretty much sums up the importance of a site's navigation.
Ryan / 22/08/2010 / 13:21 / http://www.childrensslideuk.com">
Excellent insights there on the design and rule of navigation! I always think that the clean and simple style is the best approach rather than gimmicky graphics and information overload on the page. First impressions are very important for a visitor and without a good design and useful navigation - they simply won't stay on the website long enough and the chance of returning will be minimal! Thanks, Ryan.
