Mobile Navigation Design

Explore guidelines to design navigation that gets users where they want to go with the least amount of friction possible
Mobile Navigation Design Lesson

Navigation is the backbone of any app. Its purpose is to get users where they want to go with the least amount of friction possible.

Mobile navigation must be discoverable, accessible, and take little screen space. The best type of navigation for your website or app will depend on your users' needs.

All mobile navigation patterns negotiate between content prioritization and accessibility. For example, a hamburger menu offers more space for content but is harder to discover. Consider your users' goals to strike the right balance between content and navigation.

Top navigation Bad Practice
Top navigation Best Practice

Top navigation bars are positioned at the top of the screen and play a key role in organizing content and guiding users. They are commonly used in both iOS and Android apps, though their design and functionality vary slightly across platforms.

  • Material Design (Android) top app bar. These components display navigation elements, key actions, and sometimes contextual information like page titles or search fields. This bar is often fixed, providing users with consistent access to important controls throughout the app.[1]
  • iOS Navigation Bars: these components also appear at the top and typically include a title to help users orient themselves. They may feature additional controls, like a back button or a menu, that affect the content displayed below. These bars act as anchors, giving users a sense of structure and hierarchy within the app.[2]

Top navigation is best suited for situations where users need constant access to primary actions or navigation elements across multiple screens.

Bottom navigation

Bottom navigation elements are positioned at the bottom of the screen for easy one-handed access.

Material Design (Android) offers two types of bottom navigation:

  • Navigation bars: Provide access to 3-5 consistent top-level destinations across screens. They are focused solely on navigation and ensure a familiar, intuitive experience. Previously called "bottom navigation," these bars don’t include additional actions.[3]
  • Bottom app bars: Combine navigation and key actions, including up to four actions and a floating action button (FAB). Designed for mobile screens with two to five actions, they should not be used alongside navigation bars as they serve different purposes.[4]

On iOS, tab bars function similarly to Android’s navigation bars. Positioned at the bottom, they allow users to navigate between top-level app sections while maintaining the current navigation state in each. This ensures seamless transitions and clarity in app structure.[5]

Tabs Bad Practice
Tabs Best Practice

Tabs on Android are a navigation element used to organize related content within the same hierarchical level. They allow users to switch between grouped content efficiently without leaving the screen, making them ideal for categorizing non-sequential information under a shared topic. Tabs are displayed in a single row, with each tab connected to its corresponding content. Primary tabs should appear at the top of the screen, while secondary tabs—if used—go below primary ones to ensure clear and intuitive navigation.[6]

On iOS, tabs do not exist in the same way as on Android. Instead, segmented controls serve a similar purpose, though they are not identical. Segmented controls allow users to toggle between related content or views within a screen. Unlike Android tabs, segmented controls are typically placed near the top of the screen and are better suited for lightweight toggling rather than extensive navigation.[7]

Hamburger menus

A hamburger menu is any menu with primary navigation options hidden behind an icon. The most common icon is the hamburger icon represented by 3 horizontal lines.

Hamburger menus have some advantages. They save space by keeping many options tucked away, and they can easily accommodate submenus.

However, a major drawback is that they are less discoverable.[8] While many mobile users recognize hamburger menus, not all intuitively open them, which can lead to lower engagement with hidden options.

Hamburger menus are best suited for content-heavy apps or browsing-focused experiences where users are less concerned with navigating to specific sections and more focused on exploring presented content.

If you use a hamburger menu, consider supplementing it with alternative navigation patterns, such as bottom navigation bars or tab bars. These solutions ensure essential navigation options remain visible and easily accessible, improving usability while keeping your app user-friendly.

Cards Bad Practice
Cards Best Practice

UI cards look like physical cards, usually with physical boundaries and square or rounded edges. They come in a variety of shapes and sizes.

A UI card usually consists of the background, an image, and a few containers. These containers hold items such as an image, a CTA button, a title, or a subtitle.[9]

Card UI designs have many advantages. They are intuitive, straightforward, and make content more scannable. Cards can easily be personalized and adapted to different screen sizes — making them a great option for responsive apps.

Gesture-based navigation uses swiping, tapping, and dragging gestures—both horizontally and vertically—to allow users to interact with an app. This navigation style has gained popularity thanks to apps like Tinder, where users swipe right to like someone and left to reject them.

This approach creates an engaging and dynamic user experience. Well-designed gestures feel natural, making navigation intuitive even for first-time users. However, gestures should be thoughtfully implemented to avoid confusion or frustration.

Here are some practical tips to enhance gesture-based navigation:

  • Use visual hints: Include subtle animations or icons that guide users on how to interact with gestures.
  • Provide alternatives: Always offer a backup option for users unfamiliar with gestures, such as buttons or menus.
  • Keep gestures consistent: Avoid assigning multiple meanings to the same gesture to ensure clarity.

Pro Tip! Make sure that gesture-based navigation isn’t the only navigation option.

3D Touch is an Apple feature that detects different levels of pressure on the screen. When users apply varying amounts of pressure, it triggers shortcuts or actions in apps. This technology works mainly in native iOS apps and is not commonly used in web apps.

A common use of 3D Touch is content previewing. For example, in a list of emails or articles, users can press lightly on an item to see a preview before fully opening it. This helps users quickly view content and navigate more efficiently.[10]

Pro Tip! Make sure that 3D touch isn't the only way to access central features. Users should be able to find the primary features without discovering the 3D touch option.

A floating action button (FAB) expandable menu is a button placed at the bottom-right corner of an app screen, typically shown as a circular icon. When tapped, the FAB expands to reveal additional options. The expandable FAB is particularly useful for saving screen space and reducing clutter, helping to create a cleaner user interface. It allows users to access important actions quickly while also offering extra choices when needed.[12]

FABs are a feature defined in Material Design and are commonly used in Android apps. While you may encounter similar buttons on iOS, there is no official mention of them in iOS Human Interface Guidelines. FABs are an effective way to keep the focus on key tasks while providing users with easy access to secondary actions.

Account for hand positions Bad Practice
Account for hand positions Best Practice

When designing mobile navigation, we must consider various accessibility needs to ensure all users can effectively interact with apps. Different users may experience visual, motor, or cognitive disabilities that affect how they perceive and use navigation elements.

Key considerations for accessible navigation:

  • Size and spacing: Provide minimum 10mm touch targets with adequate spacing to help users with motor impairments tap accurately
  • Visual clarity: Ensure high contrast and clear labels alongside icons to support users with visual impairments
  • Physical comfort: Position key navigation within easy reach, considering different hand sizes and grip styles
  • Alternative methods: Support voice control and assistive technologies for users who can't perform standard touch gestures
  • Cognitive ease: Keep navigation consistent and predictable, using simple language and clear location indicators to reduce mental load
Consider users' needs when choosing navigation Bad Practice
Consider users' needs when choosing navigation Best Practice

When deciding on navigation patterns, consider your users' primary goals and how they interact with your app.

Content-focused apps (like news, videos, or data dashboards) benefit from minimalist navigation:

  • Use hidden navigation patterns like hamburger menus
  • Prioritize content visibility over navigation access
  • Keep navigation unobtrusive yet easily accessible

Task-based apps (like booking services, fitness apps, or learning platforms) need more prominent navigation:

  • Display key actions directly on the main screen
  • Make navigation options immediately visible
  • Provide clear paths to different functions

Choose navigation patterns based on how frequently users need to switch between sections and whether they focus more on consuming content or completing tasks.

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>