Less than a second. That’s how quickly it takes to make a first impression on a website, according to eye-tracking studies conducted at Missouri University of Science and Technology.
In that short amount of time, you can hardly capture your users’ attention with content, which is why your website’s usability matters so much. In fact, that same study found that people spend about 6.44 seconds viewing the navigation menus.
If your website’s organizational structure isn’t clear, your visitors may find themselves frustrated and click away. Read on to learn how to use sub-navigation menus to decrease your bounce rate and help your users find what they need.
In that short amount of time, you can hardly capture your users’ attention with content, which is why your website’s usability matters so much. In fact, that same study found that people spend about 6.44 seconds viewing the navigation menus.
If your website’s organizational structure isn’t clear, your visitors may find themselves frustrated and click away. Read on to learn how to use sub-navigation menus to decrease your bounce rate and help your users find what they need.
What is a sub-navigation menu?
A sub-navigation menu is a type of menu that increases the discoverability of content in lower-level categories of your site architecture with the fewest number of clicksSeparate from the main website navigation and using a different user interface element, a sub-navigation menu should be intuitive and require moderate interaction to help your visitors find content on pages more deeply nested within your site.
The four main types of sub-navigation menus are:
- Accordion menus
- Best if you limit the number of options and keep to six or fewer sub items
- Format is often displayed as sub menus or larger menus
- Format includes the popular navicon (or hamburger menu)
- Category landing pages
- Ideal if you have a large number of sub items (usually more than 15)
- Section menus
- A good solution if you have between six and 15 sub items
- Sequential menus
- Used to show hierarchy when you have two sublevels
- Format includes showing a trail of breadcrumbs at the top of a page to help visitors explore other sections of a complex, multi-layered website
A good homepage with an organized, intuitive design can go a long way toward engaging website users. Make sure your website is optimized to help your visitors by following these best practices and trends in sub -navigation menu design.
Trend: Ditch your left-side sub-navigation menu
Left-side sub-navigation menus have been a popular design choice since the earliest days of the internet because they’re attention-grabbing, easy to scan, and aesthetically pleasing. However, many user experience (UX) experts find that the cons of the left-side menu outweigh the pros.While these menus work well for one-page desktop designs, they often don’t display as intended when viewed on devices. Smaller tablet screens often cause left-side menu elements to get lost behind the fold, and narrow smartphone screens can typically only accommodate so many letters in each row, resulting in awkward double-line navigation options.
Trend: Think about your goals when developing sub-navigation menus
Your website won’t be effective without clear goals. To get the results you want from your website, you need to plan.It’s important to create a sub-navigation menu that supports marketing goals, whether that’s to sell more of a specific product line, drive traffic to information about one of your services, encourage mailing list sign-ups, or provide information about how to get in touch.
Pro-tip: Get to know your audience in order to think like your users: Interviewing your target audiences when planning can provide valuable insights when you write your website content. You can use what you hear from your customers to craft more helpful website content. Talk about your products and services how they talk about them in order to make your content easier for these users to find that information on your website.
Trend: Don’t forget to add in-page links into your copy
In-page links, also known as internal links, help site visitors to explore additional content as they read the text and interact with the page. This kind of sub-navigation menu is extremely helpful in keeping visitors browsing your website.
For example, at the end of every TBH Creative post, we share a bulleted list of links to related content previously featured on our blog.
Trend: Use a hamburger menu for non-critical items
Hamburger menus are popular in app and website design because they are intuitive and easy to use, and they give users direct access to features and popular content in only one or two clicks. When planned carefully, this type of sub-navigation—shown as three horizontal bars—can help condense information, save space, and enhance user experience.
Although this type of menu can help you achieve an uncluttered look, it also hides information. That’s why it’s important to remember that, if your designer recommends using a hamburger menu, you need to make sure its implementation is done thoughtfully and not out of laziness. If space isn’t limited in your website’s desktop layout, save the hamburger menu for use only in the design created for your mobile users.
Trend: Help mobile users find their way with slide-out menus
Slide-out menus, sometimes also called side drawer menus, are a great option for mobile users. This navigation structure allows designers to make the best use of screen real estate and helps visitors view navigation options comfortably without overextending their thumbs. Like the hamburger menu, it also offers visitors direct access to each screen, without forcing them to scroll past other pages on the way.
The most noticeable flaw of slide-out menus is their potential to interfere with touch-screen navigation. For example, if a user swipes right to open the menu, they may accidentally like a post, delete a comment, or start a video instead.
Trend: Don’t be afraid to explore alternative sub-navigation menu solutions
More and more companies are developing original navigation solutions to showcase visual content or to take advantage of mobile gestures like tapping and sliding.
Once you’ve clearly defined your website marketing goals, you can choose the sub-navigation menu options that make the most sense for making it easy for your website users to get the information they need.Check out these businesses’ pages to see how their unique navigation and sub-navigation menu designs are helping them reach their business goals.
Gap. The Gap’s homepage combines a tabbed menu and a hamburger menu with extra navigation options to help visitors find sales, discount codes, and new products.
Taco Bell. Taco Bell’s online menu is optimized for mobile-inspired gestures like tapping. It uses large, colorful titles to make it easy to explore menu options using your smartphone.
Netflix. A true pioneer in the technology industry. Netflix keeps redefining the concept of user experience. Their site features a mix of intuitive sliding navigation, captivating visual content, and smart personalization.
Gap. The Gap’s homepage combines a tabbed menu and a hamburger menu with extra navigation options to help visitors find sales, discount codes, and new products.
Taco Bell. Taco Bell’s online menu is optimized for mobile-inspired gestures like tapping. It uses large, colorful titles to make it easy to explore menu options using your smartphone.
Netflix. A true pioneer in the technology industry. Netflix keeps redefining the concept of user experience. Their site features a mix of intuitive sliding navigation, captivating visual content, and smart personalization.
Need help with user experience? Let’s talk
You may also like:
