A website’s architecture and menu are a major driving force in the success of a website. It impacts every aspect of your website’s performance, from SEO and traffic to user journey and conversions, and everything in between. Your website’s menu design could create a jarring navigational experience for visitors, or it could hold their hand and gently guide them through their journey, empowering them to discover product offerings and valuable resources along the way. The goal of your website’s menu should be to get users where they want to go in as few clicks as possible, and walk away with a positive image of your brand.
Let’s explore the why and the how of good website menu design so you’re equipped to make the right choices when building or redesigning your website.
Why Website Menu Design is So Important
A functional and appealing menu design will:
Build confidence in and credibility for your brand
If you walk into a retail store and have trouble finding what you need, you get frustrated, your impression of that brand sours and you leave. A user’s experience with your website is no different. A confusing menu design can have a negative impact on how users interpret your products and services while a welcoming and easy to use menu displays professionalism and associates your brand with reliability.
Support SEO
A well-organized and informative website architecture and menu is not only appreciated by website visitors but also by Google and other search engines. When search engines can easily understand your content, your website will rank better on terms related to that content which will bring more exposure and traffic.
Increase conversions
Smart menu design has the power to decrease bounce rates and boost engagement and conversions. When users move through your site with ease, they are convert more quickly and more often.
So, we know proper menu design is important but how do you do it?
Website Menu Design Best Practices
Here are our best tips for designing a website menu that will keep users engaged and coming back.
1. Create naming conventions that are clear and descriptive
Your menu is not the place to get cutesy and creative with language. It’s also not the place to be too vague. Nobody is intrigued to click on broad terms like ‘more’ because they don’t offer enough information. More of what? If you’re looking for directions to get somewhere, you want them to be straightforward and to the point, so you know exactly where to go. So, keep your menu names clear, and your users will keep clicking.
In addition, select transparent and familiar wording for your menu items. Link names should avoid internal jargon and include relevant keywords - the terms users are googling when searching for your products and services. This not only supports SEO but helps users know they’re in the right place too.
2. Streamline the mega menu
Don’t try to surface links to every important page in the mega menu or visitors can easily get overwhelmed, and your site may not scale properly over time.
When designing a dropdown or mega menu for a larger organization like a bank or credit union, different departments may feel strongly that all their products or services must be shown there to be seen. In trying to appease everyone, you could end up with a cluttered mess of links that makes it challenging for users to locate the product or service they want. Instead, group them into category pages as part of the website architecture, and display these larger topics in the mega menu. It may be one more click to drill down to the subpage but it’s well worth it to keep the menu clean and tidy, while giving the site plenty of room for growth and change.
3. Be balanced when using multi-level tiers
Multilevel cascading menus with too many tiers can be clunky and create a poor user experience.
On larger sites, it may be necessary to use menu tiers to allow users to drill down a few levels without creating too many clicks, but care must be taken to ensure no one is fighting with the menu. Aim to avoid more than two tiers and use plenty of padding around words so people don’t accidentally mouse out of the menu and have to start over. And make sure you’re not forcing users to have to move their mouse to keep the menu from closing on them. Subtle functional choices like these can have a big impact on how your menu is received. Current website ADA guidelines are key too, ensuring the menu is accessible to all.
4. Be conservative with design effects
It’s fun to experiment with animations and cool effects but not when approaching your menu design. If your menu looks impressive but the design features become distracting, its appeal may quickly fade, and users could bounce right off your fancy menu to explore another website.
Instead, use simple visual cues with color, fonts and intuitive design elements that make seeing where to click next obvious. Underlining links as visitors hover creates a visual cue, while having a menu on state for the section the user is in also helps orient visitors properly.
5. Save hamburger menus for mobile
We all love a good burger, but not on our desktop websites. While hamburger menus are required on mobile and tablet devices because of size constraints, they can impede usability on a desktop.
When viewing a website on a laptop or a nice big desktop monitor, a hamburger menu unnecessarily hides items and wastes the user’s first click just opening it to see what’s inside. It’s like shopping in a grocery store where you have to open a new door every time you want to see another department. There’s no point and its just annoying. When there’s plenty of room on the user’s device, providing an at-a-glance view that allows them to quickly peruse your offerings in the mega menu is much more comfortable to navigate. And, data of desktop navigation usability best practices support this.
6. Offer multiple ways to find information
While products and services should be the main focus of the menu, don’t forget to highlight related resources and tools that might interest your user. This also helps support conversions when visitors are in later decision funnel stages. Menus are also a great space to leverage simple product promotions as part of your marketing strategy. Users may not always scroll far enough to see promos lower down on pages, but everyone uses the menu so here they are guaranteed not to be missed.
7. Keep an eye on the mobile view
When designing your menu, the mobile view of your website’s menu is just as important – if not more important. Your website analytics will reveal the percentage of your current visitors viewing your website on mobile devices and will likely also have important data on what pages are most accessed. Familiarize yourself with this before you begin your design and make this a key driver in menu design decisions.
Pay attention to how any limited headings display on the menu’s mobile view. Use icons or carets to indicate submenus and keep the headings descriptive enough that users don’t waste time opening and closing multiple menu items to locate what they’re looking for. Design links to be large enough that they’re easy to read and have suitable padding around them so someone with large fingers doesn’t keep tapping the wrong menu item by accident. Following website ADA guidelines will be key here too.
8. Expose popular links in global navigation
Global navigation should always be a handful of the most popular links to get people immediately to where they want to be. It’s essential to be picky when selecting these links – based on data and key visitor needs – and not on who in your organization wants visibility. When visiting a bank or credit union website for example, users should not have to wonder where to find current rates or branch/ATM locations, or how to contact the institution. Popular menu items like this should be shown in a global menu at the top of the site that appears on every page, so users never have to guess where to find them. When designing global navigation, it should be assumed that one or two more links will be added over time, so room for this amount of growth should be considered.
9. Make your menu accessible for all
Making your website accessible to people with physical and sensory disabilities is not only the right thing to do from a moral standpoint, it will also bring more users to the table. If your navigation makes browsing your website difficult for people with screen readers and other assistive devices, you could be alienating a whole segment of your audience, not to mention exposing your business/organization/institution to costly lawsuits. Prioritize descriptive link text, sufficient link contrast against background colors, keyboard navigation and other website ADA compliance standards in your design and you’ll make your menu accessible to everyone.
Ready to build or redesign a website?
At the heart of every high-performing website is a well thought out menu design with a logical and inviting navigational flow. But a lot more goes into the design strategy when you’re building a website. Contact the experts at ZAG today to find out how we can assist.