As designers, we all get a little bored of using the same old website navigation patterns, which is understandable in a field of creativity & innovation.

But there’s only so much you can mess with and maintain the consistency and practicality that users demand. The reality is that website visitors use a mix of search and navigation to move through content on websites. You need to create a pattern that includes both features in a usable format to engage and keep users moving through content.

It starts with leading-edge navigation. We’re going to look at a few crucial rules so that your navigation concepts are always spot on, plus a few ways to spice up some of those mundane navigation menus to create even more visual interest and user engagement.

 

Essential Rules for Great Navigation

Great navigation starts with the basics. The reality is there is only so far you can diverge from common user patterns and maintain success.

Why? Users are creatures of habit.

When it comes to navigation, there’s an expectation that key elements will be readily available at the top of a page, often in a horizontal format, but that isn’t always necessary. Hamburger and hidden menus are also generally accepted, particularly with younger users that are likely to access the website on a mobile device, thus knowing the target audience is helpful.

When it comes to navigation there are some guidelines to help you maintain consistency, focus user behavior on key elements and provide a valuable experience.

 

  • Provide consistency: The navigation menu should be in the same location and look the same on every page of the website design. Some pages may include different navigational elements, but navigation should always look like navigation.
  • Interactivity should be obvious: Users should not have to think about how to use navigation elements. Look and click. That’s it. It should work every time regardless of the style of navigation you select.
  • Don’t put it on too thick: Gone are the days of the mega menus with layers upon layers of information maybe save for a few cases. That’s what search is for. Navigation elements should be simple, direct and lead users to the most searched and clicked pages in the website design.
  • Make sure it’s responsive: This almost goes without saying, but there should be navigation – that works clearly – for every device type.
  • Include search: One of the most usable elements on your website is the search function. In this Google world, users want to find things quickly and are tuned in to using search. Ensure that your search function is easy to find and provides clear results.
  • Don’t go over seven items: Too many navigation elements is overwhelming. Think of navigation like a newspaper headline. Give users the most important facts and they will find everything else. Plus, fewer items in the nav helps search, provides enough space to ensure typefaces are readable and makes it a lot easier to create flow between elements without feeling crowded.
  • Order accordingly: Users are most likely to click on the first and last elements in a row of navigation options. Use these positions for your most important navigation choices.
  • Check the analytics: There’s no exact science and every website can be a little different. Monitor your website’s analytics regularly to ensure that navigation patterns are flowing as expected. If a certain element isn’t getting clicks, consider changing the position or label. Look at what users are searching for on your website and if that information is not in the navigation, maybe it should be.

 

3 Ways to Mix It Up

I know rules may seem limiting, but there are clever methods to experiment with navigation patterns with traditional menus to give users a pleasant series of options. Here are a couple ideas for inspiration:

 

01. Replace Drop Downs with Visuals

All navigation doesn’t have to be text links. Consider a more visual format such as image choices to help guide users visually.

 

Visual Dropdown Options

 

 

Warby Parker, an international eyewear company with an online store, uses eye-catching navigation cues to help guide users through the buying process. Every element helps the user make a choice in buying their products. Note the first choice – eyeglasses or sunglasses. The user clicks the navigation element that relates to their need. Then there’s a second choice – shop men or women. With just two clicks any user can get to the set of products they are looking for and are ready to shop without feeling overwhelmed. This is one reason the online retailer is rated so highly for online sales.

 

02. Create Audience Specific Menus

Chances are your website will not communicate with just one type of person but rather multiple audiences all the time. Create navigation patterns that speak directly to these users and help them find just the information they need.

 

Audience Specific Menu

 

 

Uber is a great example of a design that targets users and then establishes a navigation pattern that is just for them. While the look of the navigation is rather simple and traditional with the horizontal bar at the top of the page, it works beautifully. The audience immediately selects whether it is a customer (ride) or potential contractor/employee (drive). Additionally, there’s a sidebar form at the top right of the home page that also serves as a navigational element to further help segment the audience, getting them to the right information within the website.

 

03. Make the Most of the Footer

Big, fat footers are in.

Did you know a lot of users actually scroll to the footer to look for information they don’t see in the main navigation? Designers have almost “trained” users into looking in the footer for elements such as an email signup form, social media links, contact information and more. So if you are looking for a place to really give users more information and navigational information, a chunky footer can be the perfect spot.

In terms of design, it is out of the way at the bottom and won’t interfere with other techniques. In terms of usability, it can be a friendly location for additional information.

 

Fonts Infographic

 

 

A Maze N Fun’s illustrative footer entertains the eye and includes contact information, social media links, as well as a form to directly email the company’s sales department. We could also incorporate plenty of other great navigational information as well, such as wholesale information, jobs and other highly searched options as secondary navigation.

Another bonus with this navigation design? The sticky menu at the top remains in view even when users are looking at the large footer; that way every user has access to all navigational elements at the same time.

 

 

Conclusion

Spicing up your website navigation menus doesn’t require a full-scale redesign. It’s a mix of looking at analytics to see what users want, planning ways to engage those users and providing information in an easy-to-use format.

When you are planning any design change, remember to stick to the fundamentals to ensure usability when playing with some user functionality. And have fun! Creating navigation menus does not have to be a chore; these are integral parts of the overall design.