The quality of the internet has been steadily improving for the past few years. An increasing amount of households have access to fibre-connections and 5G seems to be just around the corner. This may make you ask yourself - Then why am I reading an article about loading screens? At this pace, a poor internet connection could soon be a thing of the past. Truth is, loading screens can serve more purposes than just to inform the user that their internet connection sucks.

The effect that animation has on the user experience is something I find interesting, which includes loading animations. That is why I wrote my bachelor thesis on the subject, and it helped me learn more about animation and UX. Luckily for those of you that find this interesting, yet not exciting enough to read a 26-page long academic paper on the matter, this article will also bring up some of the thesis' main points.

What to keep in mind about loading screens and waits

Despite pouring a frustrating amount of hours into researching the user experience of waiting and animations, I'm no expert. But thankfully, some people are. Let's dive into what some of those people say related to the user experience of loading screens.

Eliminating friction

Nowadays many services try to eliminate as much loading times and friction as possible. The intent is to make their services as fast and easy to use as possible. And yes, a service with nothing slowing you down does sound amazing.

However, in Digital Compassion written by Per Axbom, he raises some of the potential issues a friction-free experience can create. By removing all friction it can make the user drift away in a completely different direction than what they intended.

What Axbom suggests is that when friction is used in the right way, it can help prevent users from making unnecessary mistakes. Maybe an extra two-second delay when performing a certain action can be annoying. But it can also be what keeps a user from accidentally deleting all their data when they just want to log out.

A user, losing their grip due to a friction-less experience. Photo by Brusk Dede on Unsplash.

Staying in the flow

Something that is often talked about in the context of interaction is flow. The concept of flow originally comes from psychology and refers to when a user is focused and fully immersed in the interaction. You have a goal, things are where you expect them to be and everything is going smoothly. It's one of those times where you feel at peace with your tech, rather than cursing humanity for evolving past phones with more than just a number pad.

If the flow is broken, it can lead to frustration and turn into a negative user experience. A sudden, unpredicted wait can end up breaking it. By using loading animations in the right way, it can help reduce the impact of an otherwise sudden interruption.

Distracting the user from the wait

Some waits are unavoidable. It can be due to a process that takes longer, poor response times, a slow internet connection and so on. If this wait ends up being too long, it might break the user's flow. Then the best thing that can be done is to distract the user from the wait.

Houston airport was getting a large number of complaints about the wait times at the baggage claims. In an attempt to solve this, they tried increasing the number of employees during certain shifts, successfully speeding up baggage deliveries. However, despite getting their luggage faster, the complaints persisted. After increasing the distance between the arrivals and the baggage claims, the number of complaints dropped significantly. In the end, the most effective way to reduce the complaints was to increase the time it took for people to get from A to B. It kept them busy, and in turn, distracted them from their wait.

If a long wait is unavoidable, you might as well make it enjoyable. Or in the case of the airport, just make sure they're busy. That way it will decrease the risk of breaking the users flow, and they may forget they waited at all.

Photo by JESHOOTS.COM on Unsplash.

Different types of loading animations

There are a few different types of loading animations. When working on my thesis I decided to distinguish between four different kinds. These animations are spinners, loading bars, skeleton loading screens and loading animations intended to entertain and distract the user.

Spinners and loading bars

The most common loading animations that you’ll bump into on the web are spinners and loading bars. Loading bars have been around for a long time. They are usually used to visualise how far a process has gotten, such as a download.

Spinners can be found in all kinds of digital services. It’s a nice go-to since it's something all internet users will recognise and have probably already developed a love-hate relationship with. While most services simply use a spinner in a cool colour, some get creative with its use.  It's likely the most widely used loading animation today.

A spinner loading animation, spinning away in all eternity

Skeleton loading screens

Skeleton loading screens show a ”wireframe” of the website, with content loading in bit by bit. It allows the user to start interacting with the content as it loads in, rather than waiting for the whole page to finish loading. This kind of loading animation can often be seen on social media sites like Instagram, Facebook and LinkedIn. It's not always as noticeable since it blends in with the rest of the website.

The skeleton loading animation works especially well on sites with a focus on content. It helps create an impression of the available content before it's finished loading. When services act the way the user expects it to, it helps create a positive user experience since the user can predict how it'll behave.

A skeleton loading animation, with the elements showing up as they load in.

Entertaining loading screens

Lastly, there are loading animations that are intended to entertain the user and distract them from the wait. These animations are playful, detailed, or simply playing on a personality or persona for the service. They can be full-on looping animations, almost like small movies, or simple but satisfying.

A sub-genre of the entertaining loading animations is what I call “quote animations”. It’s the kind of animation that services like Slack and Discord uses, that displays a simpler animation combined with a quote.

The point is the help the user kill some time while they're waiting for content to load. A well used entertaining animation can create small moments of joy instead of frustration.

A "Quote animation", showing a simple animation combined with a quote.

What was the result?

During my thesis I performed 60 usability tests, 45 of which was for the last iteration of the prototype. The goal was to test the effect that the various loading screens had on the experienced wait time. A total of six loading screens were used in the prototype, with five different loading animations. The sixth loading screen had no animation or other kind of feedback. This allowed comparing not only the different animations to each other but to see the impact loading animation had on the experience in general.

The result of these usability tests suggests that the entertaining animations generally performed better compared to the other loading screens. A majority of participants considered the entertaining loading animation with a quote to be the fastest, despite that it actually had the second slowest load time. In other words, it was experienced as being faster than it was. The skeleton loading screen was a close second.

The loading screen that performed the worst, in the end, was the one with no animation. What this suggests is how important it is that a user is getting some kind of feedback. Out of 45 participants, 15 thought the loading screen with no animation was the slowest. A close second was the loading bar, which 13 people considered the slowest. If you instead count the fact that not a single person rated the loading bar as the fastest, it can be ranked as the worst.

Keep in mind, that this was a smaller study with 60 participants, in an area that hasn't been explored that much scientifically yet.

Photo by CoWomen on Unsplash.

Now what?

So, you've read about some different kinds of loading animations and seen that loading screens doesn't always have to suck. But how do you know what will work best for whatever service you're working on? The best and only way to know for sure is to test it. Usability tests don't have to be boring, long or a pain in the ass. A tip is to check out the articles and videos by Nielsen and Norman on usability testing if you need some help.

To sum it up, loading animations can have a bigger impact on the user experience than what you might assume - and a positive impact that is. Maybe you do have some problems with users constantly deleting their data by accident. Then, you could make them chill out by introducing some healthy friction like a two-second delay or a pop-up. Or, you may have problems with users getting frustrated due to their flow being broken or having to wait too long.

In the end, if a wait is unavoidable, you might as well make it enjoyable. Play around and see what works for you. What counts is that the user is getting the feedback they need.

If you find this subject interesting, I would recommend giving Digital Compassion by Per Axbom a read. It raises some important points on how the user experience should be prioritised over the best possible efficiency. Lastly, if you would enjoy reading a 26-page long academic thesis to know more about the subject, you can read my thesis Improving perceived performance of loading screens through animation


Header photo by NordWood Themes on Unsplash