Don’t Make These Mistakes in Mobile Menu Design

[[132830]]

When we want to make user navigation on mobile sites more intuitive, we run into this challenge: too much content, too little space.

The biggest trend in mobile e-commerce platform design is to use the " hamburger icon " to display the category menu, which may enhance the scalability of the homepage and enable jumping between the homepage and the menu.

A toggle menu button is a great way to incorporate navigation into every page. Considering the growth of mobile search demand and 43% of emails are opened on mobile phones (data source Litmus), it is crucial to maintain those users who go directly to your website pages and are not familiar with your mobile website. The hamburger menu is a good idea - and it is a convention, but the question is how to apply it to your design.

Do: Tell users where to start

Buckle recognizes first-time visitors and draws their attention to the menu button. Even if visitors don’t know what the hamburger menu does, they know it’s a good starting point and will quickly figure out that it controls category navigation.

Don’t: Confusing the “hamburger” menu with the website logo

Although mobile devices are becoming increasingly popular, Internet users have become accustomed to the distribution of desktop web pages and believe that the upper left corner is the location of the logo. Putting the "hamburger menu" to the left of the logo is a big taboo.

***How ​​do users who visit know that "DISCOUNT DANCE SUPPLY" is a navigation, not a brand logo.

The navigation to the right of the Forever 21 logo is easy to understand, but the hamburger menu on the left doesn’t look like a clickable element.

Ditto Spanx, check out this website and you'll understand.

#p#

What not to do: Too much white space

I bet you a double-size caramel macchiato, eye-tracking studies will show that users pay most of their attention to the image, not the mysterious floating hamburger menu. Placing the menu icon far to the right is just as dangerous as placing it to the left of the logo.

What needs to be done: Organize category icons and other navigation elements

Softchoice’s hamburger menu is part of the navigation menu, so users can easily recognize that it is actionable.

Additionally, Lowe's put its hamburger menu right next to search.

When deciding the order of icons, keep in mind some of the conventions of desktop web design. eBags’ hamburger menu is in the upper right, the traditional location for login and shopping cart. eBags might have been better off placing the hamburger menu to the left of account and shopping cart, or placing it with search.

Green Mountain puts the hamburger menu next to search, but it might be more intuitive to put it to the left of search. After all, vertical menus usually appear on the left, while the “Search” button appears to the right of the search box.

What needs to be done: Annotate icons

Designers - I hear you cry, but labeling icons can help better clarify what they do. For example, the CVS hamburger menu has the word "Menu".

If you think this is too crowded, you can always just put the word “Menu” on the button until the hamburger menu becomes the default menu icon.

Note: Harry and David's search icon may be confused with the PayPal logo, which looks similar to a search box.

Ross Simons’s plus sign on the menu button screams “expand me.” It’s more effective to the left of the search box than to the shopping bag icon or to the right.

But Ross Simons’ shopping bag icon is mixed in with the logo, and it’s a bit too mixed. In fact, without proper design, any navigation icon may be ignored.

As always, user testing and A/B or multivariate testing can tell you if your design is working. Testing navigation should be one of the top priorities in your mobile optimization strategy, balancing effective use of space with clear mobile site architecture.