I absolutely adore a good loading screen.
I am a huge fan of anything that’s designed well, but with loading screens, I have a special bond.
Let me take you back to a regular morning for the teen me in 2014.
It’s a Saturday morning. I have my breakfast, I get on my computer to scroll mindlessly on Tumblr, life is good.
Boom.
No internet.
I try to refresh the page to see if it’s a simple error, but I end up with nothing but one thing on my screen.
The legend itself, No Internet Dino.
For the record, my original high score is much higher 😎
And that’s when I knew, after an entire hour of trance-playing the game, I knew that annoying things don’t have to be annoying at all.
And isn’t that what UX is all about?
Before I start dumping my whole journey of falling in love with UX design, let’s talk about:
- What a preloader is,
- Why they matter,
- Some tips for designing the perfect preloader, and
- Some cool preloader design examples
Let’s start right away.
What Is a Preloader?
A preloader, loading screen, or loading animation is a user interface element that takes place in an app, platform, or website, most often right after a command or right before a different thread of user actions. While the main reason a loading screen exists is to reassure users that there isn’t an error and their experience is not interrupted, there are many other benefits of interpreting a preloader into your user experience flow.
Moreover, a loading screen can come in many different forms to complete different tasks relating to users.
Now, when I say loading screen, I bet the image in everyone’s head is pretty much the same.
A spinning circle, a white ball turning around, or a running line.
Maybe a loading spinner progress indicator, some sort of percentage, or straight-up just animation.
In the past years, we have had the simplest and the most complex animations appear on loading screens simultaneously. Truly the best of both worlds.
Moreover, we get splash screens that work directly to satisfy our aesthetic concerns and empty state loaders as well.
A simple question, though…
Why even bother?
“So they are pretty, and?”
Yes, they are.
And they are functional. A preloader animation can enhance the user experience just by existing and smooth out the loading process by a lot.
Not 100%, though; we still hate waiting.
But to be sure we are on the same page, let me give you three reasons why creative preloaders are your friend.
1- They reduce bounce rate
Maybe the most important benefit of using preloader animations or even a regular flat preloader is that they are great contributors to reducing bounce rates.
And let me remind you, B2B businesses suffer from bounce rates the most.
While a loading screen has the potential to frustrate users more, animated preloaders can create the exact opposite effect.
2- They are a real attention-getter
Want to extend your users’ attention span over different tasks and screens?
Loading screens are perfect for linking two different tasks together and elongating session durations thanks to their mostly entertaining nature.
Plus, you can always take it up a notch and put advanced tips and more content on your loading screens.
3- They do look aesthetic
Well, let’s just admit it, they are pretty and fun.
And that does not devalue preloaders at all! It is that they are fun and aesthetically pleasing that they get to get users’ attention.
But that’s not all you can expect from a loading screen.
Let’s talk about some tips for designing preloaders the right way.
6 Tips for Designing the Perfect Preloader
Whether it is a countdown preloader, splash screen, or any other type of animated loader, the definition of a good loading screen changes from business to business.
Yet I have five cool tips for the perfect loader design that can work for any type of load process.
1- Get creative
If we’re doing preloaders, we might as well put a little bit of fun in it.
It doesn’t matter if it’s for B2C or B2B sector; what matters is how you engage your customers. If your business’ tone is serious, keep it serious, maybe use a minimalistic design, but make it good to look at.
If you have more creative freedom, however, ITG Digital’s creative loading screen is the perfect example.
2- Use splash screens
Creative loaders are fun, and if you are a unique platform, you might want to use a splash screen for your brand to be more memorable.
A splash screen is basically a custom animation that’s used at the very launch of an app/platform before seeing the actual content. It is a common occurrence, especially for apps right now to have splash screen animations, and it makes perfect sense.
An app needs time to launch; why not give the users a cool impression?
3- Talk to the user
A very underestimated and underperformed trick when it comes to loading pages is but one single thing:
Telling the users why they have to wait.
It is such a simple task, and it requires no more than simple loaders and some text, yet we seem to be avoiding using it. These kinds of loaders are best for sites with a long loading time, and a text that’ll accompany a fancy spinner can make the loading of resources a breeze.
Why?
Because getting an explanation for the wait is common courtesy.
4- Make use of the empty states
If you want to be polite with your users but don’t want them to be extra conscious about the fact that they are waiting for you, a great way to use the empty page is to drop tips and tricks about your product.
While this is a common occurrence for game design, we rarely see it for B2B or B2C products.
This might be because games have a longer load time, but in any case, product tips are great space holders, however long they stay on the screen.
Take Sims for an example:
5- Use Skeleton Screens
This one’s not necessarily the oldest trick in the book of user behavior manipulation, but it sure is a hit.
A skeleton screen is basically the skeleton – the general placement of elements on the screen – of an interface. And what it does is make users subconsciously believe that the screen is loading.
Of course, it is loading, and most of the time skeleton screens stay there for no longer than a second.
If you think complex loader animations don’t fit your brand and your loading speed is good enough, a skeleton screen can be a good addition to your UX.
6- Don’t defeat the purpose
One thing to keep in mind is that the reason we are considering custom preloaders, how we’ll interpret progress bars into them, and what would our brand’s personal touch would be is NOT because we want users to sit and enjoy a good ol’ loading screen.
We don’t want to keep anyone too long on the preloader screen.
The purpose is to get rid of the loading screen as soon as possible, and just in case it stays for so long, we want some entertaining element and sense of humor in it.
Don’t let the fun of it beat the actual purpose.
I am positive that we’ve talked about enough theory. It’s time to look at how these best practices look in theory.
Here are some preloaders and loading screen animations I personally love.
5 Outstanding Preloader Examples From Actual Products
1- Genially
Genially, an interactive element creation platform and one of my personal favorites in SaaS feature a fun little loading icon when loading a specific project that was created before.
Similarly, if you are starting to work from a template, the platform displays a fun little animation with lyrics from Queen’s iconic hit Don’t Stop Me Now.
This gives users a clear display of Genially’s brand image: fun and creative.
At the same time, users get to bond with the product on a different level than just making use of it.
All this with just a preloader. Kudos!
2- Genshin Impact
The popular mobile game Genshin Impact is way more layered than you’d expect from a game you can play on your iPhone. When that’s the case, players need to learn new skills constantly.
What’s more, because the game is pretty much huge for a mobile game, it takes its time to load.
Well, let me just say big game and too much info to learn is a better combo than you’d expect.
Genshin Impact features tips and tricks on its loading screens and does so in a pretty cool way. Once you’re done reading one tip, you can just tap to read the next one.
Bad internet connection? Enjoy the game manual 😎
3- Two Dots
Just like Genshin Impact, Two Dots is another game that features tips on its preloader.
But the reason why I loved my personal experience with the game’s loading screens was its ad loading animations.
Two Dots doesn’t give users annoying ads too frequently. But when it does, there appears a character from the game, telling the players that “they’ll be right back“. Once the ad is over, another text appears with the character, “thanks for supporting our game“.
Now, I’ll bet that we all hate ads.
But when they are presented this way, it says something about the nature of ads and the reason why ads are a thing.
And I absolutely love Two Dots’ way of using loading screens AND ads.
4- Gain
Now, as I explained above, splash screens aren’t necessarily loading screens. But at the same time, they kinda are.
And I am in love with Gain’s splash screen.
Gain is a streaming app that is pretty much identical to Netflix, and its splash design is also quite similar. But at the same time, it’s a rather indie streaming platform in comparison and it takes one splash design of 2 seconds to make it obvious.
5- Ezgif.com
I will not lie to you; Ezgif is the gif converter I was using for this article.
But when I saw their loading icon for output gifs, I couldn’t help but decide to include it in the post.
It’s true; a random website functioning off of ads is probably not the best to get inspiration from. They don’t have a brand or voice to set their tone.
But hey, look at the cute little cat.
Sometimes you just need to let loose and code a vibing cat. Go put that design team on the job already.
To Wrap Up
Preloaders have the potential to be one of the most fun elements of a user interface.
As long as they don’t take too long to disappear.
If you are an established brand with a clear tone and voice, it is important to give your preloaders some thought in the development process. It is the tiny interactions that make a product worth remembering.
Start working on your preloaders today. And remember, it is never too late to put a tiny cat animation in there 😼
Frequently Asked Questions
What is a preloader in JavaScript?
A preloader in JavaScript is an element that corresponds to the loading screen and elements of the loading screen on the site that’s being coded.
When should I use a preloader?
A preloader is the same thing as a loading screen, so whenever you need to load something on your product for your users, preloaders might be necessary. An average app or platform has lots of preloaders along the way.
How do you make a preloader?
To design a preloader you can go use a no-code tool or go in-house with JavaScript or CSS.
