Updated: November 30, 2020

Consent Forms

Intro

The Consent Form pattern is generally used in onboarding scenarios. It gives another party (the application in this case) a digital record of the user’s understanding and permission of the terms of an event, activity, or service that will be performed by the application.

Structure

A. Navigation Bar

The Navigation Bar contains the consent form action buttons (like cancel, back, or next). 

B. Body Title

The Body Title should be a concise label that describes the consent form topic.

C. Body Text

The Body Text should detail how the consent form topic pertains to the app and why it is important for the user to enable or agree to the form.

D. Learn More Link (Optional)

The Learn More Link lets users learn more about the consent form topic.

E. Toolbar with Actions

the Toolbar is used for the primary consent form actions.

 

Variations

Form Conditions

Optional

If the user taps on ‘Not Now’ or ‘Allow’ then there is no alert. It will simply dismiss the consent form and will take the user to the next step of the onboarding process.

Mandatory

If the user taps on ‘Deny’ they will get an alert saying they must give consent to continue. Tapping ‘Allow’ will dismiss the modal and take them to the next step in the onboarding process.

Form Arrangements

Single and sequential forms can be either mandatory or optional. If there are a mix of single and sequential consent forms, the single consent form will be a separate modal and the sequential forms will be presented in a separate modal.

Single

If there are multiple single consent forms, they will all be presented as separate modals (should not be bundled in one modal). There are no Titles on the Single Consent screens.

Sequential

For sequential forms, the navigation bar shows the current & total numbers of the form pages. The action bar doesn’t appear until the user reaches the last page in the form.

Behavior & Interaction

Scroll

When scroll is enabled, the navigation bar will support the iOS default transparency and background blur. Scroll Behavior is applicable to all Compact and Regular Widths. Note: triggering a consent form will have the form modal slide up from the bottom of the screen, on dismissal the modal will slide down.

Alerts

The alerts for the consent forms use the standard two-button iOS alert.

Cancel

Optional and Mandatory scenarios: if the user taps ‘Cancel’ they will trigger an alert asking if they want to quit the onboarding process. Choosing ‘No’ will dismiss the alert and will continue with the onboarding process.

Deny

Mandatory scenario: if the user taps on ‘Deny’ on a screen that requires consent then they will trigger an alert that says the user must give consent in order to continue with the onboarding process.

Sequential

The first step of the sequential form will always have ‘Cancel’ in the navbar. The first step will be a modal that slides up from the bottom of the screen. From step 1, the user must tap ‘Next’ to continue to the next steps.

All subsequent steps will have ‘<Back (Screen Title)’. They can go back to the previous step by tapping the back navigation in the navbar. The following steps will be a push. The final step will have the toolbar with actions ‘Not Now’ or ‘Deny’ and ‘Allow’. When the last step is complete, the modal will dismiss and slide down.

Specifications

Compact

When the text wraps and pushes the “Learn more _____” label down, and the 64 padding reaches below the end of the screen, scrolling should be enabled.

This is the same whether or not the toolbar is present. Note: Padding is the same for Single and Sequential consent forms.

Regular

Similar to Compact in the way that when the text wraps and pushes the “Learn more _____” label down, and the 64 padding reaches below the end of the screen, scrolling should be enabled (Same whether or not the toolbar is present). 

The padding is the same for all regular sizes, the only changes are the default layout margins for each screen size (252 px for landscape and 48 px for portrait)

Resources