#UX101: Navigation design and best practices

Whether you are designing a website or a desktop or mobile application, you’ll need to provide a way for users to get to what they want or need. Hence, you will need to provide some form of navigation.

How should you let users navigate your content or functionality? First, you should consider the conventions of the “platform” you are working in. For example, iOS applications have recommendation navigation conventions you can follow. Whether you follow these conventions or not, at least get familiar with them so that you know the “rules” you may be breaking.

There are several different ways to present navigation items, and examples of these different models conventions are easy to find throughout the web. Let’s take it from the “top”, shall we?

Top Navigation

This is the de facto standard in web pages for less complicated web sites, in that it provides more horizontal space for content and works well for most web sites. It is easy to scan (since most users read left to right) and provides big “targets” for visitors to click.

Side Navigation

This is more “scalable” in that it provides designers the ability to list more than seven items. It’s a little less easy to read and reduces available horizontal space, but it is an effective alternative to top navigation when there are a lot of navigation items.

Drop-down/drop-list Navigation

This navigation model uses a drop-list to display the navigation items, which allows for the navigation area to have a smaller “footprint” in a UI. The only problem is that “Hides” options from users, and many search engines don’t “read” this type of navigation very well… I recommend that this model be avoided.

Icon-based Navigation

This is often seen in mobile apps, and can be presented as headers or footers or the full navigation/icon set be displayed in a “launch page” fashion. This navigation model is limiting, in a couple of ways. First off, you can only put so many navigation items on a screen (and scrolling shouldn’t be used with this model). Second, icon design is not easy – you have to represent the content/functionality that is accessed through the icon in a way that is simple and obvious, and if this content and functionality is “obscure” it may be difficult to design an icon that represents it affectively.

Search

Yes, search is a method of navigation. In fact, the widespread use of search has “trained” users that this is the quickest way to access information, and the use of traditional navigation has been reduced. This is not to say that traditional navigation should be removed and replaced with a big search box… instead, make sure that the search results that your site or application provides are accurate, well presented, and useful.

Navigation best practices 

Now that you know the different types of navigation models, how should you use the one that you have decided works best for you? Here’s some “best practices” that you should follow:

Limit menu items to no more than seven (when possible)

Why seven? Because seven is less than eight, and the more navigation items you have the more complex the site or system will appear to users. This will result in “cognitive overload” for many users, and this anxiety over the number of choices provided will often result in no choice being made at all.

This is the reason why Amazon removed the top-level tabbed product category navigation several years ago: Customers were intimidated by too many options. They solved that problem by providing a prominent search box in its place and a (hidden) side navigation section. Follow their lead, and keep things as simple as you can.

Use specific descriptive terms

Don’t be generic; be explicit and specific in the terms you use. When people are looking for a section or a piece of information they want to not have to “figure out” what the navigation item means… it should be obvious what it means. Make sure that navigation items align with what users say and use, so that they don’t have any confusion.

Avoid jargon

An exception to the above rule: If the specific descriptive term for a content area or piece of functionality is a piece of “jargon” that is not well known to the typical user, replace it with a simpler term that is more obvious and understandable.

If you need “sub-navigation”, keep it simple

Depending on the complexity of the site or system you are designing, you may need to provide “sub-navigation”: secondary navigation items that are “children” of the primary navigation. If you do this, only have one level of this secondary navigation, and keep it simple: Again, follow the “no more than seven items” for any specific sub-navigation list.

Supplement navigation with (accurate and quick) search

As previously noted, search is the new way people are accessing information. Present a prominent, accurate and quick search area to support users who ignore navigation and go straight to search.

Align with conventions

Users come to sites and systems with preconceived notions and expectations, and these conventions should be reflected in the navigation elements that are presented. For example: A “Contact” option should be towards the end of the navigation section, because that’s where people expect to see it. Changing from this convention just to be “different” will result in additional cognitive load for users, which is not a good thing.

Logo should always bring user back to the home page

This is a no-brainer, and one of the “conventions” that is listed above. Users expect that clicking on the logo will bring the user back to the home page… so always do that.

Use analytics to inform navigation placement

If there is a content area that is more frequently accessed by users, move it to the “top” of the navigation (which, in the case of top-level navigation, is on the left of the list).

Use “breadcrumb” navigation (if it helps)

Breadcrumb navigation is a small navigation area towards the top of a content area that lists the “path” that the user took to get to the page they are on. This gives users a sense of context and “place” and allows them to “go back” quickly. The use of this UI element has reduced over the past few years (potentially as a result of the search-based navigation that users are now doing) but is still a helpful convention to apply in many situations.