Best Practices for Optimizing Your Navigation

Header navigation menus and sub-navigation menus are one of the most common ways of navigating through a website, therefore the most critical to optimize. There are many best practices you should adopt for these major navigation menus.

Location on Page

It’s generally considered a best practice to have either top navigation (under your header), left navigation (in a vertical column), or a combination of both (with the top nav serving as the primary, and the left nav as the deeper secondary). This left-hand navigation menu is nearly always employed by e-commerce websites as a way of browsing deep-sub categories.

However, depending on the number of important sub categories you have, it might be best to move the major navigation elements to the left. Even Amazon has moved toward a left-side navigation over the years, as its growing number of categories made the traditional tab-based top-nav structure unwieldy.

Number of Elements in Navigation

Be careful not to overwhelm your visitors with all the possible main choices or categories on your website. The most effective navigation schemas present only the key categories that appeal to the broadest majority of visitors. Navigation items like “Contact Us” and “Help” should rarely form main navigation tabs, as these belong in the top right-hand corner of your website instead.

If possible, limit your website to less than seven items in your main navigation and sub menus, as studies have shown that seven is the limit that humans can process and remember simultaneously. Navigations offering more than seven options run the risk of overwhelming visitors.

Simplify Your Navigation Wording

Carefully consider the wording used in your navigation elements. Avoid using jargon or technical speak, or words that aren’t intuitive to your website visitors. This is a fairly common website mistake that can easily be remedied with some careful consideration and replacement – dumb down your menu wording whenever possible, and test alternatives to see which versions get more clicks.

Use Drop-Down Menu Functionality

Website visitors have become increasingly fickle, and like to explore websites without having to click very much. Help visitors do this by providing drop-down menus that show the breadth and depth of what is available at the sub-category level.

Some websites are evolving this simple drop-down menu functionality even further by adding more visual elements and tools to please their website visitors. Clinique has a great example of this advanced drop-down menu functionality. It has even added tools and promos in its navigation – essentially creating micro-landing pages out of each drop-down menu.

Highlight Where Visitor Currently Is in Navigation

Your navigational menus should always highlight where the user is in relation to the rest of the website. This is particularly important when a visitor arrives to a page deep within your site, usually from a search engine, and doesn’t have the same context and understanding as a visitor whose path started at the home page. Simply applying a different color to a navigational tab to indicate an “active state” is an easy way to achieve this. The same applies to any secondary sub-navigation that the visitor is currently under.

Simplify Left Navigations With Expanding Sub-Menus

Offering a tree-like expanding navigation menu on the left-hand side is better than offering a flat navigation menu. This is because it takes up much less space than a fully expanded menu with all choices shown at once, and it doesn’t overwhelm the visitor with too many choices. It is also helps the visitor understand how your product or service offerings are organized.

Other Navigation Best Practices

It never hurts to state the obvious, so I’ll close this post with a few of the more traditional best practices you should follow on your website to help improve navigation and usability.

Offer breadcrumb functionality in the top left portion of your main content area. This states the parent sections of the page that the visitor is currently on and helps the visitor understand where they are in relation to the rest of the website. This is particularly important for visitors who arrive deep within your website from a search engine.

Create a well-organized site map and place a link to it in your website footer. This site map needs to list and break down each section and list all the pages found in each one (or show sub-sections if it’s a very deep site or an e-commerce site).

Make your logo clickable on every page and have it return the user to the home page after they have clicked it (and it’s usually best to have the logo in the top left of your website).

This article originally appeared in Tim’s ClickZ column September 20, 2011.