The Case Against Nested Modals In UX
UX challenges of nested modals, why they are causing compounding errors and confusion, and how to improve a product's flow without them.
Not every modal is the same. They can be useful, e.g. when sending users to another page is disruptive, or when they are in the middle of a complex flow. They also help maintain multiple contexts at the same time, e.g. perform related actions without interrupting current state on the main page.
However, nested modals — when two or more modals are stacked upon each other and block each other — deserve a special place in UX hell. There, the problem isn't even challenges around interaction.
Nested modals are common in complex products, but there are also alternatives to replace them. Source. Large view.
The problem is that nested modals compound data that users have to confirm or enter, without the option to access original context where the modal originated. And that's where people slow down, find workarounds and eventually make mistakes.
Let's see if we can fix it — and alternatives we can use.
Modals Block, Nested Modals Break #
Joseph Mueller has put together a practical guide on the challenges of nested modals with a lot of good points to consider when deciding for or rather against nested modals.
Nested modals are incredibly fragile, with plenty of accessibility and usability issues that are difficult to resolve:
- "Back" button and "Esc" key often don't match expectations as they close a modal, or series of modals and disrupting user's flow.
- Navigation between modals is often difficult because one modal has to be closed for the other to be accessible.
- On smaller screens, nested modals frequently overflow or lock scrolling, and it's difficult to escape without refresh.
- Important actions often get obscured or become inaccessible, somewhere between modals and virtual keyboards.
Alternatives To Nested Modals #
The blocking of nested modals often leads to users forgetting the context of their tasks and the data that they were referring to or processing. Keeping it all in memory is hard, and there is often no easy way to navigate between modals.
Not every modal is the same: modal, nonmodal, lightbox and non-lightbox comparison. Source. Large view.
The one thing that might help is to make them collapsible, but then they don't clearly stack and dependencies between them are no longer obvious. As a result, users often "confirm away" modals on auto-pilot just to get back to the main screen.
Inline edit in action: helpful for making changes in the flow, without losing surrounding context. Source. Large view.
Instead of stacking modals, we have a few better alternatives:
- Modal Navigation Horizontal flow within a modal, with a way to move back and forth or close it
- Tabbed Modal Tabbed navigation within sections in a modal
- Drawer / Sidebar Expandable persistent panel on the left, right or at the bottom
- Inline Edit Making changes in the flow, with context around it
- Inline Reveal Expandable section within the content area
- Popovers Overlays that give more context + more actions
- Context summary Navigate to a new page that summarizes key details, making review easier
You can find examples for each pattern in Joseph's article on Removing Nested Modals From Digital Products.
Nested modals make it necessary for users to remember what they are dealing with across multiple UI layers. That's why they often open the same application view in another tab just to look up things, or confirm what they are acting upon. And once they get distracted, they often have to start all over again.
Wrapping Up #
Complex products must match the complexity of the real world. But complex products don't have to be complicated. And nested modals is the opposite of what they need — poor visibility, a lot of back and forth, and shortcuts to make things work for them.
What expert users need are not a stack of nested modals, but a clear overview that supports their decision making. And often that means "out-and-back" flow — to complete a new task and then quickly get back to where they left off. Nested modals are just really poor in delivering on that.
Useful Resources #
- Removing Nested Modals From Digital Products, by Joseph Mueller
- Modals UX: Best Practices and Pitfalls, by Eleken
- Modal vs. Separate Page: UX Decision Tree, by Smashing Magazine
