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.
Know your Ambiguous Customer: Effective Multi-Channel Tracking
Wednesday, June 5 at 1pm ET - Learn why a move from the "batch and blast" email approach enables better conversations with your customers.
Register today - don't miss this free webinar!
Tim Ash is CEO of SiteTuners.com, a landing page optimization firm that offers conversion consulting, full-service guaranteed-improvement tests, and software tools to improve conversion rates. SiteTuners' AttentionWizard.com visual attention prediction tool can be used on a landing page screenshot or mock-up to quickly identify major conversion issues. He has worked with Google, Facebook, American Express, CBS, Sony Music, Universal Studios, Verizon Wireless, Texas Instruments, and Coach.
Tim is a highly-regarded presenter at SES, eMetrics, PPC Summit, Affiliate Summit, PubCon, Affiliate Conference, and LeadsCon. He is the chairperson of ConversionConference.com, the first conference focused on improving online conversions. A columnist for several publications including ClickZ, he's host of the weekly Landing Page Optimization show and podcast on WebmasterRadio.fm. His columns can be found in the Search Engine Watch archive.
He received his B.S. and M.S. during his Ph.D. studies at UC San Diego. Tim is the author of the bestselling book, "Landing Page Optimization."
June 5, 2013
1:00pm ET / 10:00am PT
June 20, 2013
1:00pm ET / 10:00am PT