Designing A More Effective Hidden Menu

Guiding a user through an interface is perhaps one of the most important pathways a web designer can implement. Navigation is the main tool in guiding this experience, so it’s only fitting that there should be debate over new trends within menu design.

Though a standard well-designed approach to navigation is ideal for most websites, the hidden menu has become increasingly popular. With the rise of a mobile-first strategy, a more pared down, minimalistic navigation has become the norm for screens across the board. By far, the most used method to employ the hidden menu is that of the hamburger menu.

To refresh, the ‘hamburger menu’ is the application of a site hiding their menu navigation when a visitor first lands on the main page. The hidden menu information becomes visible when the visitor is ready to move on to additional information and clicks on the requested icon.

This implementation of the hidden menu has become so ubiquitous in web design today  that it has gone from a trend to a design standard. Adding the prevalence, popularity and necessity of responsive design – the hamburger menu seems here to stay. However, it is not without ridicule. Many have rallied against the use of this navigation style and even go so far as to say that it creates higher drop rates and less chance of conversion, effectively crushing engagement.

If the hamburger menu is here to stay, how can designers make it better?

Relevant and Simple Content

Just because the content is hidden doesn’t mean that it shouldn’t be pared to the essentials. After conducting user testing, simplify and condense menu items to what the user truly needs. Ensure menu items are prioritized in order of relevancy and user importance.

Provide a Call to Action

As savvy as most users are to the hidden menu, it may still be an issue for visitors to easily locate what they need in a timely manner. Utility elements such as a sign in portal, shop or join button should be included on the main page rather than hidden. While simply showing the stacked hamburger icon is ideal for a minimal approach, labeling ‘Menu’ as a hover can greatly increase user experience, getting the user to where they need to go in the most streamlined way possible.

Avoid Unnecessary Features

Lets face it, many sites that employ the use of a hidden menu are seeking a slick, modern approach to design. It isn’t always about being the most mobile friendly or efficient – design usually wins the day. This can be a slippery slope for flashy features that don’t ultimately serve the user. Allowing the hidden menu to remain static and clickable once its opened will help the user better understand the architecture of the site and all items that are available to them.

More than anything else, its important to explore a design that works for the brand or company it represents. Designing a site with features that the user cannot understand will always result in a redesign once drop rates begin to show up. Hidden menu navigation should be used with care and thought, beginning with the development of user personas and pathway exercises to reach the ideal design.