When to use a modal dialog for a design task
Choose a modal only for a bounded interruption, then plan its content, focus, dismissal, and recovery using a destructive project action as a worked example.
Choose a necessary interruption
A modal dialog interrupts the current task and asks someone to deal with a smaller task before continuing. That can be appropriate for confirming deletion of a project, but poor for reading a long exhibition guide. Choose a modal because the interruption is necessary, not because a floating card looks visually tidy.
Name the object and consequence
Give the dialog one purpose and name the affected object. Delete untitled project is more specific than Are you sure. Use a clearly labeled cancellation action and a destructive action that describes the consequence. The W3C dialog pattern provides keyboard and focus guidance; test the actual implementation rather than assuming its appearance supplies that behavior. Treat every additional requirement as a question with an owner. Determine whether the requirement comes from a real task, an operational constraint, or a team preference. Keep the first two visible in the design and challenge the third when it creates work. Writing these distinctions next to the sketch prevents a tidy layout from concealing an unresolved service decision or an unexplained restriction.
Design deletion of a moodboard
Design a dialog for deleting a moodboard containing twelve references. Show the board name and whether deletion can be undone. Sketch the opening state, cancellation, confirmed deletion, and the destination afterward. If the triggering button disappears after deletion, identify a sensible place for focus to continue. Use ordinary content rather than a perfect demonstration record. Include one short entry, one unusually long entry, and one entry with missing optional information. Work through the task in the order a newcomer would encounter it. Write down what they can reasonably know at each point. Whenever the sketch requires an explanation from its creator, add the missing cue to the artifact before increasing its visual fidelity.
Avoid hidden controls and nested tasks
A dialog can fail when its text grows beyond the visible area or when background controls remain operable. It can also become a dead end if dismissal loses unsaved changes without explanation. Move substantial editing or comparison into a page rather than nesting another dialog inside an already complicated interruption. Avoid solving the failure by asking people to be more careful. Look for an earlier decision the design can clarify, a value it can preserve, or a consequence it can make reversible. If there is an unavoidable limitation, explain it before the affected action and provide a useful next step. The fallback deserves the same attention as the ordinary route through the experience.
Check entry, cancellation, and return
Review the task by entering, completing, and canceling it using a keyboard. Inspect the focus destination after every outcome and confirm that the affected object remains unambiguous. Ask whether the dialog protects a meaningful consequence. If the action is routine and readily reversible, an undo design may create a calmer experience than repeated confirmations.
Worked decision
Name Surface Studies in the deletion dialog. After cancellation, return to its original delete control; after deletion, move to the remaining board list.
References & further reading
Examples and exercises in this guide are original teaching scenarios.
