This is an open space for collaborating on a dialogue pattern. To join in the conversation please add a comment below.
Dialogues make a user stop and think by presenting them with a critical action or piece of information required to continue.
Use dialogues to:
- Notify a user of an immediate response required to continue
- Confirm a user’s action when it cannot be undone
- Notify a user of urgent information that affects their current process
- Ensure the headline and buttons are clear and reflect the action
- Clearly explain the potential consequences of the action
- Use danger dialogues for destructive or irreversible actions
- Where applicable, give the user an option which will close the dialogue with no change - ** Great to hear feedback on when a close button would be required/used over the secondary action button, or where they would perform different actions **
- Over use dialogues as this will cause disruption to the user
- Transactional - Alert a user to urgent information they must acknowledge before continuing
- Danger - Alert a user to a destructive or irreversible action they must confirm before continuing
- Have a clear message
- Focus on a single task
- Where possible, contain no more than two actions (primary and secondary).
- When a dialogue is opened, keyboard focus should move automatically to the dialogue container.
- Keyboard focus should cycle through the dialogue content and should not leave until dialogue is closed.
- Pressing the ESC key or selecting an action that cancels the process should close the dialogue and return user to the underlying page.
- When closed, keyboard focus should return back to the component that launched the dialogue.
These awesome collaborators have contributed insights, knowledge, and time to the information above: