4 Principles of Effective Navigation for the Web
10 Jan 2007

4 Principles of Effective Navigation for the Web

10 Jan 2007

Imagine that you are in a supermarket buying groceries for dinner. Imagine also that this supermarket does not label what kinds of items can be found in each aisle making it impossible for you to know where to go for the next item on your list. To make things worse, the aisles in the store shift around without warning and you never know quite where you are with respect to the last place you’ve been.

This painfully frustrating scenario seems outlandish, yet many websites put their users in this precise situation. Navigation systems often do not tell users where they have been or where they can go, and sometimes they don’t even let the users know where they are. Instead, users are forced to blindly stumble to their destination and through their tasks; they are forced to rely more on good fortune than on effective wayfinding.

Navigation, by definition, is finding a target point based on one’s current location and at least one more reference point – usually a visible destination or previous bearing. Anything that does not satisfy these criteria is not truly ‘navigation’ but rather un-systematic drifting. In addition, even perfect navigation is useless if the reference points used for triangulating one’s trajectory unexpectedly shift and change. This is unlikely in a physical setting since landmarks usually do not move much, but it is a real problem in a virtual space like a web site or application where the rules are dictated by human-developed code.

Therefore, effective navigation systems must do four things:

  1. Tell users where they are – Users must know where they are so they have a reference point for adjoining areas or states
  2. Tell users where they can go – Users cannot go somewhere if they do not know how to get there
  3. Tell users where they have been – Users do not navigate in one direction; they often backtrack
  4. Navigation must be consistent – The rules for navigation and reference points cannot change or they become meaningless

Meeting these criteria ensures that a user is able find their way using consistent reference points. This makes navigation through a web site or application quicker, more intuitive, and generally easier. An effective navigation mechanism facilitates the flow of traffic to key areas and functionality and, thereby, increases the value of the web site or application.

How does one create navigation systems that embody these four elements? Before discussing ways of implementing an effective navigation system, let’s first study navigation that fails to meet these criteria in order to learn how to identify navigation problems and to understand how missing these elements causes it to fail.

Examples of Bad Navigation

One of the worst perpetrators of bad navigation is none other than Google. The darling of usability engineers and interaction designers has very disparate and unintuitive global navigation that makes it difficult for users to navigate from one service or section to another. (I hope that Google takes the following evaluation as constructive criticism – yikes.) Let me take you through just one common session, where the user (me) goes to Google to find out about Picasa checks his personalized home page and Gmail.

Where Can I Go?

Probably the most annoying pitfall of navigating through the Google maze is that I have no idea where I can go to find the things that I need. Maybe I exaggerate a little but I still often feel completely lost despite being–what I would consider myself–a power user; I subscribe to at least 8 Google services and products, have been using Google since about 2001 and have even worked at Google.

For example, I recently wanted to learn about using Google’s Picasa for organizing and sharing my pictures. The task was to find out about Picasa. There are many different paths that one can take to completing this task, and I took what I think is the most common. I started on the Google home page. I scanned the minimalist page looking for a trailhead that would lead me to my destination. None of the links at the top of the page came close, I wasn’t looking for ‘Advertising Programs’ nor ‘Business Solutions’, and I didn’t care to learn ‘About Google’.

Where can I go to find out about Picasa?

From my days at Google, I luckily remembered that Google’s Services are listed under ‘About Google’. However, how would a user that is not intimately familiar with the Google Maze think to look there? Sure, the user could have searched for it by name or some related keywords, but this is meant to illustrate a very common navigation pitfall – not letting users know where they can go to complete their tasks.

Where Am I?

I navigated to the About Google section of the web site. In the upper left of the page, the logo read ‘About Google’. I located the ‘Google Services & Tools’ link in the middle of the page and navigated to the corresponding page. As I scanned over the page to get familiar with its contents, I noticed that the logo at the top left of the page now read ‘Google’ and there was a search field in the header.

What?! Where am I? How do I get back? How do I navigate around this section of the site?

Although disoriented, I assumed that I must have been in the Google Services & Tools section of the web site, so I pressed on. I found and clicked on the ‘Picasa’ link and was taken to the Picasa landing page. I scanned over the content on the Picasa landing page and found out that it was only available for Windows, so I decided to leave.

Where Have I Been?

Even though Picasa didn’t work out, I wanted to check out some other cool Google services.

But wait. Where am I now? I think that I should be in the Google Services & Tools section. How do I see the other services and tools? Do I have to navigate back to the previous page? Can I get to some other services from this page? How do I get back to the Google Services & Tools page? Do I have to hit the back button on my browser? Forget it. I just want to check the headlines on my personalized Google home page and check my Gmail. How do I get back to my personalized homepage?

I scanned the Picasa landing page and there was not a single link to the Google home page. Frustrated, I typed ‘www.google.com’ into my address bar.

What Now?

Google uses a myriad of navigation paradigms. Sometimes the link to Google’s home page is at the top of the page, sometimes it is through a linked logo, sometimes it is at the very bottom of the page, and sometime it simply does not exist. For a long time, you could not get back to Google’s home page from Gmail. Thankfully, they finally fixed it, but there are still a number of confusing and conflicting navigation systems. For example, there is still no apparent way to get back to Google’s home page from AdWords.

In addition, Gmail now lists some of the user’s services in the upper left of the page and there is a link to ‘all my services’. This is also the case on Google Docs & Spreadsheets and some other services. However, on many other services such as AdWords, AdSense, Google Analytics, etc., this is not present. In fact, on Google’s personalized home page these links also do not appear, and a totally new paradigm is introduced where the user has to follow the ‘My Account’ link.

Even more egregious is that there is an identical ‘My Account’ link in the upper right in Google Analytics that leads to a totally different page – the account page for Google Analytics. Creating similar navigation paradigms that lead to completely disparate states is certainly a cardinal sin in user experience design.

My Account link goes to main My Account Page

Above is the main My Account page

This ‘My Account’ link does not go to main Google My Account Page but rather to Analytics Account

Implementing Effective Navigation

There are no magical, universal rules for implementing the four axioms that comprise effective web navigation, but there are a few common starting points that can be modified or used for inspiration.

Telling Users Where They Are

Telling users where they are is hugely important and relatively easy to implement. On web sites that employ static navigation systems such as primary and secondary navigation, letting users know where they are is a matter of highlighting the primary section and subsection. For web sites that may have a less linear navigation pattern, the use of breadcrumbs can be a very good way of letting users know where they are as well as where they were.

Telling Users where They Can Go

Often, navigation mechanisms fail to let users know where they can go by using labels that are misleading or vague. Therefore, special attention should be paid to naming of primary navigation links. Another way to help users understand where they can go is to expose sub-sections within top-level navigation categories. This is particularly true in cases where the user’s intuition can easily fail. If the user cannot rely on her intuition, it is important to reveal deeper content. For example, if a user is looking for real estate on Craigslist.org, the user may expect to find it in either the ‘for sale’ category or under ‘housing’. However, this possible source of error and confusion is alleviated by the fact that ‘real estate for sale’ is exposed under ‘housing’.

Telling Users Where They Have Been

This point is much more difficult to implement and probably less critical than the other three. Despite this, one must be cognizant of the fact that users often backtrack, and letting users know their previous bearings greatly aids their navigation. This is particularly critical in cases where the use of dynamic methods like Ajax break the users ‘back’ button functionality.

Beyond highly interactive pages, dynamic navigation mechanisms such as filtering systems or complex, web-like information architectures require that users know from where they are coming. Navigation aids such a bread crumbs can do a fairly good job in meeting this criterion.

Systematic Navigation

There are few things that are more damaging to users than confusion and misinformation. It is critical, therefore, that navigation mechanisms are consistent and persistent. A navigation mechanism should never have an evil twin that looks the same but does something different. Also, if navigation paradigms must be different from one section to another, it is important to communicate this to the user using visual cues and explanatory copy. For the most part, creating systemic navigation is just a matter of clearly defining navigation mechanisms and common sense. If the link to the web site’s home page is in the upper left, keep it there throughout the entire site.

Takeaways

Navigation should not be confused with an infrastructure through which users move. Navigation is a systematic and controlled movement to one’s destination. Links, buttons, and other pathways that take users from page to page and state to state are just the infrastructure similar to roadways. In order for users to effectively move through the infrastructure they need navigation mechanisms that let them know where they are, where they have been, and where they are going as well as a landscape that does not shift chaotically. Trying to meet these criteria in the design and implementation of navigation systems will improve usability for users and will help web site owners meet their goals by ensuring that traffic flows to strategically critical areas.

Leave a comment
More Posts
Comments
Comment

Leave a Reply