Designing A More Effective Hidden Menu

September 16, 2015In Framework4 Minutes

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.

Person on an iPad connecting to social media apps

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.

Revolutionizing UX Design with the Binary Approach to Project Management

Embracing a clear approach to task completion—where tasks are strictly marked as 'done' or 'not done'—can significantly enhance the efficiency, clarity, and accountability of UX projects. This project management method offers a straightforward…

Human-Centered Design: The Heart of Creating Impactful Digital and Physical Experiences

Whether it be digital, physical, or conceptual, one philosophy consistently emerges as the cornerstone of impactful and effective creation: Human-Centered Design (HCD). At its core, Human-centered design isn’t just a methodology; it’s a…

a person typing on their phone

The Conundrum of Empathy in UX Design: A Driving Force or an Unrealistic Ideal?

Empathy is often touted as the backbone of user experience (UX) design, a tool to perceive and feel what end users might experience. However, the practicality and efficacy of empathy in UX design is a subject of intense debate. While empathy can be…