Modal vs. Separate Page: UX Decision Tree

You probably have been there before. How do we choose between showing a modal to users, and when do we navigate them to a separate, new page? And does it matter at all? Actually, it does. The decision influences users’ flow, their context, their ability to look up details, and with it error frequency and task completion . Both options can be disruptive and frustrating — at the wrong time, and at the wrong place. So we’d better get it right. Well, let’s see how to do just that. Modals vs. Dialogs vs. Overlays vs. Lightboxes While we often speak about a single modal UI component, we often ignore fine, intricate nuances between all the different types of modals. In fact, not every modal is the same . Modals, dialogs, overlays, and lightboxes — all sound similar, but they are actually quite different: Dialog A generic term for “conversation” (user ↔ system). Overlay A small content panel displayed on top of a page. Modal User must interact with overlay + background disabled . Nonmodal User must interact with overlay + background enabled . Lightbox Dimmed background to focus attention on the modal. As Anna Kaley highlights , most overlays appear at the wrong time, interrupt users during critical tasks, use poor language, and break users’ flow. They are interruptive by nature , and typically with a high level of severity without a strong need for that. Surely users must be slowed down and interrupted if the consequences of their action have a high impact, but for most scenarios non-modals are much more subtle and a more friendly option to bring something to the user’s attention. If anything, I always suggest it to be a default . Modals → For Single, Self-Contained Tasks As designers, we often dismiss modals as irrelevant and annoying — and often they are! — yet they have their value as well. They can be very helpful to warn users about potential mistakes or help them avoid data loss. They can also help perform related actions or drill down into details without interruptin