Whoever said good things come to those who wait probably never had to sit through rush hour traffic, get their license renewed, or wait for their Instagram feed to load.
There’s no way around it. Waiting sucks.
At some point though, users will inevitably have to wait for something in your product to load. And if they have a bad experience waiting? You can bet that they’ll leave.
Some products have found a way to make waiting a little more bearable by infusing an ounce of delight into their loading pages.
While often treated as an afterthought in product design, the loading page is an important indication to users that their actions matter. It’s a confirmation that what they’ve submitted or clicked will lead to something great, just around the corner.
Here’s a look at 7 loading pages that make waiting (almost) fun:
1. Zapier gives users superpowers
Zapier is a web automation app that lets users connect the apps they use to maximize efficiency. Zapier is all about making their users feel happier and more productive, which is reflected in their loading page.
The copy and images are just awesome. Both get back to Zapier’s belief that “there are jobs that a computer is best at doing and that there are jobs that a human is best at doing.” Plus, who doesn't want internet superpowers??
The appeal to users’ potential abilities is a great demonstration of the classic product adage, “People don't buy products; they buy better versions of themselves.”
2. Slack helps teams bond (and laugh)
Slack’s commitment to teams and collaboration is evident throughout their product and communications. Their loading page is no different.
When users log into Slack and wait for their dashboard to load, they are greeted with quotes from their teammates. If you work with a group of jokesters like I do, Slack’s loading pages will always make you chuckle.
The skeleton screen, as shown by the gray bars indicating where content will show up, is another very nice touch. Seeing the screen pre-populate can be a good way of building user momentum right before they dive into the product.
The security checkup takes up 5-10 seconds of the user’s time. However, Facebook can perform this task much faster and has intentionally designed the interface to appear to run slower.
While this practice seems counter-intuitive, Facebook believes that the added time helps convince users that their accounts are actually being checked. It relates back to the key notion of letting users know that their actions have meaning. The doctor bot adds a bit of fun and trust to the whole experience.
4. Twitter Counter provides further entertainment
Twitter Counter pulls users’ Twitter stats for them. As the service is fetching data, Twitter Counter’s loading page suggests that users take a coffee break or read a random Wikipedia article.
I love the creativity and personally think that drinking coffee and reading random things on the internet are the some of the funnest activities in the world. However, the page might send the wrong message to some users. The coffee break suggests that users might have to wait a long, and ambiguous, amount of time. Directing users out of the app can also be dangerous, especially to Wikipedia, the ultimate rabbit hole for the easily distracted (read: me).
5. Typeform gives users a sneak peek
Typeform empowers users to create beautiful surveys, and has one of the most effortless onboarding experiences we’ve ever seen. By using a full screen gradient, their loading page reflects a commitment to simplicity and doesn’t stop showing off their product.
Full-screen gradients can make the loading time feel shorter because the product is just right there. Like with skeleton screens, giving users a preview of what’s next can also help build user motivation.
6. Customer.io delights users with a mascot
Customer.io’s mascot is an adorable animated pigeon named Astronaut Ami that bounces around all over their product, including the loading page. When users wait for their account to load, they see Ami spinning around a loading circle.
It’s a fun play on the traditional loading circle design, and the pervasiveness of Ami helps create a friendly, consistent brand experience. It’s also a nice and non-intrusive use of animation.
7. Celebrating progress is always an option
If other options don’t make sense for your product, you can always consider adding a loading bar.
It won’t dazzle users, but a loading bar does the important job of letting people know how much progress they’ve made, and how much waiting time to expect.
At the minimum, loading pages help reassure users that their interactions with your product carry weight. Scott Hurff, product designer and lead manager at Tinder, writes about the loading state in the UI stack:
“ It’s easy to overlook this state, and many product designers insert it as an afterthought. But there’s a very real burden that comes with setting expectations. When your app is loading data, waiting for an Internet connection, or transitioning to another screen, you must take great care to be mindful of how you represent situations where you’re fetching data.”
When done really well, loading pages can reinforce your brand, boost user motivation, and delight users further.