Adobe Creative Cloud

July 20, 2015 /

Navigation Design 101

“Wait, so what am I supposed to do here exactly?!” – is the last thing you want your visitors to ask themselves when they’ve just come across your site for the very first time.

Navigation design can be a tricky thing. And especially if you’re leaving it for last – making it this one final element that you will optimize nearing the whole project’s completion.

Such an approach simply can’t end up well, and it’s surely not how good navigation design is done.

What’s particularly challenging here is that navigation design is about much more than just what menus you’ll use and where you’ll place them. It should all start much earlier. In fact, you need to be working on your navigation from day one when planning out your next website design.

Therefore, what you’re reading here is a shortened guide – navigation design 101. The number one thing we’ll be focusing on here is separating the things that matter for proper navigation design from those that don’t.

Starting with:

First-time impression is where the game is won or lost

We all have at least one website in our bookmarks that we enjoy visiting despite its horrible navigation design, haven’t we? We’ve somehow learned to navigate around it and consume its content, regardless of the navigational difficulties.

What I’m trying to say is that, over time, your regular visitors will learn how to interact with your site, no matter how inconvenient the navigation design might be.

Your first-time visitors, however, they are a completely different breed. They almost certainly won’t have as much dedication and drive to struggle through.

That is why when working on your navigation design, you should focus on first-time user experiences above all else. It’s the first impression that will either invite the user to come back or scare them off completely.

Good navigation begins with good content structure

It’s quite simple, actually:

Content first, then menus.

Navigation design should never be an afterthought, but instead, should be a direct result of the information architecture that’s on the website.

In other words, the way you design the content structure of the website is what influences the way you’re going to be designing the navigation, and not the other way around.

One possibility and a good way to begin prioritizing and designing the information architecture of the website you’re working on is through the card sorting method.

Card sorting is an offline approach, so to speak, where the participants use actual cards (pieces of paper) to organize individual topics into categories. You can find out more about the method here.

Always think about *your* goals

One school of navigation design teaches that we should always first focus on what the user wants to do – take care of their goals first.

This may be a sound strategy in some cases, but it’s not always the best one from a business point of view – in relation to what your (or your client’s) business goals for the site are.

Instead, organize your navigation according to where you want the users to go, not necessarily where they would go themselves.

But perhaps I should rephrase. This isn’t about doing things against the user’s intention. This is about drawing a connection between the user’s goals and yours.

You can do so by creating user personas and defining the goals of those personas (in relation to the content that your site is going to offer), then make your site the intersection of their goals and yours.

For example, users may want to be able to filter your list of downloads to see the free offerings only, but is it the best decision from a business point of view to allow them to do so?

Instead, you can find a better solution somewhere in the middle by displaying a full list of downloads, but giving the free ones additional focus (so the user will be able to distinguish the free stuff, but they will also be exposed to other, paid offerings).

woo

Predict the user’s mindset

This is about predicting the mindset that the user is going to be in when visiting your site.

Mainly, do they know what they’re looking for, or do you need to help them out?

Let me give you two examples here:

  • Example #1: Google. Whoever comes to Google knows exactly what they’re looking for. The only thing they need is a search field where they can input their term of interest, and off they go. The core of the navigation is this one main search field.
  • Example #2: standard blogs. The average blog visitors may not know what they’re looking for exactly. They know that they want to consume some good content, but when it comes to the specific post they’re going to be served, it’s on you to provide it to them. In this case, you need a more elaborate navigation structure than just a search field. You need menus, you need categories, perhaps archive pages and so on.

Therefore, depending on your visitor’s expected state of mind, you need to design your navigation accordingly. If there’s a disconnect, the visitors won’t have a clue on what to do on your site, or won’t be able to consume any of the content.

Navigation needs to feel familiar

One of the most common mistakes that designers make when building a website is being too creative with their approach towards navigation.

Although creativity is hard to resist, especially since every other aspect of website building requires a lot of it, it’s always better to go with tried and tested methods when it comes to navigation design.

Above all else, navigation can’t be confusing. Every user should be able to recognize a menu right away without having to wander around looking for clues.

Not just my opinion, by the away. I asked Robert Hapiuc, designer for the CodeinWP blog, to share his point of view on the top mistakes that web designers make with navigation design. Here’s what he said:

The most common mistake is trying to apply creativity to all aspects of the navigation menu, without thinking about the UX. Yes, you can have a very creative website, but when it comes to navigation design, always think about UX first, then allow yourself to be creative in other areas.

In short, make your navigation structure easy to scan, and don’t go over the board with creativity. Instead, be as obvious as possible with your menus and other site elements that make up the navigation.

Moreover, don’t be too creative with your navigation presentation either. For example, material design animations are fine, but making them too elaborate and complex will put people off and decrease usability.

And most importantly:

Don’t discard standard web conventions

Various web conventions have been with us for years for a reason. Things like shopping cart icons in the upper right corner of the page, or login/profile links in the same place.

Users have grown to expect seeing them there, and trying to come up with a new concept will only cause confusion.

So a general rule of thumb is to stick with existing web conventions, make them fit into your design, and don’t reinvent the wheel just for the sake of it.

Give enough visibility to the main content

Constructing your navigation around the main content of the site is a good starting point.

The whole card sorting experiment mentioned earlier will give you a good overview of what the main content categories are and how significant of a role they play for the whole website. However, you also need to look into the individual pieces of content that are key to the site’s offering.

For example, there’s nothing bad about linking to an individual piece of content from the top menu of the site if it’s significant enough.

Don’t fall into a trap of building your navigation around just the main content categories or sections.

alltop

Such an approach may be good for a directory site (like Alltop), but it won’t be effective over the long term for other types of websites. That’s because designing navigation based on categories alone requires the visitor to already be more or less familiar with what they can expect to find in each category.

(There’s a similar problem with drop-down menus, more on which in a moment.)

What types of navigation to use

Is the type of navigation you’re using important? Is there any significant advantage of using, say, top nav menus vs. mega menus? Are drop-downs the way to go?

Like usual – and as much as I hate saying this – it depends.

Different navigation types are optimal for different situations, but you need to know their traits in order to be able to pick your model accurately.

Standard, top nav bars are the most common and possibly the most practical of all the navigation tools. Their only inconvenience? They can just fit so many elements.

However, that’s not necessarily a flaw. Using a top bar menu requires you to prioritize the elements that make up the main navigation and pick just the things that are the most important. Also, it makes the choice for the users easier. After all … less is more.

Having too many things in the main navigation is also something that Dragos Bubu, web designer at ThemeIsle, points out as the main mistake web designers make when working on site navigation:

One of the most common mistakes that comes to mind is when a website with lots of content gets cluttered when the designer doesn’t make it easy enough to access information.

This way, you get stuck with a lot of items in the main navigation, making it harder for the audience to find the important stuff.

As a rule of thumb, you should consider having no more than seven items in the top-level navigation. If the sheer complexity of your system cannot be contained in those seven items, you can use drop-downs for a broader view.

One of the more fashionable navigation choices these days is placing a menu to the side. Overall, it can be a good solution for some sites, but mainly the ones that feature a lot of content categories, which sometimes become the content themselves. And also for sites that offer filters that the user can adjust dynamically when browsing through the main content block. A little site called eBay is a good example here.

ebay

The downside of those menus is that they may focus too much of the visitor’s attention and decrease the visibility and appeal of the main content block.

Finally, we have one of the most controversial type of menus, the drop-downs.

Essentially, there’s nothing wrong with drop-downs as a navigation tool. The problem is that many web designers turn to them whenever they run out of space in their main nav bar.

For instance, they label the very last link in the menu “more” or something similar, and then feature everything that didn’t fit in the main menu inside a drop-down.

Not the most optimized solution. This decreases the usability of the whole site because the user doesn’t have any ability to predict what might be inside such a menu, therefore they have no incentive to click on it.

As a rule of thumb, drop-downs are generally only good for lists where the visitor can 100 percent unmistakably predict what will be inside the menu. For example, if you need the user to select their state, or city, or country, drop-downs are perfect. But when you need to display a set of standard menu items, they’re not.

Also, include additional visual clues when using drop-downs, for instance the triangle symbol that suggests to the user that there’s something more available when they hover their cursor over the menu.

Go for long-term success

Like with most things web design, you’re much less likely to design the right navigation structure on your first try than you are by coming back to your design after a while and improving it then.

In short, examine the patterns, track how people behave on your website and what paths they follow. Over time, you should be able to improve the efficiency of your navigation by making the most commonly used elements more visible, and moving some of the less used stuff to the background.

What’s next?

Navigation design is a wide topic if you really want to master it. And there are still lots of things we didn’t discuss in this guide, for instance: how to handle information layout on individual content pages (where to place images, text, links), using advanced navigation mechanisms such as separate pages, site maps, tag clouds, fixed navigation, and so on.

But how about we leave all of that for next time, and stop right here to let the information sink in.

What do you think? What are your strategies to designing effective and functional navigation?