Mobile menu design: What options do you have?

By Jerod Greenisen | February 2017

If you or your business is considering redesigning your website, one of the most impactful design choices you can make is an optimized navigation bar. This important decision process gets all the more tough as there are more mobile menu design options than you might think.

mobile-menu-design

Why is this so vital to your design? As users of all screen sizes (and hand sizes) visit your website one of the very first things they will interact with is the menu of your website. This is where engaged users look to find more about your organization; you don't want them to get frustrated with its usability (or lack thereof) and bounce off your site. Ensuring that your website has the best possible UX (user experience) means doing some research into navigation menu designs. Here are a few of the strongest contenders.

1) Hamburger Menu

This menu design leads the list because it's perhaps the most popular mobile menu design. Many website design projects start with this menu consideration, however, recent studies have shown that this menu design is more stylish than it is effective!

Results from the Neilson Norman Group make it pretty clear that more improvements upon this design are necessary. With a few additions to the hamburger icon sometimes it can be a good option. Big brands like Uber Technologies still use the hamburger menu in combination with other navigation assets.

uber mobile website ui.jpg

Image is an approximation of UI (user interface).
Design credit: Uber Technologies Inc.

 

2) Tabs

Here is an excellent structure to keep your website organized and easy to understand. Tabs menu designs are a UX dream: they are easy to understand and are quickly accessible. These can be the most strategic and creative mobile menu for websites that have less than five main topics.

For example, LinkedIn provides four entry points and a profile view for users to easily access the main conceptual areas of the website. As seen in this example, tab menus can be further improved by providing labels beneath the icons, and dropdowns for more detailed entry points. View these interactive demos from Codedrops to experiment with different designs of tab menus and even see how they work.

linked tabs ui.jpg

Image is an approximation of UI (user interface).
Design credit: LinkedIn

 

3) Progressive scaling menus

Progressive scaling menus are a great way to organize sites that might have many navigation items on bigger screens. In these cases, the multiple items can't fit across the mobile device. The way this works is as a screen size gets larger, users are presented with more specific (but likely less popular) categories through which to sort.

The BBC does an excellent job at progressively scaling menus down according to what information is most interesting to their users. On the smallest screen, a user may sort items on bbc.com by the topics titled 'news' and 'sport'. Another way the BBC does this well is they present a 'more' option which brings up additional nav items for the user should they want to access more specific categories, even on a mobile screen. 

bbc menus.gif

scaling headers bbc.jpg

GIF created by @kollinz on Medium.
Image is an approximation of UI (user interface).

 

4) Include the Search Bar

With limited real-estate on a mobile screen, sometimes it's best to just let your visitors type in what they want. If you go into a web redesign project and you don't have sufficient analytics data about the most important items for a mobile navigation structure, implementing a clear and easy-to-use search bar can get you started. Once you've had this mobile menu up for awhile, you can use the search phrase data and move into a new mobile design direction.

For the larger sites on the web like Facebook, Amazon, and Target search is a crucial component for site navigation and a better understanding of the people who use their website. 

TARGET SEARCH BAR.jpg

Image is an approximation of UI (user interface).

 

Want to go beyond these options? Read about next-level mobile design menu options.


Conclusion:

The most important thing to understand about mobile menus is that you have options when it comes to design. The hamburger menu is not the be-all-end-all for mobile design. Remember that often times, it can even be holding you back. Understanding your users and what they want will greatly help you understand how to provide the best experience for them as they visit your website on-the-go. 

Are you considering a website redesign? See how ArcStone can help by downloading our eBook! 

Topics: Design and Technology

New Call-to-action