Multi-user Onboarding
Intro
The multi-user onboarding pattern is used to address onboarding scenarios where more than one users may share a device. Users are able to select from a list of existing accounts on the device to login with or add a new account.
Multi-user onboarding pattern is an extension of, or additional module to, the general onboarding pattern which can be better illustrated here.
Much like the general onboarding pattern, the multi-user onboarding process and designs can vary depending on the configuration of the application by the admin or the IT department to provide more flexibility.
Multi-user Onboarding Process Flow
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 compact screens and one row for regular.
B. User Profile
User profile can 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 admins and developers the 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: Use as the primary identifier for the user, like their name.
• User Subtitle: Use as the secondary identifier for the user, like their job title.
C. Sign In Form
• Passcode Field: Can be set to accept strictly numeric or alphanumeric.
• Sign In Button: The button label should be “Sign 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 screen where they can recover 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
E. Navigation Bar
The navigation bar contains a “Back” Button, Screen Title, and the Add New User Action Button.
F. Search Field
The search field is located below the navigation bar.
G. Selected User Section
The selected user section sits below the search field and indicates the current user selected on the sign in screen.
H. User List
The user list sits below the search field and displays available users that have already onboarded on that specific device.
Behavior & Interaction
As another modular part of the overall onboarding pattern, multi-user onboarding…
Once the user takes an action on a view to proceed further, the next view in the process is presented. Include a blank white screen as a layer above the launch screen when these modular transitions take place. Once the entire onboarding process is complete, the launch screen transitions into the Home screen of the app.
Sign In
The user profile that is loaded/selected on the “Sign In” screen is the current/previous user’s by default. To sign in with the currently selected user profile, the user needs to first tap on the passcode input field and enter in their passcode.
Passcode Field
Tapping on the passcode field will shift up the content view adjusting for the system keyboard. The placeholder “Passcode” italicized text will be replaced with the user’s obfuscated passcode entry.
Sign In Button
Tapping on the enabled “Sign In” button, the user will start the user authentication and sync process.
Forgot Passcode Link
Tapping the “Forgot Passcode?” link will trigger a push to another screen where the user can retrieve or change their passcode.
Switch or Add User Button
Tapping “Switch or Add User” will push to the “Switch or Add User” screen
Switch or Add User
Back Button
The “Back” button saves the current user profile selection and closes the modal, returning to the Sign In screen with the updated user profile.
Add User Button
The “Add User” icon button opens to the onboarding flow.
Search
The local search uses a prominent search bar that allows users to search for and select user profiles that onboarded and have been stored on the device. For more information, see Search.
User List
The user list works like the List Picker component, the user taps on a listed user profile to select and deselect. A checkmark indicates the user’s selection. List title sections like “Selected” and “All” are displayed depending on whether the number of user profiles can fit in the view.
Sign In
The user profile section can be modified by admin or developers to display certain information types. When the keyboard is enabled, and there is enough content on the screen to cause the keyboard to ‘push’ the screen up in order to keep the text field and the text field button in view, an extra 36 px of padding should be added below the “Switch or Add User” default button for compact view (32 px for landscape regular view), anchoring the visible content to a total of 44 px (8 + 36) above the top of the keyboard.
List Picker Contact Cell
The List Picker Contact Cells can be modified by admin or developers to display certain information types (usually in tandem with the user profile settings).
