8 Best Mobile Navigation Design Examples

Mobile app navigation design does not assume following one proven direction.

While there are certain mobile UI rules to keep in mind when creating your product, you are not restricted to selecting the single best navigation pattern. You don’t want your product to look like every other app in your niche, right?

Mobile UI is all about reducing the user’s learning curve and making your product appear intuitive and simple to use. Today we are sharing some app menu design inspiration from our vault, along with additional commentary on the benefits of different menu styles.

The Essential Principles of Mobile App Navigation Design

Great mobile app design goes beyond the good looks. It should also account for how users will engage with your product.

When it comes to app navigation design, you should keep the following principles in mind:

Minimal – the key difference between mobile and desktop design is the screen size. Efficient mobile navigation prioritizes the tasks the user is most likely to conduct. It should gently guide the user to the right direction, not overwhelm with the choices.

Consistent – you should not change the menu content or position on different pages. Do not confuse the users. They should clearly understand how to move around your product and get back to the point where they started. Don’t try to amaze them. Instead, it’s better to deploy “The Principle of Least Surprise” to match the user’s expectations and mental models.

Coherent – use proper visual cues and signifiers. App navigation should not require any additional explanations. A “Cog” always suggests access to “Settings” or similar functionality. A user may be unpleasantly surprised if it leads to something else.

Self-Evident – users should not think too much about accomplishing a certain action. The navigation should guide and prompt the next step.

These are the essentials of mobile menu design. Now, let’s take a look of how that transfers to different types of mobile menus.

Bottom Bar Menus

Arguably, this is one of the most popular mobile app navigation patterns. It assumes having a fixed set of buttons on display at the bottom of the screen. Nike+ Training Club, Instagram, Airbnb have opted for this kind of navigation:

Benefits:

• The navigation remains in sight no matter what page the user is viewing. They always know how to proceed when they want to access a particular screen.
• Hotkey reach – the buttons are positioned at an easy-to-tap area, particularly convenient for reaching with a big thumb, using one hand.
• It’s recognizable and self-evident – most users are already familiar with this type of mobile interface design and no additionally learning is required.
• The implementation is simple. Developers can create a custom menu like this within a reasonable timeframe and for an affordable price.
• You may require double verification e.g. both via Facebook and LinkedIn to create a more refined user-base.

Design Caveats:

• Limit the bottom menu to 2-5 items max.
• The icons should be self-evident and convey the functionality behind them.
• It’s better not to pair the icons with texts, as the menu will end up looking cluttered.

Bottom Bar Menu with Action Menu

Reducing all the content to 5 key actions could be complicated for some companies. The savvy workaround here is to include a central “action menu” button, which will reveal additional navigational options after being clicked.

Here’s how Yelp does that:

List Type Menus

List type menus are popular with content-heavy apps – online newspapers and magazines; or those offering advanced functionality.

Some of the best mobile menu designs in 2017 include a mix of the list type menus and bottom bar navigation. The bottom area is used to display the key product features, whereas the extras stay hidden within the list type menu, accessible with a left/right side swipe gesture or popping up after pressing one of the bottom buttons:

Full Screen List Navigation

Benefits:

• You can organize large chunks of information in a coherent manner and reveal all the features without overwhelming the user.
• Use the list menus to hide secondary functionality and keep the focus on the main experiences.
• It steals the minimum amount of content from the screen or can be put on display as a separate screen.

Design Caveats:

• You can use texts instead of icons to convey the meaning of each feature.
• Don’t forget to implement the back button as users may get lost while getting deeper into your navigation.

Grid Styled Menus

Presenting your navigation as a grid will eat up the whole screen, yet it keeps the user attention on all the options available, and instantly makes it clear what your product can do for them:

Design Caveats:

• You can use it as an alternative to lists when you have fewer items to present (under 8 ideally).
• You can easily pair texts with icons.
• It creates an orderly feeling and encourages the user to explore all the functionality within your product.

Top Tab Menu

Custom top bar navigation is more native to Android apps, though there’s no rule prohibiting you from using it in an iOS app as a secondary navigational option. That’s what Facebook does:

Standalone Top Tab Navigation

Gesture Based Navigation

Tinder has massively popularized the concept of gesture based navigation and basically made those swipes a product defining gesture.

Basing your navigation on gestures adds additional depth and a pinch of innovation to your product. This option is particularly worth considering for startups and gaming businesses.

Benefits:

• Less UI clutter as incorporating gestures enables you to create a more minimal interface and save that space for more content.
• Gestures are universal and people from different cultures and countries tend to use similar gestures to perform the same tasks.

Design Caveats:

• Make sure you will not have to teach your audience how to navigate your product. You may need to include some basic instructions, but the rest should appear intuitive enough.
• The application learning curve will inevitably go up compared to other types of mobile app navigation. Do account for that.
• Use progressive disclosure – you’ll have to present only relevant information to the user and encourage them to use the right gesture whenever they need to switch to another activity.

Pictorial Circle Menus

Here’s another option for the bold companies. If you don’t want to cramp your app with loads of texts and lists, you can make it iconic instead ☺

You can present your key features and unique personality by organizing the content in a circle of icons. It could be a standalone navigation option or incorporated as part of your Action Menu. While using familiar icons, you can tweak them to match your unique brand personality and create a more memorable experience for the users.

If you are interested in learning more about mobile UX and UI design, check out the following posts:

• The Essential Principles of Mobile App UX Design For Startups
• 4 Tips For Creating Better Mobile App User Interface Design
• 16 Best Mobile UX Design Pattern Libraries

Already have a project in mind? You can learn more about our UX/UI design services (we are 55% designers) or get in touch directly with Alty team through the contact form below!