Modal UX Design for SaaS in 2022 – Best Practices & Examples

Modal UX Design for SaaS in 2022 - Best Practices & Examples

Getting your modal UX right is a more important design issue than many product marketers believe.

It’s easy to focus on the flashiest parts of your product. But if it’s not clear from your modals how to use it, or you don’t interrupt your user with important messages when necessary, even the best-looking product only goes so far.

Rather than trying to design your modals from scratch, it’s more efficient to emulate the best practices already established by leading SaaS companies.

Let’s see what we can learn from their example.

TL;DR

  • A modal is a large, rectangular UI element that catches the user’s eye and draws them towards something that the product team deems important.
  • They normally consist of a header, body text, imagery, a CTA, an X button, and translucent background.
  • Common use cases include user onboarding, upselling and introducing new features, but there are instances in which other UI patterns are a better choice.
  • Don’t use too many modals at once, or make them too large.
  • Consider the needs of all types of devices and all types of neurodiversity in your design process.
  • It’s more efficient to build your modal code-free with Userpilot than it is to code it from scratch.

What is a modal?

Let’s begin with a basic definition.

A modal is a large, rectangular UI element created by SaaS companies to get a user’s attention.

A modal window appears not as a separate page, but rather as an overlay to whatever the user was doing before the modal pops up.

Due to the size of a modal, as well as the fact that modals often contain images, they are ideal for interrupting the user flow.

This makes them useful in urgent situations that require user interaction, such as when a customer needs to renew their subscription, but also means that overusing modals rapidly becomes annoying for users.

What elements should be part of your modal UX?

When planning out your modal UX, make sure that you design modal windows that include the following elements:

  • Header text
  • Body text
  • Graphics
  • Call to Action
  • X button
  • Translucent background

Let me explain the value of each of these elements in a bit more detail.

Header

header

Your header is the first bit of text that your customer will see. As such, it needs to immediately explain the purpose of the modal.

If it’s too confusing, your user will click away without a second’s thought.

Ideally, you want to refer explicitly to the desired action that you want your user to take.

For example, a modal upselling a new SEO audit feature might be titled “Audit your users.”

Body

body

The body (or “modal dialog,” if you want to get fancy) is the main section of text that customers see on your modal.

Keep it as brief as possible, using bullet points wherever you can.

Your goal should be to help users understand the value of the modal to them in 2-3 seconds.

Graphics

graphics

This is the eye-catching part of a modal.

It can be an image, a gif, a meme, or even a microvideo.

Bonus points if you use a little humour, or gamify the visuals in some way.

CTA

CTA

The Call to Action, or CTA for short, is where you drive your user to do whatever it is that your modal is set up to lead them towards.

It’s normally in the form of a button that the user needs to click on.

Make sure that your copy is as action-orientated as possible, using words like “today” or “now.”

X button

X button

If the user doesn’t click on the CTA button, they need some other way to exit the modal.

Otherwise, they’re just going to get annoyed with you, especially if whatever they were doing before your modal interrupted them was important.

Ensure that your X is as visible as possible by maintaining a good colour contrast between the X and the colour of the modal itself.

Put another way: a light blue X on a turquoise modal probably won’t be visible enough.

Translucent background

translucent background

Finally, remember that your modal is just an overlay to whatever screen the user was on before, not a new window in itself.

You can emphasize this by blurring out the user’s previous screen with a translucent background.

That way, the user knows they can return to it after they click the CTA or the X button.

Modal UX best practices

Now that you know what goes into a modal, let’s explore how your SaaS company can get the most out of them.

To modal or not to modal?

The most fundamental modal design question is whether a modal is the best choice to achieve your desired goal, or whether a different UI pattern would work better.

We’ve seen modals work well for:

By contrast, modals are not the best choice for error messages, because they block the user’s screen, potentially making the error message confusing. A small banner or lightbox might be a better choice.

Source: Dribbble

They’re also not the best choice to let the user know that something is loading. Again, this is because they block the screen. It would be smarter to use a small “loading” icon and let the user continue to use your app while waiting.

Don’t overuse modals

Because modals are so disruptive to the user’s workflow, you’ll annoy your customers if you bombard them with them all the time.

Most of the time, you should never use more than one modal consecutively.

If you’re building a product tour, it’s better to allow the user to click through multiple screens on one modal carousel-style, as opposed to creating multiple modals.

This particular rule of modal design is especially applicable to modals that are initiated automatically by your system.

Such modals are more disruptive than a modal that appears because a user explicitly interacts with your app to initiate it. They’re more surprising to users.

You should therefore use system-initiated modals sparingly. The only situations that might warrant something like this are urgent things like the customer’s subscription being about to expire.

Don’t make your modals too big

The larger your modals are, the more your customers will feel the sense of disruption that we’ve referred to numerous times in this article.

By restricting the size of your modals to 20-25% of the overall user interface, and by keeping what the user was doing previously behind a translucent background, you can keep the disruption to a minimum.

If you have more information to impart than fits on one modal, I would recommend creating a dedicated landing page instead.

Be careful using modals on mobile

Notwithstanding the magic of responsive design, modals are often clunky on mobile devices.

They’re so large that the X button and CTA sometimes get lost, despite the best intentions of developers.

So from a user perspective, you’re stuck with a modal that you can’t get rid of. This normally leads to quitting the app at best or churning at worst.

A small tooltip is normally a better choice. Ultimately, you want to encourage user participation in your app, not block their entire screen.

Keep your modals accessible

Not all users browse apps in the same way that you do.

For this reason, you should ensure that users who are dependent on screen readers or keyboards are just as able to access your modals as any other type of user.

One of my favourite ways of doing this is to enable the use of the tab key to navigate through modal elements one by one and then use the enter key to select the CTA, the X button, or anything else.

For more discussion of this important subject, please consider reading this post.

Don’t code your modals manually

Coding modals from scratch is time-consuming. And that doesn’t include the time and money you’d have to spend tweaking the colours and design after they’re built.

A better solution is to use onboarding software like Userpilot so that your product managers can build and iterate on modals without having to code.

This will free up your developers to work on engineering your product, which is why they were hired in the first place, right?

For further exploration of onboarding software options on the market, check out this article.

Modal UX examples

Having gone through what makes a modal and how to use them, let’s apply our new knowledge to several modals currently being used by SaaS companies and see how good they are.

Asana: new feature modal

This is a modal used by project management software Asana to inform customers about a new, more advanced reporting feature.

What we like about this modal:

  • The value proposition is fairly clear from the header and the body.
  • The X button is extremely visible, giving users a way out of the modal if they want it.

What could be done better:

  • It’s generally advisable to have one CTA only. The presence of the “Learn more” link gives customers another option to think about.
  • There’s quite a lot of graphics. I wonder if the same value could have been communicated with one graphic, instead of four.

Monday: churn defence modal

Here’s a modal used by Monday to encourage users to freeze their account as opposed to deleting it. The purpose of this system-initiated modal is to reduce the likelihood of churn.

What we like about this modal:

  • The purpose of the modal is very clear from the header and reinforced by the conciseness of the body text. There are no superfluous words used here.
  • The modal doesn’t take up more than 20-25% of the screen.

What could be done better:

  • This modal is missing graphical elements. Maybe Monday could introduce a sense of play to the idea of freezing an account by adding a snowman.
  • Again, there are lots of different options here to choose from. I can see that Monday is trying to appeal to users with diverse sets of needs here, but it would be more straightforward to just have one CTA.

Kontentino: welcome screen modal

Social media scheduling app Kontentino built this modal (using Userpilot!) as a way to welcome new customers to their platform.

What we like about this modal:

  • The imagery is simple, friendly and welcoming. Including a smiley picture of one of your team is a great move on a welcome screen.
  • There’s one clear CTA, which is worded in a way that implies both action and being taken by the hand.

What could be done better:

  • There’s no X button for users who don’t want to start the product tour right then and there.
  • The body text is inviting, but could perhaps be more concise or broken up into less of a wall of text.

Dropbox: upsell modal

Our final modal example is used by Dropbox whenever its users run out of space. It’s designed to get them to upgrade to a higher plan level with more storage space.

And it’s a work of art!

What we like about this modal:

  • The imagery is brilliant. It’s playful, alludes to cat memes on the internet, and still expresses the pain point that the user is feeling at that moment.
  • The copy is about as short as you could possibly imagine. It’s the very definition of concise, and it’s easy to understand the purpose of the modal.
  • There’s one CTA, and the fact that taking action is free initially reduces the friction from the customer’s perspective.
  • There’s a clearly apparent X button that allows users to exit the modal if they’re not interested in the offer.

What could be done better:

  • Nothing! This modal gets a 10/10 from me for creativity, execution, and providing value.

Conclusion

Having read this article, you should now be in a position to understand:

  • What a modal is
  • What UI elements constitute a modal
  • The dangers in overusing modals or making them too large

We’ve also given you some examples of modals used by other SaaS companies so that you can draw inspiration from them instead of creating your modals from scratch.

And speaking of avoiding creating modals from scratch, why not give Userpilot a try? It’s a great piece of software that will let you build modals without having to go to the trouble of messing around with code.

You can sign up for a free trial by clicking here.

previous post next post

Leave a comment