Interactive Pop-Ups

What They Are

Interactive pop-ups are modal elements that are displayed above a view. Its modal nature means that the user cannot interact with the view beneath while the pop-up is displayed. A scrim is displayed beneath the interactive pop-up to indicate to the user that the view is non-interactive.

As the name suggests, interactive pop-ups contain interactive content that is displayed inside a pop-up. The content varies freely depending on the app and the task at hand. The content area is scrollable vertically if the content does not fit within the vertical space. Pop-ups can contain either a single level of content or multiple levels.

In addition to the content area, pop-ups also contain a button area and an optional header area. Headers may sit in the chrome or scroll with the content. Pop-ups may contain a title or instructions for the user. Pop-ups may or may not be editable.

Buttons always sit in the chrome and cannot be scrolled. Buttons may be stacked or placed side-by-side. In general, action buttons (buttons that trigger certain actions, for example, "Print") are stacked and navigation buttons (buttons used to confirm, cancel or navigate between views) are shown side-by-side. If buttons are displayed side-by-side, no more than two buttons should be shown in the pop-up.

1. Header area - Title or instructions
2. Content area
3. Button area

When To Use

Use interactive pop-ups to perform small, self-contained, subtasks that the user must perform to accomplish the main task at hand. The subtask should be relevant to the view from which it was launched. On tablet devices that have large screens, navigating away from the view to perform these smaller tasks can be disorienting. Interactive pop-ups allow the user to remain within the context of the view that the interactive pop-ups are in.

Nevertheless, avoid the temptation to put too much interaction inside a pop-up. Interaction inside a pop-up should be brief and contained and should be used sparingly and only if there is not an elegant way to perform the interaction inline. An interactive pop-up should not be the main way for the user to interact with a view.