Intro
The Profile & Settings pattern provides a centralized entry point for account management and app specific preferences. It follows a list-detail navigation model and is accessed from the avatar in the home screen of the app bar.
Profile and settings in a list-detail layout in compact (left) and large window size (right)
Anatomy
List-Page and Detail Page
A. Top App Bar
The profile header can include a profile image, name, job title, and user actions such as changing the profile image or managing work shifts. If no image is available, initials can be used.
B. Search Bar (Optional)
The search bar helps users quickly find specific settings. It is optional but recommended if there are many settings to navigate through.
C. Profile Section
The profile section includes all profile-related settings. It consists of a profile header component and may contain an object cell for additional profile actions, such as “Change employment.”
The profile section scrolls with the parent.
D. Section Body – List Page
The section body presents individual grouped settings. For apps with fewer than 15 settings options, use section bodies to organize content as on the detail page.
When grouping settings, separate individual sections with a consistent 16dp vertical spacing.
E. “Sign Out” Button
The “Sign Out” button enables users to log out of the application. It consists of a single button component placed under the section body and aligned to the right.
“Profile & Settings” list page anatomy
F. Section Body – Detail Page
On the detail page, the section body is divided into logically grouped sections. Each section can include various component types, such as list picker form cells or switch form cells, depending on the setting’s required interaction.
If an external link is added that redirects the user to another application or website, use the “sap-icon-link-external icon” in the cell to indicate this.
“Profile & Settings” detail page anatomy
Sections
A. Section Header
The section header component sits directly above category cells and displays the category name for group identification.
B. First Cell
The first cell in the list uses 16dp rounded top corners and 4dp at the bottom, emphasizing its position at the top of the section.
C. Intermediate Cells
Each intermediate cell features 4dp rounded corners and is separated from other cells by a 2dp vertical spacing, ensuring consistent grouping and spacing.
D. Last Cell
The last cell has 4dp rounding at the top and 16dp at the bottom, visually marking the end of the section.
“Profile & Settings” section anatomy
Behavior and Interaction
Navigating to the “Profile & Settings” Screen
To maintain consistency across all SAP products, the entry point for the “Profile & Settings” screen is located on the right side in the top app bar. It’s recommended to place the user profile on the home screen only.
“Profile & Settings” placement in compact and expanded window size classes
When users open the “Profile & Settings” page, a list page is displayed. If there are fewer than 15 settings, all options remain directly accessible on the list. For more than 15 settings, the list page shows grouped sections that can be drilled down, with individual settings appearing in a detail page or pane within the adaptive layout.
Drilldown to Detail Page
Drilling down to a detail page
Modal Screen for Profile Action
Performing profile actions in a modal screen
Profile Settings
Drilling down to customized profile settings
Adaptive Design
The Profile & Settings pattern adapts to compact, medium, extended, and large devices/ layouts.
“Profile & Settings” screen in a medium vertical layout
“Profile & Settings” screen in a medium horizontal (expanded) layout
For all larger device classes, the adaptive list-detail pattern is applied. The UI consists of a side-by-side layout with a list pane and a detail pane. When users select a category or setting from the list pane, the corresponding detail page appears in the detail pane.
The selected category is highlighted using a secondary container fill, helping users track their context. This layout leverages the extra space, supporting efficient multi-panel navigation, and improving discoverability of settings.
Profile and settings interaction in a large device class
Best Practices
Iconography
You may choose whether to use iconography. Icons are recommended if your app does not use many icons elsewhere—this helps avoid duplicating icon styles across the interface. When you do use iconography, ensure that the icons are visually relevant to the action or setting. For grouped sections, always use consistent icon colors within the same group to maintain visual clarity and strengthen category association.
Sections
When using sections to organize the settings, consider doing the following:
- Group thematically: Logically organize related settings together, such as placing all privacy options within one section.
- Keep categories distinct: Ensure settings appear in only one group with clear thematic boundaries.
- Consolidate groups wisely: If a group has just one setting, evaluate if it requires a separate category.
- Use headings & dividers: Apply clear and unique group titles and visual separators to distinguish between groups.
- Use unique titles: Use distinctive group titles and avoid generic labels like “Setting” on individual items.
- Maintain clarity: When there are over 15 settings, use sublists or subpages for better navigation.
- Use consistent layouts: Ensure uniform spacing, colors, and icons within each category for a cohesive look and feel.
- Keep groups concise: Aim for group sizes between three and seven items, minimizing cognitive load.
- Prioritize important groups: Place the most relevant or frequently used sections at the top.
Resources
SAP Fiori for iOS: Profile and Settings
Related Components/ Pattern: Canonical Layout, List-Detail Overview
[internal_only] UXC Articles: User Menu, Settings [/internal_only]