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:
- Alert the person to what's happening
- Ask how to resolve it
Most in-app modals do this via three parts:
- A heading: Succinctly state what's happening (i.e., the reason the modal was fired)
- Body copy: Ask the user what they'd like to do about the situation
- 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!