Modal dialogs focus attention on a decision or short task, such as confirming a consequential action. Because they interrupt the current flow, they should be used selectively, remain accessible to different input methods, and provide a clear way to continue or return.
A modal is like pausing a conversation to answer one important question; it helps when the question matters, but becomes disruptive when every detail demands an interruption.
Reserve interruption for a clear reason
A modal is appropriate when the task needs focused attention or a decision before the page can continue. Use an inline message or nonblocking panel for routine information. Avoid stacking dialogs, because each new layer makes it harder to understand where the original task went.
Keep the task short and clear
Give the dialog a specific title, concise explanation, and actions whose labels describe the outcome. Make the primary and secondary choices visually distinct. If the task requires extensive reading, multiple steps, or frequent reference to the underlying page, a dedicated screen may work better.
Manage focus and dismissal
When a dialog opens, move keyboard focus into it and keep focus within the modal until it closes. Support a visible close action and sensible Escape behavior where dismissal is safe. When it closes, restore focus to the control that opened it so keyboard and assistive-technology users can continue.
Handle small screens and waiting
On narrow screens, a modal may need to become a full-screen view or a bottom drawer, while keeping the same task and controls. Ensure content can scroll without hiding actions. During a save or network request, show progress and prevent duplicate submission without trapping the user indefinitely.
Frequently asked questions
Key takeaways
- Use a modal only when interruption helps complete a focused task.
- Explain the decision and label actions by their outcome.
- Manage focus, keyboard behavior, dismissal, and focus restoration.
- Adapt the dialog for small screens, scrolling, and waiting states.