Navigering
People tend to be unaware of an app’s navigation until it doesn’t meet their expectations.
Your job is to implement navigation in a way that supports the structure and purpose of your app without calling attention to itself. Navigation should feel natural and familiar, and shouldn’t dominate the interface or draw focus away from content.
Global navigation allows people to switch between different sections of an app. The hierarchy level and state is preserved as the user navigates between sections.
Use navigation bars, rails & drawers for global navigation.
Example
The user navigates to another section.
Interactive elements such as cards, lists and links allow people to navigate to deeper levels of hierarchy. Deeper levels of hierarchy have a back button in the top left corner that leads back to the parent view.
Use app bars for navigation, screen titles and actions.
Example
The user navigates to deeper levels of hierarchy.
Use modals for simple tasks like selecting a station or changing a departure date. Locking in focus while making selections and entering input helps users achieve their goals without distraction. It also minimizes the risk of accidentally abandoning the flow by tapping another element or the global navigation.
Use sheets for simple tasks on mobile. On tablet and desktop, use poppers instead.
Example 1
The user changes departure date.
Example 2
The user changes traveller details.
Example 3
The user sorts the search result by price.
Use modals for complicated, multi-step tasks like buying a journey. It may seem counterintuitive to use a modal for a complicated task, but the purpose is to reinforce focus by hiding the global navigation. This prevents people from moving around the app before the task is completed.
Use sheets for multi-step tasks. For complex tasks like photo editing, use full-screen dialogs instead.
Example 1
The user wants to buy a journey.
Example 2
The user navigates to subsequent steps.
Example 3
The user completes the modal flow.
Use a modal to display an article, video, or full-screen content that requires minimal additional navigation and interaction.
Use sheets for presenting nonimmersive content like articles. For immersive content like videos and photos, use full-screen dialogs instead.
Example 1
The user wants to find detailed information.
Example 2
The user navigates to deeper levels of hierarchy.
