Modal Dialog Design: What Actually Works
Designing dialogs that interrupt the current task to ask for a decision or show critical information, and deciding when a modal is the right choice at all.
Priya Raghunathan
The key figures
- Modal behavior
- content behind the dialog is inert until it closes
- Focus
- moves into the dialog when opened and returns to the trigger when closed
- Escape key
- should close the dialog
- Accessible name
- dialogs need a title that is announced
Why this is worth getting right
Modals block everything else on screen, so overused or badly built modals frustrate users and are a frequent accessibility failure.
Do this, not that
Do
- Use modals only for decisions that need immediate attention
- Give every modal a clear title and close control
- Keep modal content short
- Return focus to where the user was
- Consider inline or page alternatives first
Don’t
- Modals that open on page load
- Stacked modals
- Long forms inside modals
- Modals with no visible way to close
When to bring in help
Our advice Bring in help when an interface relies heavily on modals, or when modal components fail accessibility testing.
Where this comes from
- W3C ARIA Authoring Practices Guide — Dialog (Modal) pattern
- Nielsen Norman Group — Modal and nonmodal dialogs
- Apple Human Interface Guidelines — Alerts
The figures and practices above come from the sources listed.
Working on something like this?
We take on UI & UX Design work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
