How easy is it for users to find their way around your site?
If you’ve ever been frustrated trying to find something on a website, you understand just how important navigation can be. There are many different ways sites can organize their navigation menus, and some are more effective than others.
While there’s not necessarily a “best” solution, some options can be better in certain circumstances. If you’re not sure if your navigation design is effective, here are a few things to consider.
Horizontal vs. Vertical
When it comes to placement of a navigation menu, there are essentially two options: horizontal or vertical.
Horizontal navigation, also known as top navigation, is the most common, though some designers will argue that it’s not necessarily the most effective. Horizontal/top navigation does have a few benefits compared to other types.
For one, it’s one of the first things visitors will see when they land on your site, so it’s easy to find. It helps users answer the question “where do I need to go to find what I’m looking for?” – the answers are all at the top of the page.
But there are also some limitations. For instance, you can only fit so much text into the top navigation bar. If you have multiple pages on your site you want featured in your navigation, you may have to use dropdown menus or a combination of top and side navigation.
Just using vertical navigation can have its benefits as well. Side navigation allows you to stack relevant content and give a hierarchy to the order of your menu items in a way that a standard horizontal alignment won’t.
You can also place your menu on either side of the page, which frees up room for other creative focuses (though there is some debate about which side works better). This can be handy if you don’t necessarily want your navigation to be the first thing someone sees when landing on your page and you want them to look at an image or some other element of your site instead.
On the other hand, side navigation can be cluttered if too much content is featured. It’s difficult to do a dropdown menu as side navigation, so if you have a lot of content to feature, it’s not necessarily your best option.
So which is preferable? It depends. For content heavy navigation and usability, a horizontal menu is probably best, and for those who want to free up space or stack content, side navigation works well.
In some instances using both options – essentially having navigation in an F-shaped pattern – may actually help improve conversions, as in the case of a directory or e-commerce site.
Dropdown vs. Scrolling
Dropdown menus are one of the most popular options for site navigation with a lot of content. Dropdowns are almost always used with horizontal navigation and are typically used for sites with more than a few pages of content.
However, the use of traditional dropdown menus has been on the way out in the last few years with the addition of static scrolling and parallax scrolling menus. There are several reasons why many designers are switching from traditional dropdown menus to scrolling menus.
For one, usability studies show that many people find excessive dropdown menus annoying. Dropdowns can also be difficult for search engines to index, which can harm SEO.
Scrolling menus can be more effective than dropdown on mobile devices, especially in terms of usability. Many site designers are now creating desktop sites that mimic mobile sites to create cohesiveness and improve functionality.
Scrolling menus also give users access to more content right away. Instead of looking at a few navigation items and trying to guess where they go, they can be given more context in a scrolling menu.
But that doesn’t mean scrolling is necessarily more effective than dropdown for your site. If a user knows where they want to go – they want to learn about your company, for example – but don’t have a quick way to get there on a scrolling menu, they may become frustrated having to sort through too much information to find what they want.
Ideally, users should be able to find what they’re looking for quickly, so the best choice of navigation between dropdown and scrolling is the one that gets them where they need to go the fastest.
If you have a lot of content, dropdown menus (as long as they’re well organized) can help minimize space and create context for the user to weed through your site. On the other hand, if you have a few menu items and you want to present more information for your users, scrolling or parallax scrolling menus may be better.
Visible vs. Hidden
Another menu variation that can be combined with any of the options above is hiding your navigation under what’s known as a “hamburger” menu. The “hamburger” is an alternative type of dropdown menu that replaces a standard navigation with an icon:
Once clicked, the icon reveals the full navigation list. You can also use the word “Menu” in place of the icon. It can be used with side or top navigation and can even be combined with scrolling navigation for maximum effectiveness.
This design has been growing in popularity over the last few years, though there’s some debate about whether or not the “hidden” menu is actually effective, particularly for desktop sites. On one hand, it allows sites to free up space and encourages users to find missing content. But this only works if you have content that’s also worth spending time navigating.
Other designers argue that hidden menus harm the user experience, as it’s difficult for people to find what they’re looking for. If someone is not familiar with a hamburger menu on a desktop site, for instance, they may not know where to click to find the menu at all.
Some designers place the hamburger icon in the top corners of the desktop site so it’s automatically optimized for a mobile experience, but desktop users may find this confusing. Ideally, a hidden menu would be used for sites that have a high number of mobile users visiting their landing pages and that also want to keep their design as minimalistic as possible.
For everyone else, having a traditional, visible navigation menu at the top or side of your page is a safe bet. There are plenty of ways you can be creative with a traditional menu, so don’t feel the need to use a hidden menu just because it’s trending.
How to Choose the Right Navigation
Ultimately, the effectiveness of your menu will come down to the content of your site as well as your users (and the devices they use).
If your site is content heavy, like a news site for example, a dropdown menu might be the most efficient. You can create a hamburger menu (which is also a dropdown menu) accessible on the side of your site if it’s noticeable enough, though hamburger menus often include less content than a traditional dropdown menu.
If your users are more tech savvy and tend to access your site on mobile, a hamburger menu or scrolling menu (or both) may help you improve the user experience on both desktop and mobile.
Here are a few questions to ask when deciding which method is better:
- How long will the menu take to navigate on average?
- How difficult is it to find the navigation if you’re a first-time visitor?
- How familiar with web design best practices are your users? (Do they know where to look for a hidden menu or will it confuse them?)
- Which is more of a priority – visual elements/screen space or navigation?
- Which navigation will showcase the core features you want users to see first?
- Are the navigation menu items easy to understand?
- Will a hamburger menu icon be easy to understand or should you use words instead?
Again, the best solution is whichever is most effective for your user. It’s not necessarily more effective to have a “cool” navigation menu if your users can’t understand it. Do what’s best for usability.
It may be important to test out your site from a user perspective before settling on a final navigation. Don’t assume that just because you can navigate the site perfectly, your audience will understand what to do. Keep in mind you can always combine navigation options and that there’s no one-size-fits all solution. Do your best to be creative, just keep functionality in mind.