Website navigation: How to plan a joyful user experience

Happiest place in cyberspace

Creating a clean website navigation plan is like designing an amusement park — you’re going to have a lot to do, a lot to see, and a lot of information to make available without overwhelming your customers. It’s not an easy task. Thankfully, there are a few patterns and guidelines that can get you started.

But nothing is set in stone.

Designing a user interface (UI) and planning the user experience (UX) is an art, not a science.

Extremely competent designers will regularly disagree on even the most mundane things, and often neither are right. If something works for you, run with it. With that said, there are a few key navigation components that most will agree are important:

Page titles

While not strictly a navigational component, if a user doesn’t know the title of the page they’re on, navigation is difficult, at best. Making the title of your page match, as best as possible, the link that got the user to the page is a good place to start. Keep page titles simple and short, as they are what search engines will use as initial hints.

Tool-tips

Some designers dislike tool-tips, claiming that they create clutter on the page when the user hovers over an element with a tip. Our recommendation is to not listen to those designers, as users have come to expect most elements to give more explanation using tool-tips. Taking it a step further, putting the tool-tip on a specific element for that purpose — like the exclamation point in the blue circle glyph (which has become somewhat universal for the purpose) — makes it clear that a bit of instruction is available.

Branding

There’s no rule that you have to follow convention at every turn. Make your site navigation reflect the branding of your website. Make the “home” element in your menu recapitulate your logo, for example. If you have graphical buttons, use them in a theme that uses your logo or branding as their design. Be creative!

A way to get from there to here (and back)

Your navigation must be ubiquitous. It should appear on every page and should always give a way for the user to return from the path they’ve taken to reach any site. At a minimum there should be a link to the home page and most major sections of the site to allow for immediate movement across your site.

There also are a number of key concepts to keep in mind when you’re planning your site’s navigation:

Grouping

Miller’s Law states that the number of objects an average person holds in their working memory is seven, plus-or-minus two. Thus, many designers argue that items should be presented in groups of five. This presumes the lower range of human capability, perhaps, but it makes sense when planning website navigation. Take five as a guideline and not a requirement, though.

Breadcrumbs

Yes, there are times when breadcrumbs don’t make much sense. But when they do — like for a large online catalog or nested discussion forum — they can be incredibly valuable tools for navigating up and down a complex tree-like structure.

Consistent color

Some websites look like someone fired a box of 256 crayons at a wall. While this might be interesting if you’re designing a site for psychedelic rock fans, in business, clean is king. Pick a color scheme and stick with it. Three-color and four-color schemes establish anchor colors from which all further design can flow. Your website is then consistent. An awesome tool to design a color scheme is Adobe® Kuler. Give it a try and experiment!

Guiding color

If your website has distinct sections, consider using color to identify them. Making menu items pull in a particular color for a particular section, and then having pages in that section incorporate the color in their theme, will subconsciously educate your users that when they see a particular color they should expect a particular kind of content. This is a subtle design trick that can pay dividends if done well.

Modern standards

Heraclitus got it right: ‘The only constant is change.’

If you embrace this concept, you will be redesigning your site every year or two. You knew the job was dangerous when you took it, right? That said, explore responsive design and modern menus that change based on the device with which users are viewing your website. Don’t stick with a single menu type for your site’s navigation. Use a large-form with drop-down menus for desktops if you must, but know that such a menu simply won’t work on a small smartphone. Learn the modern standards, follow them, and be prepared to jettison them for newer modern standards as they gain popularity.

Whitespace is not your enemy

That’s actually the title of a great book on Web design. Avoid the compulsion to crowd your site’s navigation with closely-packed buttons and links. Space them out and give them room to breathe. This will allow your users to better read them and realize the different navigational options on your site.

A Goofy example

Remember our amusement park analogy? There are a number of patterns used in designing website navigation, and one of them is a pattern that amusement parks — most notably Disneyland — also employ: the hub-and-spoke model. Think back to the last time you were there. You entered the park, took a stroll down Main Street USA and found yourself in the center of the park. To one direction was Frontier Land, and to another was Adventure Land. Turn to your right and you saw the entrance to Tomorrow Land. You were standing at the hub and were presented with a number of spokes that you could follow.

Here’s where it gets interesting. As described in John Hench’s Designing Disney, there were several reasons park engineers chose hub-and-spoke. Among them:

  1. It facilitates decision-making.
  2. It prevents guests from getting lost.
  3. It prevents tiredness and boredom.

Now apply those reasons to successful websites and their navigation strategy. While hub-and-spoke is just one of many excellent patterns, with seven plus-or-minus two spokes on a central hub, your website navigation could be off to a solid start.

And remember Miller’s Law. It makes for great bar conversation!

Image by: Justin in SD via Compfight cc

Christopher Ambler
Christopher Ambler is a Senior Architect at GoDaddy who writes sleek, performant, low-overhead Java and Scala code. In his copious spare time he can be found playing poker or listening to progressive music not in 4/4 time. He recently relocated to sunny California from Seattle. Christopher blogs at Bit Parts, and you can also find him on LinkedIn and Facebook.