UX Decision Tree – Smashing Magazine

You’ve probably been there before. How do we choose between showing a modal to users, and when do we take them to a new, independent page? And does that matter at all?

Actually, that’s how it is. The decision influences the flow of users, their context, their ability to search for details and thus error frequency and task completion. Both options can be disruptive and frustrating – at the wrong time and in the wrong place.

So we better get it right. Well, let’s see how to do just that.

Manners vs. Dialogues vs. Overlays vs. Lightboxes

While we often talk about a single modal UI component, we often ignore the fine and intricate nuances between different types of modals. In fact, not all manners are the same. Modals, dialog boxes, overlays and lightboxes – they all sound similar, but they are actually quite different:

• Dialogue
  A generic term for “conversation” (user ↔ system).
• Cover
  A small content panel displayed at the top of a page.
• Modal
  User must interact with overlay + background. disabled.
• Non-modal
  User must interact with overlay + background. activated.
• light box
  Dimmed background to focus attention on the modal.

As Anna Kaley highlightsMost overlays appear at the wrong time, interrupt users during critical tasks, use poor language, and disrupt user flow. they are disruptive by natureand usually with a high level of severity without a great need for it.

Surely the users has to be slowed down and interrupted if the consequences of your action have a high impact, but for most scenarios The unmanners are much more subtle. and a friendlier option to draw the user’s attention to something. In any case, I always suggest that it be a default.

Manners → For individual and autonomous tasks

As designers, we often dismiss manners as irrelevant and annoying. And many times they are! – however, they also have their value. They can be of great help to warn users about possible errors or help them avoid data loss. They can also help you perform related actions or drill down into details without interrupting the current state of the page.

But the biggest advantage of modals is that they help users. maintain context of the current screen. It not only refers to the user interface, but also to the edited entry, scroll position, accordion status, filter selection, sorting, etc.

Sometimes users need confirm a selection quickly (e.g. filters as shown above) and then continue immediately from there. Autosave can accomplish the same thing, of course, but it’s not always necessary or desired. And locking the UI is usually not a good idea.

However, modals are not used for any task. We generally use them to unique and autonomous tasks where users must intervene, complete a task, and then return to where they were. As expected, they work well for short, high-priority interactions (e.g. alerts, destructive actions, quick confirmations).

When manners help:

🚫 Manners are often disruptive, invasive and confusing.
🚫 They make it difficult to compare and copy and paste.
✅ However, modals allow users to maintain multiple contexts.
✅ Useful to prevent irreversible errors and data loss.
✅ Useful if sending users to a new page would be harmful.

✅ Show a modal only if users will value the interruption.
✅ By default, prefer non-blocking (“non-modal”) dialogs.
✅ Allow users to minimize, hide or restore the dialog later.
✅ Use a modal to slow down users, for example checking complex inputs.
✅ Exit with “Close”, ESC key or click outside the box.

Pages → For complex multi-step workflows

magicians or tabbed navigation within modals doesn’t work very well, even on complex enterprise products; there, side panels or drawers usually work best. Problems begin when users need to compare or reference data points; however, modals block this behavior, so they reopen the same page in multiple tabs.

For more complex flows and multi-step processes, standalone pages work better. Pages also work best when they demand the user’s full attention and referencing the previous screen is not very helpful. And drawers work for subtasks that are too complex for a simple modal, but don’t need full page navigation.

When to avoid manners:

🚫 Avoid manners to error messages.
🚫 Avoid manners to feature notifications.
🚫 Avoid manners to onboarding experience.
🚫 Avoid complex manners, Long multi-step tasks..
🚫 Avoid multiple nested modals and use previous/next instead.
🚫 Avoid automatically activated modals unless absolutely necessary.

Avoid both for repeated tasks

In many complex, task-heavy products, users will find themselves performing the same tasks repeatedly, over and over again. There, Both modals and new page navigations add friction. because they break the flow or force users to collect missing data between all the different tabs or views.

Too often, users end up with a broken experience, filled with endless confirmations, exaggerated warnings, detailed instructions, or simply missing landmarks. As Saulio Stebulis mentionedIn these scenarios, expandable sections either editing in place They often work best: they keep the task docked on the current screen.

In practice, in many scenarios, users do not complete their tasks in isolation. They need to search for data, copy and paste values, refine entries in different places, or simply review similar records as they perform their tasks.

Overlays and drawers are more useful for maintaining access to background data during the task. As a result, the context always remains in place, available for reference or copy and paste. Save modals and page navigation for times when the interruption will really add value, especially to avoid critical errors.

Modals versus pages: a decision tree

A while back, Ryan Neufeld put together a very useful guide to help designers choose between modals and pages. Comes with a handy cheat sheet PNG and a Google Doc Template with questions divided into 7 sections.

It is extensive, extremely complete, but very easy to follow:

It may seem daunting, but it’s pretty simple. 4 step process:

1. Screen context.
   First, we check whether users need to maintain the context of the underlying screen.
2. Complexity and duration of the task..
   Simpler, focused, non-distracting tasks could use a modal, but long, complex flows need a page.
3. Reference to underlying page.
   Next, we check whether users need to frequently query data in the background or if the task is a simple confirmation or selection.
4. Choose the right overlay.
   Finally, if an overlay is really a good option, it guides us to choose between modal or non-modal (leaning towards a non-modal).

Concluding

Whenever possible, avoid locking the entire user interface. Have a floating dialog box that partially covers the user interface, but allows navigation, scrolling, and copy and paste. Or show the content of the modal as a side drawer. Or use a vertical accordion instead. Or take users to a separate page if you need to show a lot of details.

But if you want to increase the efficiency and speed of users, Avoid manners at all costs.. Use them to slow down users, focus their attention, and avoid errors. As Teresa Fessenden pointed outNo one likes to be interrupted, but if you have to, make sure it’s worth the cost.

Learn about “smart interface design patterns”

You can find a entire section on manners and alternatives in Smart interface design patternsour 15h video course with hundreds of practical examples from real-life projects, with live UX training later this year. Everything from mega dropdown menus to complex business tables, with 5 new segments added every year. Skip to free preview. Use code BIRDIE to save 15% off.

Useful resources