<img src="https://secure.leadforensics.com/78315.png" style="display:none;">
Growth Driven Design

6 Examples of Great Website Menu Design (and Why They Work)

Your customers and prospects simply don't have the patience for confusing web design.

Kissmetrics reports that navigation has a bigger impact on usability and user experience than almost any other factor in how your site is designed. As consumers increasingly adopt technology to research, shop and communicate, expectations for fast-loading, easy-to-use websites are skyrocketing. Some 40% of your prospects and customers won't return to your site if their first experience with it is negative - regardless of how great your products or services are.

Your website's menu is a gateway into your website, allowing visitors to navigate to the information they need. Modern consumers are notoriously impatient, and confusing navigation structure will cause your website's bounce rate (the percentage of visitors who leave immediately) to skyrocket.

Characteristics of Excellent Website Navigation

Above all else, a good website navigation structure is easy-to-use. This factor carries an immense amount of weight in how your brand is perceived by first-time website visitors. As user experience blogger Dmitry Molchanov highlights, your navigation can confuse and frustrate, or it can build trust in your organization. Usability experts estimate that some 50% of sales are lost because potential customers can't find the information they need. Here are some characteristics the world's most effective website menus have in common:

1. It's Intuitive

Consumers form first impressions of a website in just 0.2 seconds. The average prospect spends just 6.48 seconds interacting with a navigation bar. If your website navigation isn't simple enough that visitors can immediately tell where to find their desired information, your menu design is probably to blame.

The golden rule of web design for usability is "Don't Make Me Think," which is also the title of an excellent book on user experience. Your consumers don't have the patience to brain-power their way through hacking your menu structure. Using it should come naturally.

2. It's Deep, Not Wide

Unless your website consists of six pages, you can't cram every option into your primary navigation menu. Instead, design a "deep" menu, where each option represents categories. Each category can lead to an easy-to-use sub-menu of relevant options. To be clear, sub-menus aren't your only option, and website developers have creative freedom when it comes to presenting sub-categories of information. However, keeping your primary menu from appearing crowded is critical.

There is no hard-and-fast rule when it comes to a maximum number of options that can appear in your main website navigation. Conventional usability wisdom dictated between five and nine items. However, this rule can vary according to brand. Keeping your menu simple, and opting for a "deep" presentation of information with sub-menus instead of a wide, hard-to-use navigation bar matters.

3. Menu Items are Clearly Labeled

We've had clients who were opposed to using the word "blog" in their website navigation structures because that word has a negative connotation in their industry. We maintained that calling the blog section "articles" or "resources" would have a negative impact on user experience because it's less clear. Turns out, our internal data indicated it did. Always opt for simplicity and clarity.

The value of creativity in naming website menu items is pretty limited. Often, opting for anything less than the most obvious choice or most common primary menu items will frustrate site visitors. If someone is seeking your brand's contact information and it's buried in a sub-menu or named something really odd like "where to find our treehouse," you could lose the opportunity to win leads and sales.

6 Examples of Stunning Website Menu Design

1. Squarespace

squarespace

Squarespace's unique, dual-menu design offers first-time visitors the ability to access an abundance of information, without suffering from navigation overload. The primary menu features most commonly accessed pages while the secondary menu allows access to far more site pages. For brands with a complex product or an abundance of relevant information, the dual menu design is something to consider.

ss2

2. Long Short Story Design

lss

By far the most atypical menu in this list, Long Short Story manages to break many conventions of user-friendly menu design and still have an incredibly easy-to-navigate website. The simple, three-item menu at the bottom of the page works because the brand's site is so visual-heavy. Contact information is available upon scrolling, and the ability to sort and search is featured on internal site pages.

3. Edwin Europe

edwin-

The denim brand's website features sidebar navigation, which is a rising trend in the usability realm. It allows users constant control over how they navigate the website. In the case of Edwin Europe, the side bar menu items are highlighted as visitors navigate throughout internal site pages. Sidebar menus are an excellent choice for mobile-optimized websites because they scale well and are easy-to-use on any device, from full-sized desktop computers to smartphones.

4. Bad Assembly

ba1

The term hamburger menu is used to denote the clickable, stacked icon that reveals hidden menus on full-screen websites. In the case of Bad Assembly, this web design tactic is used to its full advantage. The functionality allows the design to shine, appears well thought-out, and is consistent with the brand's visual-heavy approach.

ba2

5. Uber Brand Guide

uber1

Brand style guides have historically been presented as a large document, complete with headers. Uber's approach to digitally presenting their brand guidelines excels at presenting a large volume of information in an easy-to-use, intuitive format. Users can quickly and easily navigate through this simple, forward-thinking menu.

uber2

6. Sparked

sparked


Sparked's menu features a slightly more traditional approach to navigation, with the modern twist of a hamburger icon. This works so remarkably well because the initially hidden menu serves to enhance the site's ultra-clean first impression.

sparked2

Making the Best Navigation Menus

Clear and intuitive website navigation guards against frustrated first-time website visitors who bounce off your site to visit your competitor. A well-designed menu is a sales asset that can seamlessly guide your prospects throughout their research process. If you're unsure how your menu stacks up, take a moment to review it carefully. Better yet, run some usability tests with individuals who've never seen your website before. If there's a hint of frustration, consider redesigning with these guidelines and examples in mind.

Free Ebook: Why Responsive Web Design

Written by Ryan Scott / September 24, 2015

is the Inbound Marketing Artist at Lean Labs. His marketing experience ranges from colleges to SMBs, and tech startups. When not marketing, he's sure to be enjoying something nerdy.

Articles by Ryan Scott