Faster and smarter loading: Skeleton screens in digital products

Skeleton screens, also known as “loading placeholders,” are an important design element in digital interfaces. They provide visual cues to users that the content they have requested is loading, and they can greatly improve the user experience.

Skeleton screens: an overview

Luke Wroblewski first coined the term “skeleton screen” in a blog post advising that designers eschew the use of spinners (typically a graphical element that is animated and rotating on its center point) in favor of visual placeholders. He referenced work he had done on a native mobile app called Polar, specifically around excessive wait times reported by users when loading the app’s web views. Initially, spinners were used to indicate that a web view was loading in. Luke said it best:

We had made people watch the clock… as a result, time went slower and so did our app. We focused on the indicator and not the progress.

To mitigate focus on the loading process, versus the actual content that is loading, Wroblewski introduced a novel new design pattern — the skeleton screen. In his own words, they are “essentially a blank version of a page into which information is gradually loaded.” These visual placeholders were shown by Wroblewski to be light grey boxes that appeared instantly in areas where content had not yet completed loading.

Why do we need to use Skeleton screens?

• When users click a link or button to access new material, they anticipate seeing something happen instantly. If they don’t, they might believe that the website or app is sluggish or malfunctioning. Users can immediately see when content is loading on skeleton screens, letting them know that their request is being handled.
• Skeleton screens also aid in raising user perceptions of a website’s or app’s performance. Users can begin to absorb the information even before it has fully loaded by providing a rough layout of the upcoming content. This may result in a much more seamless transition from the loading state to the completely loaded state.
• Skeleton screens can also lessen users’ cognitive strain, which is another advantage. Users might have to use more time and effort trying to comprehend the layout of the material once it ultimately loads if there isn’t a skeleton screen. Users may concentrate on the material itself because the arrangement is already defined on a skeleton screen.
• Skeleton displays can be created in a variety of methods, but a typical method is to substitute grey boxes or outlines for the information itself. These grey boxes should be laid out in the same way and have the same proportions as the final content.

Different types of skeleton screens. There are three main types of skeleton screens:

Content skeleton screen

The most typical skeleton screen, like wireframes, is typically composed of simple, static objects. In order to mimic the actual arrangement of the page without being distracting, they are typically created in greyscale. Even websites with great performance levels, such as LinkedIn, YouTube, and Slack, employ traditional skeleton screens to mitigate the effects of loading times.
Real text can be used in conjunction with skeleton screens to indicate that the text has loaded but the visual information is still being downloaded.

Skeleton screens are also commonly found on mobile apps.

Color placeholders

Color-based placeholders are used by image-based websites like Pinterest and Pixabay while their images load. Color placeholders display the primary color of the image that is still loading in addition to imitating the UI layout, making the page more aesthetically pleasing than it would be in greyscale.

Before

After

Animated skeleton screen

Skeleton screens’ apparent loading time can be lowered by adding motion. These animations are typically modest, resembling how readers would read the material by shimmering from left to right. To show progress, some skeleton screens also have pulsating animation or fading in and out.

How to use skeleton screens?

A fantastic technique to keep customers interested in your product is to employ skeleton screens. However, they are not universally effective, and they must be applied carefully.
Skeleton screens are frequently used on websites with plenty of material and images, such as lists, cards, and dashboards. You’ll probably need a skeleton screen to prevent user frustration if a web page needs to load numerous images at once or extract data from several sources.
The practice of simply displaying what is necessary on the page while the rest of the material loads in the background may even be worth considering if predicted load times are excessively long.
When not to use skeleton screens
It might seem like there are no possible downsides to using skeleton screens — but depending on your audience, they can cause more confusion than clarity. Here are a few examples of when skeleton screens aren’t the right visual cue (and what to use instead):

• Fast-loading pages.
  As skeleton screens are most commonly used for slow loading times, there’s no point in your users only seeing them for half a millisecond before the page loads. In this case, you don’t need anything.
• Video content.
  Spinners are considered the industry-standard sign for video buffering, so it’s best to stick to the script.
• Long-running processes.
  File conversions, uploads/downloads or data importing should instead use progress bars or text indicators explaining each stage of the process.

Conclusion
Skeleton screens are an important design element that can greatly improve the user experience of a website or app. They provide visual cues to users that content is loading, improve the perceived performance, and reduce cognitive load.