Updated: June 20, 2017

Navigation

Intro

A good navigation style presents a fast and clear path for the user to finish their task. In Fiori for iOS, we support both hierarchical and flat navigation style. When designing an App, it should always be the first steps to evaluate the content structure and select the proper navigation style that brings most clarity and efficiency.

iOS Human Interface Guidelines

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

Hierarchical Navigation

Hierarchical navigation is good for Apps with one single content category. Apps with hierarchical navigation style usually start with an overview screen that provides a high-level summary of the entire app. Users can unfold more information by further drilldown to all the subcategories.

Hierarchical navigation
Hierarchical navigation

Prevent endless loop

In hierarchical navigation style, the user can only go back and forth step by step. Traversing on the same content level is not recommend as it may create an endless loop and makes it hard for the user to navigate back.

Hierarchical navigation (example)
Hierarchical navigation (example)

Flat Navigation

Flat navigation is good for Apps with multiple content categories. A tab bar is used for flat navigation and each tab represents one content category. An optional search tab can be used for searching global content. Inside each tab, the user can drilldown step by step to more detail content.

Flat navigation
Flat navigation

Avoid using tab 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 place app specific content on the profile screen which can be accessed from the nav bar.

Flat Navigation (Example)
Flat Navigation (Example)