This article was originally published in the August 2009 issue (Vol 14, No. 3)

About the Author

Eric has been an STC member since 2004. He has been fascinated by the web since 1994, the internet since 1991, and networks since 1986. Stuff that doesn't work the way it should drives him crazy. When he isn't fretting about his lawn sprinkler controller configuration, you can reach him at hughesearthur@gmail.com or twitter.com/hughese

STC UUX Community Newsletter
Usability Interface

Evaluating Existing Web Sites and Applications: Navigation and Structure

By Eric Hughes, Managing Director, Simplexity, LLC

In our previous column, we identified nine categories of best practice criteria to consider when reviewing existing websites and web applications. We discussed the importance of identifying and analyzing audiences, because best-practice criteria are only useful in relation to how those audiences use and perceive what is built. As you do a thorough evaluation, you will need to be a knowledgeable proxy for the application's intended audience.

We define navigation and structure as providing clear ways of moving forward, going back, getting Home, and finding what is relevant; always letting visitors know where they are and where they can go; and visually grouping related information together. Quality navigation and structure results from a smart mix of information architecture planning, collaborative content creation, and flexible technology implementation.

Where am I now?

The first of the criteria to consider is whether it is always clear to your audience where they are in relation to the rest of the site. As an example, let's take a look at a site where you can rent vacation homes. It is actually one of my favorite places to look when I want to get away for a weekend with my family. You will find it at http://www.vrbo.com/. There seem to be two primary audiences that we can define at a very high level: those looking to rent places to stay and those looking to offer places to stay. I don't have a place to offer, so I'll be a person who is renting.

It doesn't take me long to see where I can run a search, so I'll look for a place in Bloomington, Indiana, a nice place to visit. Hmmm..."Bloomington, Indiana" doesn't work, so I'll just try "Bloomington." Voila! A list of places to stay! I'll click on the first one. Nice, but not right...so how do I get back to the list? Ahhh...there is a breadcrumb that I can follow, so I click on "Bloomington" here:

Home > USA > Indiana > Bloomington

That works pretty well for me. Do I love it? No, but I'm not lost, either, and that first link I clicked is now purple, indicating I have already been there...I'm one happy navigator. If I now want to go back to that search widget, I'm smart enough to remember it was on the Home page, so I'll click on the logo in the upper left. That works!

Now take a look at the navigational item "Rental Guarantee." It takes me away from the VRBO site with no warning, and no associated navigation. Once I am done there, the only way back to VRBO is with the "Back <" button. Even with a procedural end point like the process for a rental guarantee, this is not good, because I have no context on what else I can accomplish there. Perhaps this could open up in a separate window? The same thing happens with the newsletter, but links on the newsletter then take me back into the VRBO site. I'm pretty lost, and the difference in the look and feel has me confused. Web sites exist for one of two reasons - to answer a question or to accomplish a task. If the question being asked is: "where in the heck am I?", you are not providing a quality experience.

Where have I been, what have I done?

Another of the criteria is whether your audience can tell where they have been and what has already been accomplished, and are you placing related information together? For an example on this one, let's take a look at the social site, Facebook. I'm a fan of a Northern California winery called Cade. So let's say I want you to become a fan. How do I do that? It is not on my personal page, so maybe it is on the "Home Page". Nope. So I'll search on "Cade Winery," display their page, and there it is: "suggest to friends". I do that. And when I click on that link, the people I have already suggested this to are grayed out. Nice! I don't get any confirmation back that the people I have invited confirmed or ignored my suggestion, which would be nice, but I can live with that.

There are some significant navigational and structural problems with Facebook. The first is that there are no followed links. You can never visually tell whether you have already looked at something. I'm sure it is a conscious decision by the Facebook designers to ignore followed links, and it is interesting to think about why they do that.

The second problem is the lack of differentiation between "Facebook Home" and "Home", and between "profile" and what shows up as your name in the blue navigational bar. Am I missing something, or when I click on those is the only thing that changes the ads I'm shown? The result is that people tend to use just two areas of the navigation - "Home" and the personal page.

The third problem is a tendency to group dissimilar actions together. An example of this is when you click "change your profile picture" (which, when you get there, is mis-labeled "edit your profile picture".) On that page, notice how some of the headers are action-oriented (Upload Picture, Remove Picture), while others are informational (Thumbnail version). The thumbnail version only applies to your current profile picture, so it should be located separately from the other items, and it is not an action-oriented label. "Select a profile picture from your Profile Picture Album" is hidden under the current profile picture, and that is what I am usually looking for! A bit of re-organization would make this page significantly easier to scan and use.

How do I get Home?

This criterion is all about finding your way back Home. I don't think we need too many examples for this one. Either a link to "Home" or a hyperlink on a logo will work here. What I see often, though, are three annoying, related mistakes.

The first is the use of multiple meanings for the label "Home". What designers do here is to architect sections of a site that are very different in form or function from the others, and assume that "Home" is relevant in each of them. It is like having a first home and a vacation home, but calling them both 'my home'. It is still a problem on Facebook, although it is better than it used to be. Now, when logged in, there is the choice between "Facebook" with a Home icon next to it and "Home". I don't see any difference between what they do, so why have them both? I'm sure someone has the answer to that, but I certainly don't.

The second is with the use of Adobe(TM) Flash(TM) software introductions. They are annoying enough just to have to see them to view once, but to have to see them again when navigating back to the Home page? The bottom line is that anytime it gives you an option to "skip", then it shouldn't be there in the first place.

The third is with the overwhelming tendency people have today to use Wordpress as the primary technology for a web site. The world's longest Home pages are almost always on Wordpress. Blogging is great, but it is more about feedback, not completing tasks. There are things that can be done with Wordpress to make the navigational experience better, but it usually takes an experienced developer to make them work, and if you need an experienced developer, why not do it correctly from the very beginning?

Can I get there from here?

Finally, is there a clear path to the next page, step, or transaction? If there is a process involved, is it easy to see where to start and where to go next? If there are multiple branches, is it obvious how to consummate the transaction? This is, of course, most important with an e-commerce application. If you can't give me a clear path to discover, research, and buy, I won't. Complex applications such as buying mutual funds and renting hotel rooms can be a little trickier to analyze, both because you may need to complete the transaction to fully follow the process, and because there may be legacy technologies behind the scenes that are significant obstacles to a clean process.

In summary, know what the audience wants and decide whether the site or application you are reviewing is giving them the opportunity to find it. There are seekers and wanderers on the web. Both want to find what they are looking for quickly and easily - if they don't, they will go elsewhere, and your clients won't even be aware of it.