Modals

← Back to Content patterns

In-app modals are essentially the app responding to a user-created situation that it doesn't know how to handle by itself. Therefore, they should:

  1. Alert the person to what's happening
  2. Ask how to resolve it

Most in-app modals do this via three parts:

  1. A heading: Succinctly state what's happening (i.e., the reason the modal was fired)
  2. Body copy: Ask the user what they'd like to do about the situation
  3. Buttons: Typically, two different options for how to resolve the situation. The wording should correspond to the question and use the same terms. Note how the example below uses "save" and "discard" as the terms for the options in both the question and the buttons (answers).

In-app modals should be as clear, jargon-free, and conversational as possible.

Modals

in use

You didn't save your changes

Would you like to save your changes, or discard them?

[ Save ] [ Discard ]

Tone

Clear, conversational, helpful

Readers' feelings

Phew! Glad Webflow caught that I was doing that. Now I can move on with confidence.

Resource(s)

Nothing yet!