Admit it. Sometimes you just get bored with the same old website navigation patterns. It’s OK. We all do.
But there’s only so much you can mess with and maintain the consistency and usability 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 great navigation. Here, we’re going to look at a few essential rules so that your navigation concepts are always spot on, plus a few ways to spice up some of those same old navigation menus to create even more visual interest and user engagement.
Essential Rules for Great Navigation
Good 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 re 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 user base that’s likely to access the website on a mobile device.
When it comes to great 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. 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.
- Use descriptive labels: Don’t try to get fancy with navigation labels. Tell users exactly where a click will take them. This serves a second purpose as well. These descriptions help clue visitors in to who your company is and what it does because navigation labels will likely align with products or services.
- 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
Now that you feel good about creating a navigation pattern that users will want to click, you can mix it up. Some of the best navigation patterns don’t even feel like navigation at all. Think of how many homepages you land on that are a series of options – that’s navigation!
If you plan to try a more experimental navigation pattern, consider using it with a more traditional menu as well. Here are a few ideas to get started with
01. Replace Drop Downs with a Visual Format
All navigation doesn’t have to be text links. Consider a more visual format such as a row of images or image choices to help guide users visually.
Warby Parker uses cool navigation cues to help guide users through the buying process. Every element helps the user make a choice in buying eyeglasses. 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. (This is one reason the online retailer is rated so highly for online sales.)
02. Create Audience Specific Menus
Your website might not communicate with just one type of person. Changes are that you are actually speaking to multiple personas and audiences all the time. Create navigation patterns that speak directly to these users and help them find just the information they need.
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 traditional – there’s a 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). In addition, there’s a sidebar form that also serves as a navigational element to further help segment the audience sets, getting them to the right information within the website design.
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, the footer can be the perfect spot.
In terms of design, it is out of the way and won’t interfere with other techniques. In terms of usability, it can be a super-friendly location for additional information.
Elum makes the most of two levels of navigation with a simple header menu that outlines products and services (great for an online shop). The footer includes plenty of other great navigational information as well, such as wholesale information, jobs and where to find products. It’s likely that these secondary, footer navigation elements are some of their most highly searched on the website and make a great choice to include in this format.
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.
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.