The navigational structure of your website can make or break the user experience of your site. Trying to navigate a site without a well-defined, user-friendly structure is like being dropped in the center of a complex maze with no map and no frame of reference. It’s overwhelming, confusing, and generally unpleasant—not exactly the experience you want to put your potential customers through.
Let’s be honest: Creating a good navigational structure for your site is easier said than done. It requires extensive user research, generating test ideas based on that research, and making frequent, iterative changes to your site. However, if done correctly it can make a significant impact on your website’s conversion rate. Here are eight key principles you can utilize to start optimizing your site’s navigation.
8 principles for improving your website’s navigation structure
1. Remove your drop-down menu
When the options in your drop-down menu are fairly complex, unfamiliar, or extensive, consider replacing the menu with a detailed page. There are a few key reasons why you should consider eliminating your drop-down menu:
- Research has shown that dropdown menus are an annoyance to users. Visitors move their eyes around faster than they can move their mouse. When they mouse over a menu item, they’ve already decided to click on it but then the menu expands giving them a plethora of new options to process. To a designer, the drop-down menu seems like a great idea; to a user, it’s just inconvenient.
- Drop-down menus will impact how search engines are able to crawl your site for keywords. If important keywords for your business are hidden in a drop-down menu, it may significantly hurt your SERP rankings.
Head Wines eliminates the drop-down menu altogether and opts for a condensed sidebar menu on their site.
2. Make searching frictionless
Site search is one of the most important yet most overlooked aspects of your website’s navigation. Visitors who use site search typically have a high intent to buy and are much more likely to find what they’re looking for if they can easily search for it. Typically, up to 30 percent of visitors will use the site search box, so it’s important it’s optimized for the best user experience.
If your site has a sticky navigation bar, make sure your search bar is included in it and has auto-fill functionality, so customers can find what they’re looking for in as little time as possible. Wayfair’s sticky search bar suggests up to eight relevant products, which eliminates the frustration of having to search for products that may or may not be in the site’s catalog.
3. Avoid thematic naming conventions
Made up or thematic words increase the amount of thinking that your customers have to employ to shop. Your customers are not there to be entertained by a logic puzzle. When your customers are on your site, you don’t want them to waste any time thinking about anything other than what they came there to purchase.
Below is an example of the Duck Commander ecommerce site with themed navigation focused on duck hunting. Although Duck Commander has chosen a theme that’s appropriate for their target audience, several of the navigation choices give little context to the links. New customers may have to explore multiple pages before they can locate the duck call or apparel they’re looking to purchase.
4. Re-list category sub-choices
Common UX best practices typically recommend that you don’t repeat content on your site. It can be frustrating for users to see the same content in different places. However, navigation is one of the few exceptions to this rule. If one or more of your category pages naturally fits into two categories, you should list it in both.
Looking to REI’s ecommerce site for inspiration. For example, they list the “Backpacks” sub-category under multiple sections. A customer who is interested in buying a backpack might look under “Travel” or even “Camp & Hike”—whichever category they select, they’ll find REI’s full selection of backpacks available under both sections.
In this example, both navigation choices probably seem obvious. But you’ve probably noticed users often defy your expectations. Usability testing definitely comes into play when optimizing your site’s navigation; watch how visitors try to find their way to specific pages, and look out for common trends.
You don’t want to overdo it and list every sub-category under multiple headings, but if you identify a trend of users struggling to find a specific product or category, just make it easier for them to find. If visitors are consistently having trouble identifying the appropriate categories, your labels are probably either misleading or incorrect (or both).
5. Add a mega footer
Navigational fatigue is definitely a real thing—and when your site has a complex hierarchy, users quickly get tired of expanding sub-menu upon sub-menu.
Mega footers are an optimal solution. A footer is essentially a safety net placed at the bottom of your site for visitors who are lost on your site. They provide a bird’s eye view of the key pages on your site so visitors can quickly jump to the specific page they’re looking for.
Take a look at Uber’s mega footer to get an idea of what should be included in your mega footer. The footer should be used as an extension of the main navigation menu at the top of your site.
6. Choose your menu order strategically
If I asked you to buy 12 things from the grocery store, chances are you’d come back with the first two items, the last two items, and maybe one of the middle items. That’s thanks to the serial position effect, which shows people have the greatest recall for the first and last items in a list.
You can take advantage of this effect in your navigation design. To drive visitors to your most important links, place them at the beginning and end of your site’s navigation menu.
7. Make your navigation bar dynamic
In today’s ecommerce environment, it’s almost essential to have a dynamic navigation bar on your site. With more than half of ecommerce traffic being driven by mobile devices, your website’s navigation should be just as user-friendly for mobile users as it is for desktop users. The easier and more engaging your navigation experience is, the more time users will spend on your site. Don’t abandon them in a maze—hand them a map.
Grain & Mortar has a dynamic navigation bar that flawlessly resizes to fit whatever screen you’re viewing from. Their sticky navigation bar is also helpful for mobile users so they can browse different areas on the site without having to scroll up to the top of the page to see the menu.
8. Keep it simple
The goal with every navigable element you create is to use 1-3 simple and compelling words to describe what the customer will see when they click on the link or category.
The objective in this is to provide understanding rather than entertainment; your site’s purpose is to sell, not to delight. If the labels on your site are clear, easy to understand, and compelling, you’ll have greater success in converting your browsing shoppers into customers.
Divvy keeps their site navigation to a bare minimum. Their goal is to help visitors understand what the product is and why it’s unique, and then get them to request a demo. Having minimal site-navigation like this is a great way to simplify the user experience for your customers.
It’s time to start optimizing
The more engaging and simplified your navigation experience is, the more time users will want to spend on your site. Don’t force visitors to navigate through a maze of pages and links to find what they’re looking for. If you’re not actively trying to figure out new ways to improve your site’s navigational structure, you’re leaving money on the table. From our experience, one of the best quick-wins for improving the conversion rate of an ecommerce website is to assess and redesign it’s navigation.
If you’re actively looking to optimize your site for a higher conversion rate, sign up for a free landing page assessment where we’ll take a closer look at the structure of your site and identify problem areas that could use improvement.
This post was written by David Hoos at The Good, who helps some of the world’s largest companies convert more of their website visitors into buyers through their A/B testing and data-driven redesign services.