Understanding Mobile App Menu Design

Whether it’s a website or a mobile application, menus play a big role in making sure that positive user experience is delivered at all times. Menus are what the users use to get to the pages and the content that they want. Needless to say, menus should always be visible and easy to use to avoid confusion and frustration. 

Unfortunately, not all menus are created equal. In this post, the importance of an app menu is discussed, along with the basics of the different mobile app menu designs that you can choose from. 

 

What Is an App Menu and Why Is It Important?

In simple terms, an app menu is somewhat like a bridge – a means for users to get from one point to another inside an application. Every item in an app menu has a corresponding action or option that affects specific elements that may include what you are viewing within the app. 

While an app menu is not and should not be the primary way to navigate the app, it does help app users in a really big way, especially because the small screens of smartphones present viewing limitations and content must be prioritized. It’s what users first look for when they open an app because they know they need the menu to explore what the app has to offer. 

 

Mobile App Menu Design Patterns

There are different navigation patterns that mobile developers use that offer different solutions as well. It’s true that it would be more intuitive for app users if there’s just one app menu design. The problem is that different applications also come with specific issues that they cannot be addressed by just one app menu design. 

To help you understand this better, here are some of the most common mobile app menu design patterns and their strengths and weaknesses. 

 

Hamburger Menu

The hamburger menu is one of the most popular patterns you’ll find in most apps. Its drawer panel lets you hide the navigation (usually at the upper left side of the screen) and requires the action of the user to reveal itself.

This design is not recommended for main navigation but it’s perfect as a secondary navigation option solution. If there are features in your app that are only used in some circumstances and are not regularly used, a hamburger menu can hide them so the users won’t be overwhelmed with too many options when they open your app. 

Pros

• The hamburger menu frees up screen space and offers a clean design.
• It can accommodate a large number of navigation options without taking up much space.

Cons

• Because it’s hidden, it’s not discoverable. The user must be familiar with the hamburger menu for them to open it. 
• It requires extra action from the user to move to where they really want to go. 

Check out how Grab makes use of the hamburger menu in their app as a secondary navigation solution. Since this app is mainly used for requesting a car and the secondary options like booking history don’t have to be on display at all times, a hamburger menu is a good choice. 

Tab Bar

The tab bar pattern is perhaps the most familiar for most people because it is adopted from the desktop design that we all know too well.  It often offers just a few destinations that are most commonly used in the app that direct access to them is ideal. 

It is best used for apps with only two to five main navigation options. It will allow quick switches between the main features of the app. 

Pros

• It easily shows the current location of the user in the app at a glance, thanks to the icons and colors used for the items in the tab.
• Tab bars are always visible no matter what page is being viewed.
• The single-click action that offers direct access to important features makes navigation so much easier.

Cons

• With the tab bar, the options for navigation are limited. If the app offers more than five major features or options, it would be hard to get them all in the tab.
• The location of the tab bar varies between iOS and Android which may be confusing for someone switching from one operating system to another. 

See how Twitter’s tab bar allows direct navigation to the screens or features they offer.

Floating Action Button

The floating action button is that circular icon you see floating above the interface which changes color and lifts/opens when you select it. It prompts users to take action. 

The floating button concept is based on the premise that a certain action will be performed by the user a lot of times. It also cues the user as to what they are supposed to do next. For instance, a music app may have a floating button for play/pause. 

From: Dribbble

Pros

• You can’t miss it. It grabs the attention of the user and suggests the next natural action. 
• It doesn’t take up much screen space like the tab bar. 
• A study conducted by Steve Jones shows that once a user has used the floating action button, he or she will be able to use it more efficiently than a traditional action button. 

Cons

• It can be distracting for some users as it drives attention from the content. 
• It can block parts of the content. That means if there’s a floating action button and you want to see the part hidden by the button, additional scrolling is necessary. 
• Its icon-only design may make it hard for some to understand what it is for. 

The Inbox app and the Snapseed app both make use of the floating action button with the same icon but the actions are different. For Inbox, the button stands for “compose” while for Snapseed, it’s “edit”. 

 

Full-Screen Navigation

This type of app menu design goes the opposite way of those trying to minimize the space they take up. As the name implies, this design dedicates the home page of the app to navigation exclusively. Users need to either swipe or tap to reveal additional menu options. 

This approach works well if your app is either direction-based or task-based. Because it works like a funnel, users get to narrow down to what they are looking for but they go through broader overview pages first.

Pros

• It’s simple to use. Users don’t get overwhelmed with information they don’t need because they decide the direction they’re going.

Cons

• The fact that the entire page displays only navigation options and no actual content, it is quite a waste of prime real estate.

 

Yelp makes use of this mobile app menu design.

From: Smashing Magazine

 

Gesture-Based Navigation

Gestures are extremely popular when it comes to navigation. When implemented properly, gesture control can significantly improve user experience.

This is a great choice if you want your users to explore your app and the details of the content you provide intuitively. In a way, it is more engaging than traditional navigation menus. 

Pros 

• It eliminates UI clutter. You can make your interface as minimal as you want and save space for content with value. 
• Gestures can be a feature itself of your app. For instance, when Tinder made swiping popular, it’s not just a means of navigation but a gesture that in a way defined the product itself. 

Cons

• The navigation is practically invisible! While the idea of an invisible UI is truly seductive and interesting, usability issues may arise, too. 
• More effort is required of the user. For someone who isn’t familiar with this type of navigation design, those gestures may feel unnatural and even hard to remember. 

See how GitHub makes navigation in their app engaging with gestures.

From Ramotion

Priority + Pattern

This pattern is one that exposes what it considers as the most important elements while keeping less important ones hidden behind the “more” button.

Its use is great for content-heavy applications that have a lot of sections and pages.

Pros

• This design makes the most of the available space. As the screen space increases so do the number of navigation options. 
• It’s an adaptive menu. It can easily be scaled across different screen sizes without having to tweak the pattern.
• It displays the most frequently used navigation options.

Cons

• The navigation options that are “prioritized’ in this menu design depend on what the designer assumes to be important. If you are going to use this for the app that you are creating, don’t forget that what you might choose to display are not the ones your users are going to need the most.

Look at the way the Guardian uses the Priority + Pattern.

Image Credit: bradfrost

 

3D Touch

This subtle touch mechanism was first seen in the iPhone 6s and 6s Plus. Apple categorized the interactions into two: 

• Quick Actions – This allows users to app-specific actions even when outside the app. This is done by pressing the app icon firmly until it shows the quick actions list. 
• Peek and Pop –  3D Touch enables users to preview content within an app before making a decision of viewing it in full or not. 

3D Touch is best used for when you want your users to be able to do repeated tasks faster or if you want to help them skip unnecessary steps. In a way, this can be likened to keyboard shortcuts. Meaning, while they are truly useful, there should still be a way for your users to use your app without 3D touch.

Pros

• It allows users to save time by skipping a few taps.
• It makes the interface a lot simpler while enhancing functionality at the same time.

Cons

• A lot of users still have a hard time remembering which apps allow those quick actions. Not all apps have 3D shortcuts, even on iOS.

In this image, 3D Touch allows users to preview an email. It quickly disappears as soon as the finger is lifted.

Image Credit: Gizmodo

 

Helpful Tips on Mobile App Menu Designing

1. Learn When to Hide or Display

While there may be a need for you to use hidden navigation due to screen estate limitations, you should always consider the drawback – users won’t need what they don’t see. There’s a reason many apps are now replacing their hamburger menus with more visible navigation options. It’s because the latter not only increases engagement but also improves customer satisfaction.

1. Indicate Current Location Clearly

You won’t believe how many apps still fail to let their users know their current location, making navigation a nightmare.  Remember that app users need visual cues even with their menus. The use of color contrast and recognizable icons can help your users understand the current state and location in the app.

1. Make Sure the Menus Are Coordinated With User Tasks

When using category labels, stay away from jargon. Menu items should be clearly understood so you should only use familiar terms so users won’t get confused. Your app users shouldn’t have to use Google to get what your labels mean.

Your Menu Should Be Finger-Friendly and Easy to Manipulate

It can be frustrating for users when they keep on hitting the wrong buttons accidentally. 

• To avoid this, choose the right font style and size to ensure that the user is able to read the labels clearly. 
• Use color and contrast to help users navigate the app with ease. Give positive action options a higher contrast so the user will see which action to take. 
• Make sure that you match the icon sizes to the average finger size. There should also be enough space between the menu items.

Global Commands Should Be Separated From Selection-Specific Commands

Global commands should be in the ‘Options’ menu or fixed on the screen. Selection-specific commands should be placed in the ‘Context’ menu. 

How do you know which commands go where? If the act acts on no specific content, it should be in the Options menu. If the command is meant to act only on selected content, it’s for the Context menu.

Prioritize the Most Commonly Used Operations

There are menus that are scrollable. In such cases, it is important that the most important and commonly used commands are visible at the top even without scrolling. In the Options menu, the most frequently used command should never be behind the “more” option. In a context menu, organize the commands in order of frequency of usage, with the least used command at the bottom of the list.

 

Conclusion

As an app designer, your priority should always include the users’ need for easy navigation. Every user of your app should be able to figure out how to use and move around your app without feeling lost even once. The easier their navigation is, the higher the chance that they’ll keep on using your application.