Published: Tuesday, July 8, 2014 | Tags: navigation, web design, Website
Table of contents:
Every great website begins with well-thought-out navigation.
Your website’s navigation is how visitors (and search engines) move throughout your website and access your content. It has to be logical and easy to use. The quality of your navigation can mean the difference between delighting your visitors and irritating them.
When we say “navigation,” we are referring to your main menu, call-to-action buttons, utility menu, and any other menu on your website. Planning your website navigation involves creating a site map—an outline of every page on your website.
Here is an example of a simple site map that only has top-level (blue) and secondary submenu (green) items:

The general rule for great navigation is to keep it as simple as possible, while still making it quick and easy for visitors to access the information they want.
Now, let’s discuss specific tactics that you can apply to your own website navigation.
If your top-level menu has too many items, it will look cluttered and overwhelm your visitors. Plus, keeping your menu simple allows you to draw focus to your most important pages.
If you do have more than 7 items, think about whether you can reorganize some information:
Be clear and concise when naming your menu items.
For example:
Studies that measure eye movement and visitor behavior found that the outer edges of your main menu get the most attention. When determining how to order your menu items, follow this layout:

The far right menu item is where many organizations place their most important call-to-action. For your organization, this might be “Contact,” “Join,” or “Donate.”
Use words that will resonate with your audience. The economic development website for South Central Kentucky, for example, has a menu item called “Site Selection” that directly addresses their site selector audience.

There are certain links that are expected to be on your website, because they are on all websites in your industry. Examples of these are Home, Contact, Member Login, Hours, About Us. These types of links usually just navigate to one page—no dropdown submenu is required.
Rather than cluttering up your main menu with these links, you can place them in a “utility menu.” A utility menu is smaller and less prominent, and is usually placed above the main menu.
Montgomery County Association of Realtors uses a utility menu to link to Home, About Us, Contact Us and Newsroom.

Dropdown menus are the submenus that appear when a visitor hovers over a main menu item. These allow visitors to locate the page they want without having to click through to an interior page. (Ideally, visitors should be able to get to any page on your site in 3 clicks or less.)
However, it’s important to make sure your dropdown submenus aren’t extremely long. If your submenu drops down so far that it goes off the page, you have too many items.
Here are some ways to make your dropdowns shorter:
The Evelyn Rubenstein JCC of Houston has a lot of information to organize, but they do so efficiently by using secondary and tertiary submenu items.
.jpg)
Placing buttons alongside your navigation menu is a great way to distinguish and draw attention to your most important links. To avoid clutter, stick to just 1 or 2 buttons.
Crisis Assistance Ministry uses three call-to-action buttons to drive the most important visitor behavior.

As web pages become longer, a navigation menu that sticks to the top of your browser window is a necessity. If you don’t already have fixed navigation in place, consider adding it.
Planning your website navigation is the crucial first step in building a new website.
Take it seriously, and take your time.
Think about your audience. Think about which pages you want them to click through to. Think about the words that would resonate with them. Always choose simple over complex, and logical over artistic.
Now go forth and create great navigation!
Also, check out our posts Looking to Increase Member Engagement on Your Website? Improve Your Navigation With These Tips and 10 Fantastic Real Estate Web Designs for some great website tips!
