Simplify Your Navigation for Better Usability

Web design and usability go hand in hand. Focusing on the latter will almost always improve the former. The navigation of the website is the most important piece of the user experience and the overarching usability. The menu is the steering wheel used to navigate your site. It should be simple, intuitive, and predictable. Often times designers and clients alike struggle to plan and make efficient and usable navigation systems.

Here is some advice on ways to make your navigation easier and more user-friendly.

Aggregate and Consolidate

Have you ever been to the restaurant, the Cheesecake Factory? The menu is the size of a short novel coming in at a whopping twenty-one pages long.

Source: thecheesecakefactory.com

It’s overwhelming flipping through the pages trying to make a decision with three hundred and sixty seven different choices. (Yes, I counted.) The first step to good navigation is to consolidate the number of choices and remove any unnecessary bulk. I always ask the question:

What value does this provide for the user?

Can we eliminate the page? Can we consolidate the content into another page? The goal is to have as few choices as possible. Navigation should be a funnel leading you from overarching category to specific end goal through logical grouping. Generally, I like to limit the number of main menu options to a maximum of seven or eight.

Your main menu does not need separate options for an about page as well as a mission, team, location, and history page. You should have an about category with smaller subcategories leading to each individual page. Maybe your mission statement should be on your about page. Do your users need to know your entire history or will an intro sentence with your founding date suffice? Reduce the clutter and improve your usability.

Labeling

Labeling these categories and subcategories properly is a crucial step in making your navigation usable. Remove all of the adjectives. Use short, predictable words that are descriptive and to the point. Don’t say “What We Do” when you can just say “Work.”

Give users only the information they need to understand their choices. Too much or too little information is bad. Use keywords that your target market is familiar with. Icons, pictures, and short descriptions can help when a label is unfamiliar to the user. A user icon for a profile or a gear icon for settings will work because they are generally accepted web standards that users are familiar with.

Predictability

Making your navigation predictable is a key component to maximizing usability. Don’t surprise your users. They are used to a certain regular set of practices. The logo in the top left and a horizontal menu bar next to it or below it is the standard practice. For larger sites with more pages, a vertically stacked menu positioned on the left is fine. Subcategories are hidden and displayed with dropdowns.

All of these things are part of the general status quo of web design and you should stray from them with caution. Otherwise, you risk alienating your users and decreasing engagement. The more time it takes a user to make a decision, the less usable your site is and the less conversions you will have.

Hierarchy

In the western world, the general rule of thumb with hierarchy is that people read from left to right and from top to bottom. But, to fully understand this concept you must understand your users and how they use your site. You should determine the major user paths and rank the options accordingly. Place the most important pages and categories to the left and towards the top.

There are a few exceptions to this rule that have become generally accepted. The contact page is usually found all the way to the right in the main menu. Also register and sign in links are usually placed in the top right of the header. The home option should be first in the list unless of course it is removed altogether. And remember, the logo should always link to the homepage.

Responsive Design

So now that we’ve set the general ground rules for simplifying the navigation of your site from start to finish, let’s address the curveball that is responsive design. While there are tons of different screen sizes, let’s just examine the tablet and mobile sizes.

If you followed the above guidelines of aggregating and consolidating, labeling, predictability, and hierarchy it should be easy to scale down your menu to fit onto a tablet. I generally like to center the logo and menu and have the menu go the full width of the screen. If the labels are longer, I’ll force the menu to display on two lines.

Scaling the menu down to work on mobile devices is a bit trickier. But luckily, there is a generally accepted solution that is becoming the standard: the collapsed hamburger icon menu. While, this approach violates some basic usability guidelines because it hides all of the most important navigation options, it has become a common practice and thus predictable. Screen real estate becomes one of the most crucial hurdles on a mobile device, and this solves the problem by minimizing the footprint of your menu until your users need to interact with it. Remember to properly label it.

In Conclusion

I often preach the concept, KISS or “Keep it simple, stupid”, and it certainly applies to creating efficient navigation systems. Generally, the simpler the better. Your users arrive on your site for specific content or to perform a specific task. It’s our job as designers to make sure they spend as little time navigating to the respective page as possible. Focus on minimizing the number of options and properly labeling the main categories and subcategories. List them in a logical order according to importance and make them predictable by following generally accepted practices of the web. This will result in functional and user-friendly systems that will lead to more conversions.