Updated: May 10, 2018

Navigation

Intro

A good navigation style offers a fast and clear path for users to finish their tasks. In SAP Fiori for iOS, we support both hierarchical and flat navigation styles. 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.

iOS Human Interface Guidelines

To learn more about navigation styles,
see the iOS Human Interface Guidelines by Apple, Inc.

Hierarchical Navigation

Hierarchical navigation is good 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. Traversing the same content level is not recommend, as this may create an endless loop that makes it hard for the user to navigate back where they came from.

Hierarchical navigation (example)
Hierarchical navigation (example)

Flat Navigation

Flat navigation is good 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 provide a global search. Inside each tab, the user can drill down in a step-by-step fashion to access increasingly detailed content.

Flat navigation
Flat navigation

Avoid using tabs for profile and settings

In most cases, profile and settings are seen as app-specific content. It’s ideal to place only business-related content categories in the tab bar and to place app-specific content on the profile screen, which can be accessed from the nav bar.

Flat navigation (example)
Flat navigation (example)