Mobile Navigation Design
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.
Tabs on
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]
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
Card UI designs have many advantages. They are intuitive, straightforward, and make
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
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.
When designing mobile
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
References
- Top app bar – Material Design 3 | Material Design
- Navigation bars | Apple Developer Documentation | Apple Developer Documentation
- Navigation bar – Material Design 3 | Material Design
- Bottom app bar – Material Design 3 | Material Design
- Tab bars | Apple Developer Documentation | Apple Developer Documentation
- Tabs – Material Design 3 | Material Design
- Segmented controls | Apple Developer Documentation | Apple Developer Documentation
- Hamburger Menus and Hidden Navigation Hurt UX Metrics | Nielsen Norman Group
- What is Apple 3D Touch? | Definition from TechTarget | Search Mobile Computing
- Basic Patterns for Mobile Navigation | Nielsen Norman Group
- FAB – Material Design 3 | Material Design