The choice between a modal and a separate page directly affects error rates and task completion. This is not a stylistic preference. Modals, dialogs, overlays, and lightboxes are not interchangeable terms: a modal disables the background, a nonmodal keeps it active, and a lightbox dims it. Anna Kaley at Nielsen Norman Group documents that most overlays appear at the wrong moment, interrupt critical tasks, and break user flow. The default should be nonmodal, not modal.
Modals earn their place in one specific scenario: single, self-contained tasks where preserving page context, scroll position, filter state, and edited input matters. Use them to slow users down before destructive or irreversible actions. For anything multi-step, tabbed, or requiring data comparison across views, standalone pages or drawers outperform modals. Never use modals for error messages, onboarding, feature announcements, or nested flows. For repeated, task-heavy workflows, in-place editing and expandable sections reduce friction more than either option.
The article builds toward a practical decision tree originally assembled by Ryan Neufeld, available as a PNG cheatsheet and a Google Sheets template spanning 7 question categories. The framework is worth reading in full not for the conclusion, but for the granular breakdown of where drawers fit between modals and pages, and how context preservation should drive the choice rather than convention.
[READ ORIGINAL →]