Updated: September 28, 2017

Modal

Intro

The modal view is designed to focus the user’s attention on completing a task or reviewing critical content. In order to move past the modal, the user must tap a button to complete the task or save the data that has been changed. Always include a cancel button in the modal window to give users with a quick way to exit the window.

Each modal should be part of only a single task flow—don’t include any additional unrelated action buttons in the modal window.

Compact & Regular

Compact Width

In compact width, a modal is presented as a full-screen window.

Regular Width

In regular width, modals are generally displayed as form sheets, appearing in the center of the screen with a semi-transparent overlay underneath. The user can still see the screen content below the modal. These modals are designed to collect data from the user (with a field maintenance worker, for example, the modal could be used to collect data needed to create a follow-up job). Users should be able to complete the task presented by the modal without needing extra information outside its window.

Popover

In regular width, modals can be displayed via popover windows, which cover only part of the screen. The popover view is applied when a user needs to complete a quick task, or to provide additional information when the user taps a button—for example, the filter action can be presented as a popover within regular view. Tapping outside the popover window allows users to dismiss the modal.

Current context modal view

The current context modal view only appears in apps that use the split view. This modal type will typically cover the entire pane in which the modal action was triggered. In this example, the filter modal covers the master pane, indicating that the filter will affect the items in that pane alone.

Behavior & Interaction

A modal window, except the edit mode modal, typically slides up from the bottom of the screen and will remain on-screen until the user has taken an action to close it.

To exit a full-screen modal, the user must tap on one of two action buttons placed in the navigation bar. The button on the left is generally a “Cancel” button which abandons the current task. The button on the right is generally used to complete the task and save the user’s progress. The text for this complete button should use language that best describes the action at hand—for example, “Create” or “Add” should be used to prompt a creation action. Avoid using “Done” for the button language unless there is little chance the user would be unsure of what the result of this action would be.

In regular view, users should be able to tap outside of the modal view to exit the window. In this case, the task itself would not be completed, and any progress consequently would not be saved (i.e., it would function like tapping on a “Cancel” button).

Once an exit action is triggered on a full-screen modal, the modal window slides downwards until it has completely exited the screen. For popover type modals, when the exit action is triggered, the modal window fades out.