I am available for freelance work - HIRE ME

Thinking of Navigation as Navigation

posted by Matt Ward on Oct 9, 2010.

Though it may be obvious and perhaps even cliched to say, navigation is an important aspect of web design. But, just what is navigation? In this article, we will look at navigation as navigation, discuss what it isn’t, address the problem of creativity and ultimately consider the larger implications of it all on our work as designers.

In my last article, I took a look at exactly what it is that constitutes a website, and tried to show that it is about more than just HTML and CSS, though those are certainly important. Instead, what I suggested was that the true essence of a website lies in the seamless interaction between all of its various parts, from the back end scripts and databases on the server, through to the client side code and, of course, the content itself. I also pointed, or at the very least hinted at, the importance of structure and organization.

Though increasingly popular, single page websites are still a very small minority out there on the interweb. Most websites have at least a handful of different pages, and many large corporate, information or publication sites literally have thousands and thousands of pages. The same is also true of nearly all the various social media and social voting sites that are so good at distracting us from the things that we should be doing.

With all those pages and all that information sitting out there on different sites, it’s clear that navigation plays a huge role in web design and development. After all, the best information in the world doesn’t do a site any good if nobody can actually get to it. If bots and crawlers can’t find it, you don’t stand much of a chance of making it on the search engines. If your users can’t find it, it will just sit there, collecting cyber dust, like an old manuscript tucked away in your great uncle’s attic.

So, navigation is a critical part of design, both in terms of usability and SEO.

Yet, I have to wonder if many of us are just approaching the entire issue from the wrong perspective. You see, navigation is not about menus. It’s not about bread crumbs. It’s not even about links. All of those things are important, and are tools that we use to assist us, but they do not constitute the full scope of navigation in and of themselves.

The Goal of Navigation

Ultimately, navigation has to be understood as being more than just a simple menu or site map. To illustrate this example, we need only take a look at the history of the word in question. The original concept of navigation is not something that was invented with the birth of the internet. It’s not a process born out of cyberspace, but rather something that was devised right here in the real world, thousands and thousands of years ago to help people get from one physical place to another!

In the real world, navigation is about using a variety of recognizable signs such as landmarks, stars and even a GPS, in order to help us get through the process of travel. We use these various signifiers to establish our bearings, and then to point us in the right direction. Wikipedia puts it this way:

Navigation is the process of reading, and controlling the movement of a craft or vehicle from one place to another.

Obviously, when we’re talking about the web, there is no literal vehicle (though you could apply the term metaphorically to the browser). That being said, navigation on a website should ultimately be about the very much the same thing. Various recognizable signifiers tell the user exactly where he or she is on the site, and help establish smooth and seamless travel from the current location to any other page. This, of course, can often be easier said than done, especially for very large sites, on which it is impossible to link to every existing page. Still, this kind of smooth navigation should remain the goal for any and all websites!

Not Just a Menu

I’ve already touched on this briefly, but it bears mentioning again: a menu is not the same as navigation. In fact, if we really look at the words, a menu has absolutely nothing to do with navigation. Fundamentally, all a menu really consists of is a collection of choices. When I go at sit down at the local restaurant for lunch, the server brings me a menu that lists all of the different dishes that I can choose to order. Other than perhaps getting food from the kitchen into my stomach, it really has nothing to do with moving from one place to another.

On a website (just like in an application), a menu is really very similar to what’s offered to me at the restaurant. It presents me with a series of choices from which I ultimately make a selection. The primary difference is that, instead of deciding what to eat, I am selecting from a collection of active links that will either take me to a different page or execute some sort of functionality on the site.

That does not constitute navigation in its entirety. Users can also navigate a website using basic links, bread crumbs (which differ from menus in their linear structure), archives, site maps and even search functionality.

So, am I suggesting that we stop using menus? Not at all! Menus are a hugely important website convention that users have come to expect on sites. Getting rid of them would be a huge usability faux pas, and would be tantamount to shooting ourselves in the foot. My goal here is simply to stress the importance of not thinking that navigation begins and ends with a site’s main, or even secondary menus. It’s a much broader function.

Simplicity in All Facets

Now that we’ve established that menus are still an important part of navigation (just not the only part), and we’ve determined that the purpose of navigation is to help users move from one part of the site to another with as much ease as possible, it may be tempting to begin constructing massive drop down menus that contain links to every conceivable page.

Stop! Don’t give into that temptation.

We’re talking about making things easier for the user here, not about crushing them beneath the full weight of an overflow of information. Several months ago, I read an article by Francisco Inchauste (more commonly known to the community simply as Finch), entitled “The Myth of Design Limitations”. In that article he wrote that

we have to recognize the disadvantages of freedom. The Paradox of Choice is the abundance of options we have in our grocery stores, shopping malls, and in this case, choices for our designs. There are a lot of great things about having so many choices. There is also of course a downside. A plethora of choices increases paralysis due to the overwhelming amount.

The context for this passage was more talking about limitations in design than about navigation, but I think that this same paradox of choice also applies to the current discussion.

The process of choice is one of eliminating a variety of options, ultimately narrowing things down to a single selection. The more options you introduce, the wider the scope of that process becomes, and the more difficult it is for the user to narrow down his or her choices. This increased difficulty is, in all likelihood, going to lead to increased frustration, and that is the complete opposite of what we’re trying to accomplish through well designed navigation. We want to make user’s experiences easier and more enjoyable, not more difficult.

I like to think of it this way: if I am driving down the highway and come to a split in the road, I don’t need a massive collection of signs telling me the name of every single community that I will pass in each direction. Just show me a couple major cities. That should be enough get the nose of my trusty Mazda pointed in the right direction. If it just so happens that none of those major centres mean anything to me, then that’s what the map is for!

So, try to keep your menus (and other forms of navigation) as simple as possible and try to think of your navigation more in terms of sign posts or landmarks by which users can find their way around your site. Then, if they need a little help, your site map or search function can provide it for them!

More than Just Creativity

Another thing that needs to be addressed when it comes to the concept of navigation in web design is this whole issue of creativity. There are all kinds of “inspirational” roundups and list posts out there that showcase interesting and creative forms of navigation. A problem begins to emerge, however, when “creativity” becomes synonymous with “good” or well “designed”. There are all sorts of unique and interesting things that we can do with menus and other navigational items – especially with the ever increasing power of CSS and JavaScript frameworks like jQuery. Armed with the power of animation and hover states (except on touch devices, of course), we have all the firepower we could ever need to drive those old, boring navigational items right out of town!

Sounds great, doesn’t it? Well maybe it is, at least until you log into your analytic and see the incredibly poor click through from your home page!

Remember what I said about keeping navigation simple? Sometimes this can mean reining in your creative juices. If I don’t want a thousand signs pointing me to every community down the road, I also don’t want wonky signage that is only readable with infrared glasses, or which blends so beautifully into the background that I really have to look for it. I don’t want the text to be set in some fancy typeface, and I most certainly don’t want to have to pick it out from amidst an excessive array of graphics.

The same is true of navigation.

A few months ago, I wrote an article entitled “5 Basic Usability Breakdowns You Want to Avoid”, in which I talked about “make me guess menus”. These are a perfect example how creative navigation fails. Basically, they involve menus where the actual name of the item is not revealed until after you hover over it with your cursor. Issues of touch screen devices aside, this kind of thing actually hinders navigation. Instead of presenting the user with clear options, it actually forces them to play an irritating guessing game until they find the desired menu item, again potentially leading to frustration.

More often than not, this sort of thing just strikes me as an attempt to get creative with navigation. Unfortunately, in cases like this, the creativity tends to backfire by severely hampering the overall usability.

Implications on Design

All of this discussion about navigation – from its goal, to it being more than just a collection of menus, through to simplicity and creativity – are all important and have a particular bearing on the process of design. Instead of just creating a standard (or even a creative) menu at the top of the page and thinking that we’ve taken care of all the required navigation, we need to consider it in the larger context of helping users move through the site.

Turning back to the same Wikipedia article that I cited above:

All navigational techniques involve locating the navigator’s position compared to known locations or patterns.

The big question, then, is not how to style your menu, but rather how can you use a collection of patterns and recognizable signifiers to help users both determine where they are and how to get to where they want to be, all without cluttering the page and offering so many options that they don’t make any choice at all. Your menu is a start, but navigation also means looking at things like your titles, links, header, sidebar, footer, bread-crumbs and so forth. How do they all work together to help inform the user of where they are? How do they help offer a path to somewhere the user may want to go?

These are all important questions, and to be quite honest, I don’t think that I am necessarily doing the best job with navigation even here on Echo Enduring – especially on the portfolio side of things. While I’m definitely not going to completely redesign the site, when I get a bit of extra time, I’m will sit down and see how I can tweak the design to help make it easier for you guys to get around!

What about you? What kind of process do you use when approaching navigation in your designs? Do you look beyond just a simple menu system? What other elements and techniques do you use? I’d love to hear about your thoughts and ideas on navigation!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Oct 11, 2010

dedide says:

Great post, Matt. The comment on wayfaring not just being the menu rang very true. I hate “tricky” menus that require a high degree of manual dexterity to traverse and don’t help you to figure out where to go next.

Your blog is really racking up a great score on article quality.

Oct 12, 2010

Bryce Wisekal says:

Once more, an amazing article. Gave me a lot to think about that before I wouldn’t have considered. I do appreciate your time in making this available to us. Thank you!!

Oct 12, 2010

Himanshu says:

Even i am worried about the same for our new website to be launch in few days from now. During testing, it took me 5 minutes to find signup link.
We are using javascript (or some framework) to bring up ‘sign in’(like rediff.com). Somebody told me that instead of using javascript, signin text boxes should be on located on home page itself. I would like to have your say on this.
There are very few articles which give such kind of insight. Article was written in such a way it tends to bind the reader till the end.
Thank you for a such a great article.

Oct 16, 2010

Nils Geylen says:

I like the posts here. You write well and take the time to think before you do.

I haven’t worked on very large sites so will never have to face the issue of navigating visitors through thousands of pages, Amazon style.

To me however, a menu is just a part of the navigation. A menu can be the horizontal list of pages we tend to see on most sites. It could also be just three graphics at the center of a home page that showcase a company’s main products (think Basecamp).

The navigation then, would be the total of such a classic horizontal menu, calls to action, icons and graphics, and all other internal links (e.g. ‘read more’) including the site map.

That of course makes navigation so important: it ensures all pages are reachable, and it allows you to steer visitors in a certain direction without limiting their options.

I say I like the articles here, because this is what I would love discussing with people over beer if the people I know had a clue what I’m on about ;)

Cheers!

Nov 13, 2010

burman says:

U r article about navigation as navigation has dealt with the navigation of a site in great detail and I feel that while planning the navigation aspect of a site several factors have to be taken into consideration for designing it which means the seo optimization plays a quite important role in designing the navigation part

Leave a Comment

Links

  1. CSS Brigit | Thinking of Navigation as Navigation

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014