What is a Preloader and How to Use it Right in Your SaaS – Examples and Best Practices

What is a Preloader and How to Use it Right in Your SaaS - Examples and Best Practices

What is a preloader? What its purpose is, or how it can help you improve your product?

This blog post aims to answer those questions and give you a few ideas on how to use this feature to improve the UX of your product.

We have also prepared a list of 11 great preloader examples to inspire your own design.

TL;DR

  • A preloader, also known, as a loading page, or preloading screen it’s the loading animation or static image that shows on your screen while the main app is loading in the background.
  • While a loading screen consists of static images or one or more animated gifs, a skeleton screen is a blank page with placeholders that gradually gets populated with content.
  • Implement a preloader to make the product or app look more professional, reinforce the branding and product positioning, make the waiting time pass more quickly, and ultimately stop users from leaving the page or app before it’s ready to use.
  • A good preloader should be visually pleasing, show progress visually through simple animations or short messages.
  • Jump straight to see the examples here

What is a preloader?

Essentially, a preloader is the very first part of the UI you see while waiting for a website or application to load. In other words, it’s the loading animation or static image that shows on your screen while the main app is loading in the background.

Often seen as no more but a gimmick to entertain the user it’s a crucial part of the UI and should not be overlooked in the development process as it plays a number of very important roles (we’ll cover this in a bit).

Preloader vs. loading screen vs skeleton screens

Preloaders, or loading pages/screens, and skeleton screens play a similar role in the UX world as they all show that the web page is still active while you’re waiting for it to load.

Preloaders, loading animations, loading screens, loading pages… all refer to the same thing.

A skeleton screen, on the other hand, is a kind of loading screen that shows the structure of the page without its actual content until the server operations finish processing and the data is available to display.

Think of skeleton screens as placeholders for images and text that hasn’t loaded yet.

Jira's skeleton screen
Jira’s skeleton screen

These two are by no means exclusive of each other and in fact, are often used together on the same page. For example, Slack’s loading page consists of an animated feature in the center and a skeleton screen in the background.

Slack’s loading page consists of loading animation and a skeleton screen.

Why should I use a preloader?

As mentioned above, a preloading animation cannot be ignored by the UI designers as it serves a number of important purposes.

A preloader gives your product a more professional look

To begin with, a well-designed and creative preloader animation makes a good initial impression on the user and gives the webpage or app a more professional look.

It shows the user your commitment to delivering a high-quality experience and that you don’t leave any stones unturned.

If the preloader is designed with adequate attention to detail and engaging, your users will be more inclined to believe that the rest of the product is of similar quality, and wait for the product page or app to load.

This is particularly important if it’s their first experience with your product.

A simple yet professional-looking and effective UI Path preloader.

A preloader reinforces branding

Another reason why it’s worth putting some effort into designing a brilliant preloading animation is that it can actually help you reinforce the branding of your product and its positioning.

When including references to your product’s features, characteristics, or benefits through short messages displayed on the screen can create a powerful anchor in your users’ minds.

WeTransfer uses its preloader page to promote its Pro product and reinforce its positioning.

WeTransfer uses its preloader page to promote its Pro products.

The main reason why you may want to put resources into developing a good preloader is preventing your users from leaving the app or webpage, which is very likely if your product is not loading fast enough.

A preloader animation can decrease the bounce rate

Research shows that the attention span of today’s audience is shortening. The current attention span is around 8 seconds, and that has tremendous implications for those designing digital content.

The users are more likely to hang around when there is something to wait for.

No matter if you use simple or complex animations as your preloader, these will have a good impact on decreasing the bounce rate by reassuring users that your app is still working and that there may be an end to their waiting.

An animated preloader showing loading progress. Credit: Chris Gannon

Of course, if your product is poorly designed and the loading times are horrendous, there isn’t much that even the most creative loading screen or preloader is going to make much difference.

Best practices for designing good preloaders

There are a number of considerations to be made when designing a preloader.

A simple or complex CSS loading animation?

When it comes to which loading screen is best, the minimum you should consider is the basic spinning wheel- a simple CSS animation that confirms to the user that the app is being loaded.

Spinner wheel preloader. Source: Icon Library.
Spinner wheel preloader. Source: Icon Library.

This is a best practice and safe option when your end-user might have a slow internet connection or when you have limited processing power that might cause your animation to look broken.

However, with more powerful devices and higher internet speeds, complex loader animations are a thing of the past. It’s enough to look at CSS or SVG animations to see that it is possible to create brilliant preloaders without putting a massive strain on the resources.

A more complex and creative preloader

That is why it is definitely worth looking beyond the spinner wheel and making the effort to develop a more complex preloader that is more likely to keep the user engaged.

Use a loading animation to show progress, not just activity

Another way of improving the user experience while waiting for the service to load is by showing progress.

Apart from a simple progress bar, displaying progress more accurately in percentages could make the preloader even more effective as it makes the time spent waiting to feel shorter.

A preloader showing progress in percentages. Credit: Code My UI

Provide reasons for the waiting

Waiting is easier to bear if you actually know what you’re waiting for.

That is why including information about what is going on in your app or website preloader may help your case. Short messages like ”Searching for flights” displayed next to the spinner can reconfirm to the user that you’re processing data and will have the results shortly.

Skyscanner's preloader lets the users know what they're waiting for.
Skyscanner’s preloader lets the users know what they’re waiting for.

Use the preloader to educate your audience about your product

Loading pages can actually be used to educate your users about your product

You can include interesting trivia related to your industry, share industry news, or inform them about useful hacks with your tool. The latter will help the users take better advantage of your product and that may increase in greater adoption and retention.

Mural uses the loading page to share with users one of their Pro Tips

Use your preloader to inspire and motivate your users

Including a motivational quote may not necessarily be enough to change users’ lives but will definitely take their minds off waiting for a few seconds and put them in a good mood.

You could even tailor these to your user persona as Productboard does.

Productboard uses the preloader to inspire users with quotes tailored to their user persona.
Productboard uses the preloader to inspire users with quotes tailored to their user persona.

Great and preloader examples to inspire you

Userpilot dashboard preloader example

Userpilot’s preloader uses some of the best practices mentioned in this article. Short messages confirm to the user what’s happening in the background while small graphics that illustrate the product’s features- tooltips, in-app messaging, analytics, etc) reinforce the product positioning.

Userpilot loading page

To use Userpilot you need to launch the Chrome extension that lets you start building UI patterns to drive product adoption.

Let’s check out how the preloader for that looks like.

Userpilot Chrome extension loading screen

Userpilot Chrome extension preloader is very unobtrusive. It consists of a simple message (Loading builder) and multiple inspirational quotes which run in a loop.

This rotation works like a progress bar telling users the extension is still loading. The quotes put the user in a good mood plus reading will make the time pass faster.

Userpilot- chrome extension loading page

Duolingo loading animation

Duolingo, the language learning app, has built a preloader that serves a few functions.

The animation in the preloader may not be the most complex one (still better than a spinner) but it does a good job of reinforcing the branding and product positioning through simple messages.

Duolingo's preloader educates, gives tips, and inspires.
Duolingo’s mission. Source: Duolingo.

The slogans also inspire and motivate their learners to keep learning (driving repeated usage of their app).

Duolingo's preloader educates, gives tips, and inspires.
Source: Duolingo.

They make the time pass faster by entertaining them with interesting facts about how their app helps.

Duolingo's preloader educates, gives tips, and inspires.
Source: Duolingo.

Finally, they give tips on how to develop good learning habits and progress their learning. If learners are successful, their loyalty will grow and so will the app’s user retention.

Duolingo's preloader educates, gives tips, and inspires.
Source: Duolingo.

Hinge

The dating app decided to opt for simplicity. The preloader is fairly simple but it does the job. It shows that the app is working, and by incorporating the logo in the spinning wheel, the designer managed to create an animation that reinforces the branding.

Hinge’s preloader reinforces it’s branding
Hinge’s preloader reinforces its branding

Slack

The custom preloader incorporates the Slack logo to reinforce the branding message as well as the logo of the organization that uses it, confirming to the user what is happening.

The tongue-in-cheek status updates ‘Dredging pipes… Boiling water… Tuning channels…’ run in a loop. This shows the user that the page is still working and they take their minds off waiting.

Slack uses humour in its preloader animation.
Slack uses humor in its preloader animation.

Heap

The clever pun paraphrasing the classic line from the Flinstones, and making reference to the pillar of Heap’s business (data), is both funny and effective as a positioning tool.

Apart from entertaining the user with the funny pun, the preloader consists of a loading message which keeps the user informed on the loading progress.

Heap. Yabba data doo!
Heap. Yabba data doo!

WhatsApp

There’s nothing fancy about the WhatsApp web app preloader and yet it ticks a couple of boxes, making it a great preloader example.

The app icon is used to reinforce the positioning and the status bar shows the progress of the loading processes. They also bring their key selling point to their user’s attention (the end-to-end encryption).

WhatsApp’s preloader ticks a few important boxes
WhatsApp’s preloader ticks a few important boxes

Figma

Figma’s preloader consists of the progress bar, which changes color as the loading continues. This gives the user an idea of how much longer they might need to wait.

This preloader is used in conjunction with the skeleton screen and progressive loading which gradually reveals to the user the structure of the page they are waiting for.

Figma’s loader with an animated logo and progress bar.
Figma’s loader with an animated logo and progress bar.

Kokopako

Who said that a preloader needs to be a standalone animation that goes away once the product page or website has loaded?

Kokopako’s website loading animation preloader is a great example of ingenuity.

What looks like a preloader (and it serves the purpose of one) is actually part of the website. There are two progress bars and a count up to the year ‘87 which are the elements that load first, before the content on the rest of the page.

Kokopako’s brilliant website preloader.
Kokopako’s brilliant website preloader.

Paypal

Paypal’s preloader consists of the classic spinner wheel with a padlock icon in the center, accompanied by the clear ‘Processing…’ message, which keeps the users in the loop. The blurred background serves as a skeleton page letting the user know what it’s being loaded while they wait.

Paypal's preloader with a padlock icon, spinner wheel and progress update
Source: PayPal

Intercom

The messaging app Intercom goes for a simple yet functional design in its CSS loading animation.

There is a short line advising the reader that the page is loading below the spinner wheel. You could think of a fancier animation but you don’t need to as this one does the job.

Intercom is getting ready
Intercom is getting ready for you.

Stained Glass

This preloader on the Stained Glass site is literally a work of art.

Not only does it show the progress of the loading process but also actively engages the site visitors with a coloring activity that they can do while waiting. Excellent!

Stain Glass's preloader is a work of art.
Stain Glass’s preloader is a work of art. Source: HTMLBurger.

Key takeaways

A great preloader will help you maintain users’ interest until your product page loads. You can use this time to reinforce your positioning, foster loyalty to the brand and boost retention rates, or increase user activation with useful tips, as you’ve already seen in this article.

Preloaders are just the beginning. If you’re looking to improve your user experience and get them to stick to your product you should look into building some in-app guidance like tooltips inside your app, on top of offering tips on your preloaders.

Get a Userpilot demo and find out how easy you can add tooltips and guide users for a better user experience!

previous post next post

Leave a comment