Ever played with a jack-in-the-box? If you haven’t, you’re not missing out on anything — IMO, they’re pretty creepy.
Why am I bringing up possibly the second-creepiest children’s toy after the Furby? Well, because in the world of digital user experiences, we have a jack-in-the-box of our own: The modal.
You might know modals as pop-ups. Or dialog boxes. Or “the annoying thing taking over my screen.” In this lesson, I’m going to keep it simple and call ‘em modals.
Just like the Jack-in-the-box, modals wind up and pop up on your screen.
Here’s an example:
Maybe they don’t literally wind up, but modals wait for you to spend a certain amount of time on a screen or take a certain action before they appear just as sneakily as good ‘ol Jack…
Modals take over the main screen, stopping you from doing what you're doing. The screen stays visible, but there's this big box asking you to do something before you can get back to business as usual.
There are 5 common purposes for modals:
- To tell you something important
- To sell you something
- To get your personal information
- To make sure you’re OK with something
- To confirm something is true
1. To tell you something important
A modal can be a great way to let users know something that’ll impact their user experience.
For example, Veriheal uses a modal to tell patients they’re now doing telemedicine appointments because of COVID-19:
This modal’s only purpose is to tell the user Veriheal is accepting online appointments. No more, no less. And it’s a pretty impactful message that can make a big difference in the user’s experience.
When you have something important to communicate, a modal can be a good choice because it blocks the rest of the digital experience, demanding the user’s attention.
Does that guarantee the message gets read? Absolutely not. That’s why UX writers are so mightily important 💪
2. To sell you something
Sometimes, a modal’s only purpose to advertise a discount or coupon code, like this:
As a UX writer, you probably won’t be working on promotional materials like this. Instead, the marketing copywriter will.
But it’s important to know if these types of modals exist, because they’re quite intense and have a significant impact on the user experience.
It’s worth noting modals that sell the user something are usually very business-focused and executed to achieve revenue goals, not to create a blissful user experience.
3. To get your personal information
Similar to modals that exist to sell you something, sometimes modals are used to snag the user’s personal information, like this:
This is also in the interest of selling the user something, just more sneakily.
What typically happens is the user inputs their email to get something, like this free cheat sheet, they get the cheat sheet, and then they’re automatically enrolled in an email series designed to sell them something.
Again, since this modal’s purpose is so oriented around selling, it’s likely the marketing copywriter will work on this. But again, it’s important to know what communications the user is getting, so you can make sure there’s no conflicting messages or over-communication going on.
The lesson here: Become besties with the marketing copywriter 👯 Your users will thank you.
4. To make sure you’re OK with something
Digital products come with tons of decision points. Modals are sometimes used to triple-check the user wants to move forward with said decision. Like this:
Modals used in this way add a bit of friction, but they do so to make sure the user doesn’t make a mistake or get into something they didn’t intend to.
5. To confirm something is true
We learned in UXW#1 that UX writing is all about creating a conversation between the product and the user. Well, modals can be a great way to facilitate that conversation.
For example, modals can be a quick way to confirm facts, like this:
This could be the bouncer asking 21-year-old you for your ID.
When using modals to confirm if something is true, it’s best to be concise, to-the-point, and not leave the question open to interpretation.
Why do modals matter?
Imagine you’re at a restaurant with some friends, and you order Pad Thai. You go to the bathroom, and when you come back, your Pad Thai is waiting for you (yum!) The plate is a little far away, so you reach to move it closer. Turns out, the plate is piping hot, and you burn your hands.
Now, imagine the waitress left you a little note telling you to be careful because the plate is hot. With that exact context, you would have avoided burning your hands.
Modals do the same — they provide extra context to help users make informed decisions.
In my personal opinion, modals that sell to users don’t “matter,” per se. They exist to benefit the business, and rarely are created to help the user. That said, there’s a strategic way to write for them, so they’re user-centric, which I’ll cover in just a bit.
What makes a modal effective?
- Make decisions easy
- Help the user make progress
- Make sure they’re worth the user’s time
Effective modals make decisions easy
Modals matter because they provide extra context to help users make informed decisions. When done well, modals make those decisions easy.
Modals can make decisions easy by:
- Being crystal clear what the prompt or question is
- Not leaving anything open to interpretation
- Have clear calls-to-action
When there are no open ends or lingering questions, decisions can be pretty easy to make.
Take this modal from Pinterest, for example:
They share all the information you need about Pinterest and activity tracking to make the decision on the next screen. By being so transparent and up front, and not leaving anything out, Pinterest makes it easy for the user to decide if activity tracking is something they want to opt in to.
Effective modals help users make progress
Modals aren’t there to block users — their intention is to help them make progress in some way. Progress could be learning some important info to make a decision or presenting a decision.
To make sure modals are helping users make progress, we need to:
- Present all relevant information
- Present all possible routes
- Provide a way out
Progress implies choosing your own adventure, and that’s what effective modals let users do. By presenting all relevant information, you let users decide if it’s worth proceeding. By presenting multiple routes to go down, you let users pick the best path for them. And by providing a way out, you give the user total control.
Here’s an example of that done well:
Effective modals make sure they’re worth the user’s time
Modals are super intrusive. They literally interrupt the user experience. Because of that disruption, you can only send so many modals til users get pissed, so you better make sure it’s worth it.
For example, here’s an example of a careless, generic newsletter modal:
There’s no benefit here for the user aside from getting “new updates.” What’s in the newsletter that would have improved my life so much that it was important enough to interrupt me?
Now compare that to this modal:
The whole first day of their training course? That’s incredibly generous, and something you’d want to jump to take advantage of before it disappears. If you’ve been on their site for a while, that modal feels relevant because you’ve shown your interest with your time.
Good examples of modals
Typeform makes it very clear that if you delete that Typeform, it’s gone forever. They present all the information, so you can easily make a decision and know the repercussions. By being so upfront and transparent, Typeform helps the user make quick progress.
This informative modal from Sephora is effective because it’s to-the-point and quickly communicates something important — that the app navigation changed. Navigation is pretty critical to an app, so sending this modal was definitely worth someone’s time. And by being so succinct and using visual references, Sephora made sure the content was also worth someone’s time.
This promotional modal is effective because it’s highly relevant. Notice this modal is on the pricing page. If a user has been hangin’ out here for a while, they might have questions. By offering a free chat with a Wishpond representative, Wishpond is offering helpful information at the right time, helping the user make progress in their purchase decision.
Bad examples of modals
So, this modal from CrazyEgg pops up when you’re leaving their site. If you’re leaving, it’s for a reason, so why would you want to sign up for their newsletter…? This tone-deaf modal wastes an uninterested user’s time and provides unnecessary friction for the sole benefit of the business. Tisk, tisk.
The Weather Channel
The Weather Channel is super out of touch with this modal. Their ads pay for their groceries? Really? This writer’s grocery money comes from the ad you’re not seeing…? Also, as a complete stranger, why am I responsible for paying for your groceries? The Weather Channel failed to give a solid reason for you to turn off ad blocker, which is clearly something you value, or else you wouldn’t keep it on.
A lot of companies like to have fun with the cookies opt-in, but it’s actually a pretty serious privacy topic. When companies have “fun” here, information gets misunderstood, and misled decisions get made. For example, in this modal, you only have one option — selecting “Understood, yum!” What if I don’t want to opt in? Why is opting in “yummy”? This is an example where cleverness hurts clarity, which hurts the business and frustrates the user.
Otherwise, head to the next free lesson, UXW#40: How to write push notifications.
Happy UX writing 🖖
Subscribe to my weekly newsletter to be the first to know about new lesson drops and get exclusive updates.