The ultimate loading state UX writing guide
Think back to the last time you waited in a really long line. If you’re like me, the most annoying part is you don’t know when it’s gonna end.
Now imagine you’re waiting in line, and instead of an abyss of nothingness, there’s a countdown that shows the amount of time you have remaining in line. Now that would make waiting much less painful.
That’s the idea of a loading state — it gives users context and clarity when they’re waiting for something to happen.
Here’s a pretty common example:
During a loading state, the machines actually take over, and we peasants have no choice but to wait.
That’s a bit extreme — basically, during a loading state, the user is blindly waiting in an invisible line.
Why do loading states matter?
Loading states vary from waiting for your job application to send to filing your taxes. The stakes can be high, and fingers are crossed that the pixels are doing the right things.
For example, imagine you just sent someone $1,000 via PayPal. You pressed “Send,” and nothing changes:
And now it’s been two minutes, and nothing’s changed. Do you press it again?
This is why loading states in general matter — by giving the user visibility into the system status (remember this heuristic?,) or what’s happening on the back end, you give users peace of mind that actions are in motion.
Now, imagine instead of seeing no change, after pressing “send” to send $1,000, you see this:
Now imagine you’ve been seeing that for 2 minutes. You might be wondering if something broke. Should you press back and do it again? Will you be double-charged if you do that? Lots of worry and questions.
Instead, imagine that same loading state had some microcopy sharing what was going on:
Even if it takes 2 minutes, because the microcopy gives you insight into what’s going on, you have peace of mind that there hasn’t been an error and things just take time sometimes.
When done right, loading states make the world a less stressed out place, and I’d say that matters a lot.
What makes effective loading states?
Effective loading states:
- Are as specific as possible
- Are transparent
- Provide peace of mind
Effective loading states are as specific as possible
Specifics do a lot to make the world a less stressed-out place. This is especially true when it comes to loading states.
Past 10 seconds, the word “loading” is more than unhelpful, it’s concerning:
Did my money go through? Is my application OK, or will I need to rewrite the whole thing? Did I lose all my work?
You can combat all these kinds of concerns by being specific.
So, instead of saying “loading,” you say something like “saving your work”:
Or “processing payment”:
When in doubt, be specific.
Effective loading states are transparent
While you want to be as specific as possible, be truthfully specific. If something isn’t happening, don’t pretend it is.
Work with your engineers and product managers to find out what’s going on in the background. And figure out what you can say to provide peace of mind to users. Because peace of mind goes along way to improve a user experience.
Speaking of providing peace of mind…
Effective loading states provide peace of mind
Have you ever waited in line at the grocery store for 10 minutes and gotten really frustrated? If you’re like me, you’re wondering what the hold up is and even getting a bit angry about it.
Now, imagine a store employee came to your spot in line and explained they’re short-staffed, doing the best they can, and apologized for the wait. Oh, and here’s a free sample of some dark chocolate while you wait 🍫
The chocolate might have been over the top, but knowing why the wait is happening suddenly makes it OK. Nothing actually changed — you just got new context that let you rest easy.
The exact same is true for loading states. If you can tell a user why they’re waiting, and what’s going on in the background, they’ll be happy campers. That’s because you’re giving them peace of mind that everything is going according to plan.
Trust is something you need to build with users. Hitting a button is a vote of confidence that everything will work out. It’s a UX writer’s job to back up that good will with messaging that provides peace of mind.
You can provide peace of mind in loading states by:
- Explaining what’s going on in the background
- Being up front about how long it’ll take (in specifics)
- Communicating progress in some way
Here’s an example of how Zeplin provides peace of mind by explaining what’s going on in the background:
By clearly saying “exporting images,” it’s clear why the user is waiting, and the user can rest assured cogs are turning. And by showing progress bars, it’s also clear pixels are being pushed. Zeplin could level-up this loading state by sharing the amount of time remaining.
Good examples of loading states
Tumblr
When you’re done editing your theme in Tumblr, you get this loading state. It’s pretty perfect. It mixes some fun energy and delight with peace of mind that things are moving along. A good example of when it’s OK to have fun with it without distracting from clarity.
Airtable
Airtable’s loading state is super clear because it explains what’s happening (loading a view) and gives you the expectation that this will take time. By setting that expectation, you won’t worry when it’s been longer than you expected. Airtable could have gone one step further and given you a specific time frame to expect, but it’s still pretty good as is.
LinkedIn’s loading state here is simple but clear. You get the impression that this should be quick with “just a sec,” and you know what’s going on in the background (they’re syncing your contacts.)
Bad examples of loading states
Twitch
Twitch falls into the trap here of saying “loading” and nothing else. This leaves users lost and confused when something takes longer than they expect.
Microsoft
Microsoft sets themselves up for failure here when this loads for longer than a “moment.” Once it’s been 5 seconds, it’s implied something’s wrong. Instead, Microsoft should have explained what was happening and given a realistic timeframe.
Gmail
This is one word better than “loading” alone, but it’s still pretty ineffective. That’s because you have no idea how long it will take and what’s loading. Instead, Gmail could list the amount of time to expect and cycle through microcopy that gives context as to what they’re working on bringing about.
Happy UX writing 🖖