8 Tips For Planning Your Website NavigationTuesday, July 8, 2014
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.
8 Tips For Planning Your Website Navigation
1) Your main menu should have no more than 7 items.
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:
- Are two menu items similar enough that you could combine them?
- Do all of these need to be top menu items, or could they become secondary menu items?
- Could some items be placed in a utility menu?
2) Each menu item should be no more than 2 words.
Be clear and concise when naming your menu items.
- “Contact” is better than “Get in touch”
- “Donate” is better than “Contribute to the Children’s Fund”
- “About” is better than “About the Children’s Fund”
3) Arrange items based on importance.
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.”
4) Write for your audience.
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.
5) Place universal navigation items in a “utility menu.”
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.
6) Don’t make reeeaally long dropdown menus.
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:
- Does each submenu item actually need its own page? Is there a substantial amount of information that warrants a unique webpage, or just a couple of sentences that could be incorporated onto another page?
- Could some of these “secondary” submenu items be moved into a “tertiary” submenu—in other words, another dropdown within the dropdown? (Please note that you should never have more than two levels of dropdowns.)
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.
7) Use call-to-action buttons to direct visitors to your most important pages.
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.
8) Use fixed navigation.
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!