goodnav Design

How To Design Effective Navigation Menus

Navigation menus are the key to finding what we are looking for on a website. Without a navigation menu that meets our expectations, a website will most likely not be effective. A website that is not effective will most likely not be successful. There are many different kind of websites that range from simple to extremely complex. In any case, a good design should focus on the users and their goals: Finding certain information as quickly as possible.

By glossing over a few examples I discovered, I will go over best practices that help you nail your navigation menu.

Position

The position of your navigation menu is very important. People follow certain patterns when they first take in your site. According to Nielsen, our attention on websites follows the pattern of the letter F. We focus the most on the top of a website and on the left side from where we briefly scan the main elements in the content area. Also we avoid to scroll down a page wherever possible, which means we mainly focus on content that is positioned above the fold.

We use patterns to understand and learn how things work and to get an idea of what to expect. In his article Brains Agree: The Case for Website Usability Guidelines, Todd Follansbee explains why we love patterns so much and that we look for them on the Web just like everywhere else.

Even though a lot of websites, especially those creative in nature, deviate from these patterns, do your users a favor and stick with patterns they are familiar with.

Make sure you design your navigation menu as intuitive and easy to understand as possible. Meet your user’s expectations and place your navigation either at the top or on the left hand side of your website and don’t ever place it below the fold.

On very top


Discovered by Paul

Twitter developers use a very clean navigation that it positioned at the very top of the site. This position perfectly meets user expectations and not only that, it stays visible as you scroll down the page. We are used to finding main menu items on the very top of the screen as this is how most computer programs are set up. For example if we leave aside this content for a second to change some browser setting, we also find the menu on the very top.

Between header & content


Discovered by thnkco

Ngen works use a classic navigation menu that is positioned on top of the site between the header and the content area. Despite the diagonal position, this menu is very easy to find. Even though not at the very top, it is still positioned on before the content. People will automatically pass this when scanning the page. This is a perfect example of how to implement a unique design and still offer a great usability.

On the left


Discovered by Claudio

Divwrap placed their main navigation menu on the left hand side of their site. The overall design of the site is very clean. The minimalistic look and the amount of white space literally free the navigation bar from the rest of the design. This way it stands out, which makes it very easy to find.

Simplicity

The key to an effective navigation menu is to keep it simple. No matter how many content categories you have and how many pages you might need to link together, don’t ask too much from your users. Depending on the complexity of your website, this can be the most tricky part of your whole design.

Make sure to set up your information architecture before you decide on a design for your menu. User testing techniques, such as focus groups and card sorting will help you to match your content to your users’ mental schemata. It is very important to group content items and define categories in a way that makes sense to your users.

Minimal design


Discovered by Usabilla

Apple is probably the most classic example for minimal design. Their navigation menu is very clean and clear and nothing distracts the user from the different content categories.

Small number of categories


Discovered by Usabilla

BBC has as one of the world’s leading news sites an enormous amount of information targeted at users with different interests from all over the world. Still, they manage to wrap all this information into meaningful categories, displaying only the most popular seven categories in their navigation menu. Less popular information is also easy to find under the menu item More.

Tabbed navigation


Discovered by Usabilla

Filament group use a tabbed navigation, which is a great choice for the little number of pages. The navigation menu is self explaining and the user immediately sees that they can choose between four different pages to find the content they are looking for.

Wording

After the information architecture has been defined and all content has been structured in a logical way, wording plays an important role for the effectiveness of your navigation menu. You can have all the information on the right spot, if you your navigation items are called differently than expected, they are still difficult to find.

Try to use wording that your users are familiar with. Don’t invent creative categories just for the sake of being creative. Choose wording that is simple and to the point.

Classic wording


Discovered by Usabilla

Threadbird use common and very clear wording for their navigation bar. The different categories, such as Service, Pricing, and Portfolio are self explaining and the user users immediately knows what to expect behind them.

Wording with context


Discovered by Claudio

Epic adds context to the wording they use for the navigation bar. They embed the word in a whole sentence, which even makes the rather abstract word Working” clear as it becomes *What we are working on.

Personal wording


Discovered by Usabilla

Games for her by you don’t use classic wording for their navigation menu, but through putting themselves in the position of the users, their navigation is still very clear. They use the kind of questions the user would have when looking for the different categories. This makes the navigation not only clear, but also very personal.

Color

Colors can be used in different ways to make your navigation menu more effective and easy to use. You can for example highlight active menu items or build a color scheme for different content categories. This will help your users identify and recognize the different areas of your website. Besides, colors are also very important to smoothly integrate your navigation menu in the rest of your design.

Highlights

A modern eden use the design’s basic color to highlight both the currently selected page and any other menu item on hover. These highlights give a very visual and clear feedback of where on the page the user is and what other options there are.

Categories


Discovered by Sabina

CSS-Tricks use a very clear and inviting color scheme for their navigation menu. As the user hovers over the different content categories, the menu item changes its color. Every category has its own color which is also displayed when the user visits that page. This color scheme is very clear and appealing.

Integration


Discovered by mva

Appstorm sticks with a simple black and white navigation menu to perfectly match the rest of the site design. Through the big icons and the prominent position, the navigation is still very easy to find. The colors of the hover over effect match the colors of the different categories. As the category changes, the whole color scheme changes.

Icons

Last but not least there are icons that help to make a navigation bar more usable and effective, but also more personal and fun to use. Compared with word links, icons are visual, which makes it easier for us to remember them. Recognition of different content categories lets us browse a website more efficiently, especially if we are not visiting for the first time.

When you use icons for your own navigation menu, make sure to choose clear and meaningful icons, make their style match the rest of your design, and add personality to your site.

Clarity


Discovered by Usabilla

1st Web designer use icons to visualize and illustrate their different content categories. The icons they chose are very specific and meaningful and add to the value of the navigation menu as they represent the different categories and help users to find what they are looking for.

Consistent style


Discovered by Usabilla

Amazee Labs have a very characteristic style for their whole website. For their navigation menu they use icons that perfectly match the style of the site. The icons help to draw attention to the navigation bar and at the same time they perfectly integrate the same into the site.

Personality


Discovered by Claudio

Tumblr uses very visual, colorful and meaningful icons in their menu. Tumblr is a social service that enables members to share different digital content. Every kind of content has its own icon. The icons are all wrapped in an abstract text bubble, which reminds the user of an actual conversation and makes them very personal.

2 comments

  1. Uwe

    I do think it is called “Apple”, not “Appel” ;-)

  2. Paul Veugen

    Thanks Uwe, corrected the typo :)