Ever played with a jack-in-the-box? If you havenât, youâre not missing out on anything â IMO, theyâre pretty creepy.
See? 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
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?
Effective modals:
- 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:
In this cookies opt-in, they share relevant information (what they use cookies for,) present all possible routes (customize, reject, or accept,) and give users a way out (âxâ in the top right corner.)
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
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.
Sephora
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.
Wishpond
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
CrazyEgg
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.
Cookies opt-in
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.
Happy UX writing đ
