Updated: August 14, 2023

Navigation

Intro

A proper navigation style offers a fast and clear path for users to finish their tasks. When designing an app, the first step should always be to evaluate the content structure of the app, and to then select the navigation style that will provide the clearest and most efficient user experience.

Hierarchical Navigation

Hierarchical navigation is suitable for apps based on a single content category. Apps that use a hierarchical navigation style typically start with an overview screen that provides users a high-level summary of the entire app. Users can then access more detailed information by drilling down into the available content subcategories.

Hierarchical navigation
Hierarchical navigation

Prevent Endless Loops

In a hierarchical navigation style, the user can only go back and forth step-by-step. To prevent the user from entering an endless loop, you may consider displaying some information in modals when the user is in a deeper level of the app. To learn more about child objects, see Object Details.

Example of hierarchical navigation
Example of hierarchical navigation

Flat Navigation

Flat navigation is suitable for apps that are based around multiple content categories. A tab bar is used in flat navigation, with each tab representing one content category. An optional search tab can be used to enable a global search feature. Inside each tab, the user can drill down in a step-by-step fashion to access increasingly detailed content.

Flat navigation
Flat navigation

Profile

In most cases, it’s recommended for you to place profile and settings on the right side of the navigation bar and ensure it’s accessible in each tab. If the profile is frequently viewed by the user, for example, checking the progress, the profile may be in its own tab. To read more, see Profile & Settings.

Example of flat navigation with profile on the lower right side
Example of flat navigation with profile on the lower right side

Resources