Usage Patterns

Intro

iOS provides several presentation modifiers or views to display information, such as full-screen views, modal sheets, popovers, and inspectors.

We have mapped common user tasks to recommended container types, window size classes, and best practices to ensure consistency within SAP Fiori apps.

Data Entry

Creating or editing data, such as forms or structured inputs.

Recommended presentation modifiers or views:

Compact:

  • Modal form sheet (large detent): for task-oriented, temporary data entry
  • Full-screen modal: for longer flows or multiple steps; to keep focus and having no distraction

Consider object/form in edit mode with nested pages that might bring the user to another hierarchy level. Use push navigation within the existing modal in such cases.

Regular:

  • Modal form sheet: for task-oriented, temporary data entry
  • Modal page sheet: For longer flows or multiple steps; to keep focus and having no distraction

Searching & Browsing

Finding and exploring content efficiently.

Recommended presentation modifiers or views:

Compact: Full-screen list to keep users focused on scanning and comparing items without distractions.
Regular: full-screen list (global search) or list detail (for local search)

Task Execution

Performing a specific action or completing a workflow.

Recommended presentation modifiers or views:

Compact: Full-screen list for a focused view.
Regular: List detail or split view for improved efficiency by allowing users to view both the task list and selected item simultaneously, reducing navigation effort and maintaining context.

Approval & Review

Reviewing and approving items or requests.

Recommended presentation modifiers or views:

Compact: Full-screen list
Regular: List detail to allow users to quickly scan through multiple items and review individual details side-by-side.

Filtering & Sorting

Refining or organizing displayed content.

Recommended presentation modifiers or views:

Compact: Modal form sheet (large detent) for a focused, full-screen experience that supports concentration on smaller devices.

Regular: Popover for quick, lightweight access to filtering options without disrupting the broader content layout, making efficient use of the available screen space.

If filters are very complex, for example, many categories, a modal sheet can be used to provide enough space without overwhelming a small popover.

Attachments and Notes

Adding or viewing supplementary content.

Recommended presentation modifiers or views:

Compact: Modal sheet for maintaining user focus and ensuring that adding or viewing contextual information doesn’t interrupt the main task.
Regular: Modal sheet for maintaining user focus and ensuring that adding or viewing contextual information doesn’t interrupt the main task.

Settings and Preferences

Configuring app behavior and user preferences.

Recommended presentation modifiers or views:

Compact:

  • Full-screen list: for browsing and accessing multiple settings categories in a hierarchical structure.
  • Full-screen modal: for performing a focused task or changing a specific setting that doesn't require navigating through multiple sections.
Regular: Modal page sheet to allow users to adjust preferences without navigating away from the main screen, offering focused editing while maintaining context in the background.

Comparison

Comparing two or more items side by side.

Recommended presentation modifiers or views:

Compact: Full-screen list that is scrollable with key comparison indicators, or allowing users to toggle between items via a segmented control.
Regular: Multi-column layout with two columns to display items next to each other.

Step-by-Step Flow

Guiding users through a multi-step process.

Recommended presentation modifiers or views:

Compact: Modal form sheet (large detent) to clearly separate the flow from the rest of the app. Full-screen modal supports back navigation per step.

Regular: Multi-column layout with two columns to show step context next to the current form.

The left column can show a vertical list of steps (step navigation). The middle column can show the main form or task content for the selected step. An inspector as a right column can show more details per step such as step guidance, or a completion checklist.