How To Create And Use Skeleton Loader: An Overview [Part 1]

In this era of digitalization, teams are focusing more on giving best
experience to the users. So, user experience keeps on evolving, new
methodologies and components are being adopted by the teams. One among them is Skeleton Loader which you might have seen on many web sites and mobile apps.

While building a product, we always try to ensure great performance from an API turnaround time, design and rendering point of view. But, no matter how hard we try there will always be a point where user has to wait. To provide best experience during this waiting is of utmost importance in evaluating the performance of the whole product. You must have seen different kinds of loaders on various websites, viz., spinner, progress bar, loading message etc. Skeleton Loader is of same kind and to keep users involved in the process.

In this article, we will learn about Skeleton loader, its purpose, usage, and points to keep in mind while designing. Also, we will go through the practical implementation later.

What is Skeleton Loader ?

In simplest terms, Skeleton Loader is a static / animated placeholder for the information that is still loading. It mimic the structure and look of the entire view.

It gives an idea regarding what kind of content is loading in each block like image, text, long text etc. It indicates that the things are really happening. It is used to create a perception of reduced waiting time.

These visual placeholders were seen in light gray or neutral color boxes that appears in the area where content has not been loaded yet. These placeholders can be in various forms.

Static Placeholders

Pulsing Placeholders: The opacity of the skeleton objects transitioning in and out slowly.

Waving Placeholders: The skeleton objects will have shadow / gradient moving from left to right or opposite.

Content will replace placeholders immediately when the data is available.

Image: Pulse Vs Wave

Examples

Nowadays, we can see skeleton screens in different shapes and sizes at number of different places across web and apps.

Image: Skeleton Screen on Facebook and Zomato in CY 2020

Why to Use ?

Skeleton screens are perceived as being shorter in duration when compared against a blank screen and a spinner.

Use of loader / spinner creates a period of uncertainty for the user since the load time is unknown.

It drives user’s attention to progress instead of waiting time.

For creating an illusion of short page load times in apps and on the web.

When to use — When not to use

When to use

Use on high-traffic pages where resources takes a bit long to load like Account Dashboard.

When the component contains good amount of information, such as List or Card.

Could be replaced by Spin in any situation, but can provide a better user experience.

Use when there’s more than 1 element loading at the same time that requires an indicator.

When not to use

Not to use for a long-running process, e.g. importing data etc.

Not to use for fast processes that take less than 300ms.

Things to keep in mind

The goal is to design for a perception of decreased waiting time.

Contents should replace skeleton exactly by position and size immediately after they are loaded.

Using motion that moves from left to right (wave) gives a better perception of decreased waiting time than fading in and out (pulse).

Using motion that is slow and steady gives a perception of decreased waiting time.

When designing Skeleton Loader for image gallery or related stuff, the dominant color based skeleton objects provides future context to objects that are loading. One can see such pattern in Google Images.

Implementation

So, how to design Simple Skeleton Loader using only HTML and CSS ? Well, this will be explained in detail in next article of the series Using CSS: Design a Simple Skeleton Loader.

If you enjoyed reading this post, do appreciate and give a follow.

Thank you for your time.

Also published at https://blog.prototypr.io/skeleton-loader-an-overview-purpose-usage-and-design-173b5340d0e1