The signature form cell is an entry point for users to launch the signature capture component.

Usage

• Use the signature capture form cell when user consent is required.
• Use a concise header to communicate the purpose and importance of the signature requirement.
• Use an asterisk (*) next to the header to indicate that the signature is required.

Don’t use the signature capture form cell for insignificant or non-essential tasks.

Anatomy

A. Header

The header introduces the signature form cell.

B. Text Label

The text label describes what the signature is for.

C. Helper Text

The helper text provides additional information about the form cell. 

D. “Add Signature” Button

The “Add Signature” button launches the dialog for the signature capture when tapped.

Behavior and Interaction

The signature icon is the touch target for the form cell. When it is tapped, it navigates users to the signature capture.

Adaptive Design

The full width of the signature form cell adapts to different screen sizes.

Resources

Development: SignatureCaptureFormCell

Related Components/Patterns: Signature Capture, Button, Signature Capture Inline

The multi-user onboarding pattern addresses onboarding scenarios where more than one user may share a device. Users can select from a list of existing accounts on the device to log in with or add a new account. The multi-user onboarding pattern is an extension of the single-user onboarding pattern. Much like the single-user onboarding pattern, the multi-user onboarding process and designs can vary depending on the application’s configuration. 

Usage

Only use the multi-user onboarding pattern when there is more than one user who may share a single device. It is used in tandem with the single-user onboarding pattern as an additional module to the overall onboarding process. 

Don’t use multi-user onboarding if devices are not being shared by multiple individuals.

Anatomy

Sign In

A. Application Details

• App Logo (Optional): Recommended for better branding visuals.
• App Title: Use clear and concise naming conventions for the application’s title. It’s recommended to keep the title length to two rows for mobile or one row for tablet.

B. User Profile

The user profile may contain items that provide more information about the user, such as a profile image, user’s name, job title, etc. The items are fully customizable to provide flexibility to address any privacy or security concerns. 

• User Image (Optional): If a user’s profile image is not available, then the user’s initials can replace the image instead.
• User Title: This is the primary identifier for the user.
• User Subtitle: This is the secondary identifier for the user.

C. Sign In Form

• Passcode Field: The passcode is local to the specific device and user.
• Sign In Button: The button label should be signed in as the primary call to action. Before a passcode is entered, the sign in button should remain disabled. When tapped, the credentials are validated and will route the user to the sync flow.
• Forgot Passcode Link: Takes users to a flow where they can recover or change their passcode.

D. Switch or Add User Button

Allows the user to either select existing user accounts on the device to sign in with or add a new user and go through the onboarding process.

Switch or Add User

A. App Bar

The app bar contains a back button, search button, screen title, and the add new user button.

B. Selected User Section

The selected user section indicates the current user.

C. User List 

The user list displays available users that have already onboarded on that specific device.

Sync

A. App Bar

The app bar contains a back button and screen title.

B. Sync Indicator

The sync indicator contains items that provide information about sync progress

• Linear Indicator: Determinate indicators display how long a process will take. They should be used when a process completion can be measured.
• Title Area: The title area is used to place the main text content related to the sync status.
• Description: A description is used to provide supplementary information relating to the sync status. It is recommended that the description label does not exceed three lines.

Connection Sync Error  

A. App Bar

The app bar contains a back button and screen title.

B. Error Indicator

• Title Area: The title area is used to place the main text content related to the error.
• Description: A description is used to provide supplementary information relating to the error. It is recommended that the description label does not exceed three lines.
• Try Again Button: Allow the user to resync to possibly fix the error.

User Sync Error

A. App Bar

The app bar contains a back button and screen title.

B. Error Indicator

• Title Area: The title area is used to place the main text content related to the error.
• Description: A description is used to provide supplementary information relating to the error. It is recommended that the description label does not exceed three lines.

C. Affected User

This section shows the related user that the current user needs to contact to fix the issue.

• User Image (Optional): If a user’s profile image is not available then the user’s initials can replace the image instead.
• User Title: User title is the primary identifier for the user.
• User Subtitle: User subtitle is the secondary identifier for the user.
• Description: A description is used to provide supplementary information relating to the affected user. It is recommended that the description label does not exceed three lines.

D. Return to Login Screen

Allow the user to return to the login screen to allow the related user to login into their account to fix the error.

Adaptive Design

Resources

Development: FlowType, flows2

SAP Fiori for iOS: Multi-User Onboarding

Related Components/Patterns: Single-User Onboarding, Search 

Signature capture inline is a variation of the signature capture component. This variation allows users to input their signature on a screen that is shared with other components.

Usage

Signature capture inline may be used when users need to view content on the screen along with the signature input area. This provides users with more context on what they are signing for.

Anatomy

Default State

A. Header

The header introduces the signature capture inline. It is the only part of the component that is not covered by the activation scrim.

B. Activation Scrim

The activation scrim is an overlay that is placed on top of the signature cell. When the scrim is present, the signature cell is deactivated, and the user cannot sign. The user must tap on the scrim to activate the signature cell.

C. Text Label 

The “Tap to Sign” text label provides a call-to-action for the user.

Active State

A. Header

The header introduces the signature capture inline.

B. “Cancel” Action Button

The “Cancel” action button allows for the user to exit the active signing area.

C. Signature Line

The signature line prompts the user to input their signature in the space given.

D. Action Button Footer 

The action button footer provides the user two action buttons for the signing process. The “Clear” button erases what the user has signed on the screen. The “Save” button saves what the user has signed on the screen. Pressing the “Save” button will trigger the view mode of the signature and the “Re-enter Signature” button to appear.

View Mode

A. Header

The header introduces the signature capture inline.

B. Saved Signature

Once the user saves, the signature becomes transparent to indicate the signing area is deactivated.

C. “Re-Enter Signature” Button  

The “Re-Enter Signature” button allows the user to reactivate the cell and input a new signature.

Behavior and Interaction

Activation Scrim

The activation scrim is a call-to-action for the user to input their signature. It also allows the user to scroll on the rest of the screen without accidentally signing in the signature capture inline cell. The “Tap to Sign” activation scrim appears only in the first instance where the signature capture inline cell has not been activated yet.

Re-Enter Signature  

The “Re-Enter Signature” button appears once the user has pressed the “Save” button to save their signature. If pressed, it will clear the saved signature, reactivate the cell, and allow the user to sign.

Resources

Development: SignatureCaptureFormCell

SAP Fiori for iOS: In-line Signature Form Cell

Related Components/Patterns: Signature Capture