Improving the UX of Your Website Menus

Want to improve your website? Improving the navigation goes a long way towards that goal. Menus are central to the user experience (UX) of your website and affect traffic, bounce rates, session length and conversions according to Kissmetrics. Here are seven helpful tips to help you optimize your site’s menus for better usability.

1. Keep It Simple

Complicated menus are non-intuitive and difficult to use. New site visitors’ fleeting attention spans usually do not allow for deep study. Eye-tracking research shows that users form an impression of your site in as little as 0.2 seconds. Too many top-level menu options are hard for users to process and Hick’s law tells us that more choices lead to indecision. Aim for 7 or fewer categories in your top navigation. 

Keep Menus Simple

Example: Comotion Studio

2. Follow Well-accepted Navigation Patterns

Don’t make users guess where the navigation is, or how it works. Yes, you want your website to express your brand and style but the menu should not be the showcase. Position it at the top or on the left, two areas that users scan first. And make sure the menu items look obviously clickable, are sufficiently bold, and contrast well against the background color.

3. User Lingo Is User-Friendly

Determine which tasks your users are trying to accomplish with some Voice-of-the-Customer Research. With that information, select terms that relate to how users express what they are trying to do or find. A user-card sort could be helpful here! This extra investment in time and effort will help you avoid jargon and site organization schemes that have meaning within your organization but not necessarily for your site visitors.

4. Utilize Mega Menus for Deep Content

Using a mega menu is best for websites with multiple levels of content. Mega menus are expandable menus in which second and sometimes third-level menu options are shown at a glance. It takes some thought to determine the best way to display the options, so the user has a good overview of the site without being overwhelmed. Group related secondary and tertiary menu options, as determined by a user card sort, and list them in order of importance, popularity or following the user workflow. 

Mega Menus

Example: Nike

5. Where Am I?

Orient users to their location within the site through menu styling, for example, highlighting the tab for the section of the menu they are currently on. Using breadcrumbs as a secondary navigation tool is another way to help the user understand where they are. According to Nielsen Norman Group, “Failing to indicate the current location is probably the single most common mistake we see on website menus.” And this is even more critical in these days of Google search, when many of your site visitors are not entering from the home page.

Highlights and Breadcrumbs

Example: Science Friday

6. Visible Menus Are Best

You want a really clean look for your site, but a hamburger may not be the best way to style the menu for desktop. According to the latest research from Nielsen Norman Group hiding the navigation resulted in poor user experience along 3 key measures: discoverability was cut by half, task time was longer and perceived difficulty of executing a task increased. Follow their rule of thumb: Don’t hide menus when there’s ample space to display them.

7. Design for Accessibility 

Designing for accessibility is design for everyone, including users with low vision, color-blindness or mobility challenges. Font size, color contrast, and compatibility with screen readers are all important factors. A few tips to get started: don’t use color alone to distinguish things like error states or required fields in forms, make sure there is sufficient color contrast between text and backgrounds, and avoid having elements that only show on hover. For a deeper study, review WCAG 2.0 and ARIA guidelines.

Summary

Revamping your menu structure might be an interim project as you wait for the budget to tackle a full-site redesign, or it could be part of the redesign process itself. We hope this post has convinced you of the value of giving significant thought to your menu, possibly with the aid of some Voice-of-the-Customer Research. In our view, there’s no such thing as a menu that is too clear, too direct or too user-friendly!  

Madeleine Lowry

Technical Project Manager
 
Image
Madeleine Lowry

Madeleine is our queen multitasker and copious list maker. Clients love that she intuitively senses their urgency and needs while minding their budgets; developers dig that she keeps them challenged but not overloaded. She’s a particularly gentle PM with a calming presence. Madeleine uses her business background to contribute to big-picture marketing and strategy for clients as well as the home team. She founded Southwest Coder Dojo, where teens learn programming, but she believes that kind of work should be left to the real code wizards. Madeleine has often reinvented herself professionally, but her love of food and polka dots stays constant.

Eva Lovisa Nelson

Designer
 
Image
Eva Lovisa Nelson

Our designer Eva has an amazing ability to intuit what clients want visually, often when they can’t express it in words. People describe her as possessing a fierce work ethic, loving simplicity and collaboration, and being constantly optimistic and sunny. After she collects all the client information on a project, we think she sits staring out the window for hours until inspiration strikes her and then she whips out a design in ten minutes, but it’s probably more complicated than that. Eva really, really, really likes fruit. She’s an actual fruitarian.