The Beauty of a Simplified Navigation

Interactive. Consistent. Minimal. Those are all words commonly heard when talking about website navigation. But there is another word that should be included in this list: simple.

A simple navigation is one of the more beautiful elements found in web design. It combines the best traits of interactive and minimal designs, while promoting consistency throughout a website. You can identify a simple navigation by these two important features:

1. There are only three to seven sections of your website present in the main navigation, not including any found in a drop-down or mega menu, or in any secondary navigation.
2. At no point are the navigation links hidden behind an icon or button by default, even on a mobile view, or, the navigation may be hidden, but a clearly labeled button used to reveal it is always visible.

While these features may sound like small changes, they can have a big impact on the usability of your website. Today, we’ll explore the benefits you can obtain by switching to a simple navigation.

Improved Content Organization

Simplifying your navigation will significantly impact the organization of your website. Switching to this style often involves combining sections of your website under a single heading, requiring you to restructure both your navigation and content for a better user experience.

Content-Based Structure

Most websites use a content-based structure, and with good reason. With a content-based structure, your pages are put into a logical order according to what users are looking for, making it easier for them to navigate your website.

One example of this would be Cafe Rio, as they have separated out their menu, daily specials, manifesto, catering, and rewards program, in addition to location and ordering.

Another example would be Dribbble. Their website is broken down into different categories people may be looking for: shots, designers, their blog, their podcast, meetups, and jobs.

Audience-Based Structure

Structuring your website based on your audience can be useful if you expect there to be several groups of people using your website. With an audience-based structure, your website will be broken down into sections that represent the current user.

One example of this would be the University of Nebraska-Lincoln. Their navigation shows they expect visitors, prospective students, current students, and faculty & staff to use their website.

Another example would be the Humane Society of Charlotte, as they are expecting dog adopters, cat adopters, people in need of clinic services, volunteers, and people looking to donate to visit their website.

Better Communication

It shouldn’t come as a surprise that when you change what your navigation looks like, you also are changing the way you communicate with your users. Typically a simple navigation will feature only one word per section label, so those words need to be chosen carefully.

Object-Based Labels

Object-based labels are commonly seen in websites, and tend to carve out specific areas for your content to go. Pages are assigned to various categories, and these categories are named using a single noun. Hak5 shows this by listing their about, forums, shows, subscribe, and store pages separately.

Action-Based Labels

By using action-based labels in your navigation, you tell users to take the next step by giving them reasons for their visit to your website. Pages are assigned to activities users would participate in, and these activities are named using a single verb. TED shows this by providing links for watching, discovering, attending, and participating.

More Intuitive & Engaging

Finally, by using a simple navigation, users will be encouraged to explore your site and find it overall easier to navigate. However, the exact benefit you’ll get depends on what sort of action you take when it comes to mobile devices and small screens.

Intuitive

If you choose to leave your navigation links out in the open on tablet and mobile views, rather than hiding it behind the commonly-used “hamburger menu” or another style button, then your users are likely to find your website navigation to be more intuitive.

Momentum has a very intuitive navigation, as the experience is identical on both desktop and mobile. They even were able to leave their navigation links in the same location.

By hiding your navigation, you add an extra level of complexity to the website. Some people may not even recognize the button used to reveal it, while others are hesitant to open it because they aren’t sure how the navigation will appear or if they’ll be able to see the entire navigation at once. By not doing this, you take the guesswork away, making for a good user experience.

Engaging

That being said, leaving your items out of a “hamburger menu” doesn’t work for every website, especially if you’re at the maximum seven links or if you depend on a drop-down menu for users to further explore your website. In this case, the navigation is hidden, but the button used to reveal it is always visible.

Even though your navigation might not always be visible, making sure it can be opened no matter where someone is on your website still makes for a great user experience. In order to engage the user, inspire them to click on the button by clearly labeling it as “Menu” or “Explore”.

Subaru does a great job of making their navigation engaging. Not only is their menu clearly labeled when on mobile, but they also have quick links to “Build” and “Retailers”.

Conclusion

If done correctly, simplifying your navigation can improve usability and benefit your website in many different ways. However, if done incorrectly, it can hurt user experience. It’s up to you to decide what’s right for your website!