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 clicks
Separate 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
Trend: Ditch your left-side sub-navigation menuLeft-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 menusYour 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
Trend: Use a hamburger menu for non-critical items
Trend: Help mobile users find their way with slide-out menus
Trend: Don’t be afraid to explore alternative sub-navigation menu solutions
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: