Alternative UX Patterns: Avoiding Nested Modals in Digital Products 3 Alternative UX Patterns: Avoiding Nested Modals in Digital Products
Review: -1 - Alternative UX Patterns: Avoiding Nested Modals in Digital Products

It is well known that most users prefer clear, easy-to-follow navigation. According to Clutch’s survey, 94% of consumers think it’s the most important site feature. If the navigation is clumsy or hard to understand, they will just leave the website or uninstall the app. One can hardly associate nested modals with smooth app flow. Indeed, they were quite popular before the era of smartphones. Now, however, designers are looking for more linear patterns and intuitive options. Are they right? Should you stay away from nested modals? Let’s find it out in this article. 

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 17
Illustration by Alex Gorischek

What is a nested modal?

In a nutshell, nested modals are modals stacked upon each other, similar to a nested doll or matryoshka. If you open one modal and find another one inside it, you are dealing with a nested modal. 

Nested modals may consist of only two modals. Sometimes, their number can reach four or five extra windows, especially on old desktop apps.

Why should nested modals be avoided?

The most obvious issue with nested modals is that they often don’t work as intended. Many UI frameworks and tools were not designed to support them in the first place. No wonder using nesting modals can lead to bugs, errors, and unexpected behaviors. 

Nevertheless, that’s not the only problem when you stack one modal upon another. Nested modals are rarely welcome from the UX point of view. Here are just a couple of reasons.

Unnecessary complexity and ambiguity

Nested modals make users feel uncertain about their actions, and the achieved result. With two or more modals stacked upon each other, users might have no clue about what happens after they press the back button. Too many if-then steps may confuse to the point that one will lose track of one’s location within the app. 

No quick exit

Everyone should have a chance to use the close button to get back to start. However, it is impossible when the user is trapped in the nested modals. The only way out is through clothing all the modals one had to open before. That’s hardly a pleasant experience, don’t you agree?

Poor space utilization

Nested modals simply steal your screen space, which is a valuable asset on mobile devices. How does it happen? Modals use only a small percentage of the screen. The more of them appear, the more space around them stays unused. This may be acceptable on bigger screens, but it’s better to avoid nested modals for mobile devices.

What are the alternatives?

The best way to exclude nested modals is to switch to Conversational Interfaces – there will be no modals at all. But what if you want to stick to the good old graphical UI? Although nested modals may sometimes seem irreplaceable, that’s surely not the case. At least two approaches can avoid them – at the design and content levels.

Use different patterns

  • Sidebar. If you have a lot of additional content and enough horizontal space, you can put all the supplemental information in a column. But don’t forget that regular sidebars work better for bigger screens. For mobile devices, choose a collapsible one.

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 18

  • Popovers. They display small snippets of contextual content and require single-action interaction. Use them to display information that’s valuable only some of the time.

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 19

  • Tabbed Modal. This modal is easy to navigate and lets you display the content in a condensed form. Choose it to display logically connected bits of content.

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 20

  • Inline Edit. It lets users switch between reading and editing without losing the page context. Use it whenever it can replace an additional modal.

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 21

  • Inline Reveal. Saves precious vertical space and looks great on small screens, but doesn’t work well with bigger amounts of content.
  • Infinite Modal. This pattern strings modals instead of stacking them, which looks way better. Infinite modal imitates the familiar back/close navigation. Plus, users will have an emergency exit.

Reshape the Content

Looking for different UX patterns may help eliminate some nested modals. But sometimes, it is worth looking for other options, such as content adjustments. For instance, you can transform some modals into regular pages and add them to the primary flow. If there is not enough information to fill a separate page, you may consider adding the modal’s content to the existing ones. 

Your goal is to create a seamless experience for your users, an easy and logical app to go through. That’s not possible when users are forced to step sideways all the time. Therefore, small changes in the content structure could make your navigation clearer.

Nested Modals Belong to the Past

Using nested modals is a thing you want to avoid in your design. They interrupt the flow, make users feel lost and confused, steal screen space, and don’t behave well with some UI toolkits. If that’s not enough to exclude them from your design, they are definitely not trendy at the moment (if you wonder what is trendy, check our list of UI Trends for 2022). 

You can replace nested modals with more effortless and intuitive patterns. For instance, sidebars or inline options. Another way of dealing with them is through changes in the content. If you get rid of unnecessary sideways steps, you will be closer to the ideal out-and-back flow.

At Fireart Studio, we know how to avoid nested modals and make your design clear, intuitive, and easy to navigate. Do you want to check it by yourself? Don’t hesitate to contact us, and let’s talk about your project!


Update:

Want to work with us?

Just tell us about your project, what are your goals, and let's start.
Your name
Email
Message

“Boasting an outstanding quality of work, Fireart Studio implemented web designs that reflected the client's vision. The team was reliable and communicative, making for a smooth collaboration. They successfully delivered an online presence that the client is more than satisfied with."

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 25
Felix Rodriguez

"Prospective users praised the new website’s seamless incorporation of multiple dashboards and beautiful design. FireArt Studio’s collaborative approach, current technology stack, and extensive industry experience made the engagement enjoyable."

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 28
Julian Fagan

"Their deliverables earned positive feedback from the customer and end users. Particular points of praise for Fireart Studio's work included the UX/UI design, illustrations, and animations."

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 31
Bernhard Obenhuber

“The website and branding have met praise from customers, leading to more work for Fireart Studio. The team provides designs, UI/UX, and other services promptly without sacrificing quality. Professional, reliable, and quick to respond to inquiries, they oversee a smooth workflow."

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 34
Garik Goldsheyd

"Even competitors praised the website, which successfully clarified complex concepts and synchronized seamlessly with social media platforms. Although they could make more structured recommendations, FineArt Studio's affordable prices and round-the-clock availability made them a great resource."

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 37
Marcus Hendrikson

"FireArt Studio has a talented team that is skilled in design and illustration. Their work perfectly captured the desired look and feel and was very well received by the client. Their communication was also wonderful despite time zone differences."

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 40
Todd Irwin