Updated: September 28, 2017

Profile & Settings

Intro

Profile is a modal view which is a container that holds various user and app specific settings and allows the user to customize their app experience.

Structure

A. Profile header

Profile header can contain items that provide more information about the user such as a profile image, user’s name, job title etc. If profile image is not available then the user’s initials will replace the image.

Header can also contain an action that the user can take immediately such as changing the profile image, starting/ending a work shift.

B. Settings

Settings may include user’s personal information, app specific preferences like units of measure, permissions and notification preferences. It allows the user to edit and personalize their experience in interacting with the app.

C. App information

Group the general information such as about, legal, feedback together under the App information section. If the app only has a version number in the about section, then include it at the bottom of the main profile screen.

D. Sign out and Sync

Include a way for the user to sign out of the app. In demo mode, this is used to exit the demo.

A manual sync button can also be included in this section.

Structure
Structure

Navigation

Flat navigation

For apps that use flat navigation, the user profile is generally accessible on the main screen of each content category, with a touch target placed in the upper-left corner of the screen.

Hierarchical navigation

In apps that use hierarchical navigation, the user profile is accessible only from the main entry screen, with a touch target placed in the upper-left corner of the screen.

Flat Navigation
Flat Navigation
Hierarchical Navigation
Hierarchical Navigation

Compact & Regular

Profile supports both compact and regular width. In compact, profile is a full-screen modal. However, in regular width, profile is a form sheet modal.

Currently not available in SDK
Currently not available in SDK

Behavior & Interaction

In compact view, profile being a modal, will slide up from the bottom of the screen and stay in the screen until the user takes actions to exit the modal. In regular view, profile will be a form sheet modal.

Close allows the user to exit Profile.