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

Alternative UX Patterns: Avoiding Nested Modals in Digital Products

Rating
Design Trends
06 Apr 2022
6 min read
Update:

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 2
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 from ui ux design services.

Alternative UX Patterns: Avoiding Nested Modals in Digital Products 3

  • 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 4

  • 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 5

  • 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 6

  • 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. For that hire ux developer

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!

Got a project in mind?

Reach out to us at Fireart, and we'll help you bring it to life

Your name
Email
Message

Our Clients

Over 200 brands have built their products with us at Fireart. Yours might be next!

Rolls-Royce
Limehome
Just Eat
FREE NOW
Bolt
TheoremReach
Pipedrive
Back Office
Toggle
Google
Atlassian
ByNext
Swisscom
JAM
dots