Dialogs

A dialog pop-up provides critical and timely information, and asks for the user’s decision on a task. It should deliver information relevant to the user’s current situation. The title and the first line of the body text should be simple and clear so users can understand the message immediately.

Usage

  • Don’t overuse

    Only use dialog pop-ups when you need a user to confirm something. If an action isn’t critical or can be reversed, provide a toast to inform the user that the task was completed.

  • Don’t repeat the same pop-up

    Only show pop-ups once unless they need to be repeated. Avoid asking users if they want to see the same pop-up again.

Elements

  • Title

    The title is optional and summarizes the body text. Don’t simply repeat the title of the menu that the user has selected.

  • Body content

    Body content explains an action that will follow the user’s confirmation. The first line should convey the most important information so users can understand what the pop-up is about by just scanning the text. An image or bullet points can make long passages of text easier to read.

Behavior

The title, body content, and image of a dialog pop-up all move together when users scroll the screen. In contrast, buttons remain in a fixed position so users can select them from anywhere in the pop-up. A dialog pop-up only closes when the user selects an option, such as Confirm or Cancel. The pop-up appears as a temporary view that interrupts the user’s current workflow.

Types

  • Confirmation pop-up

    A confirmation pop-up asks the user's intent before performing an irreversible action. It consists of the title and body content in the center, an OK button on the right, and a Cancel button on the left.

    Confirmation pop-up in developer’s guides

    Native

    popup > Buttons2

    Web

    Pop-up > side button

    A confirmation pop-up asks for the user’s agreement or decision.

  • Information pop-up

    An information pop-up displays important or critical information that needs to be confirmed by the user. It consists of the title, body content, and a bottom button.

    Information pop-up in developer’s guides

    Native

    popup > Buttons1

    Web

    Pop-up > Bottom button

    An information pop-up provides information that needs to be confirmed by the user.

Design specs

  • Confirmation pop-up

  • Information pop-up