What’s a skeleton screen?

What’s a skeleton screen?

BY Ux Design Institute

Skeleton screens have been around for a long time but they’re becoming an increasingly popular UX optimisation tool. We explain why you should use them and when they should appear.

Designing for speed is becoming an increasingly important pillar of good UX. The more users interact with high-speed web pages and apps, the more frustrated they’ll be when faced with longer loading times.

Unfortunately, load times aren’t always in a designer’s control. But with content-heavy web pages that take slightly longer to load, it’s up to UX designers to find ways to manage users’ expectations and around what exactly they’re waiting for (and how long they’ll be waiting for it). This is where skeleton screens, a user interface (UI) feature, enter the process.

In this article, we’ll unpack the psychology behind why skeleton screens are so effective, the different types of skeleton screens you can use, and when not to use them.

Here are the sections we’ll cover:

What is a skeleton screen?

The term ‘skeleton screen’ might conjure up images of halloween-style skeletons you can look at while the page loads — but the reality is less spooky. Skeleton screens help users focus on their tasks by providing a distraction-free view while they wait for content to load. They can also be used to indicate activity and to communicate the purpose of an app or website.

They serve four main purposes. They:

  1. Show users what’s happening
  2. Give users some idea of what’s coming next
  3. Communicate that you’re working on their problem
  4. Provide users with an indication of how close they are to seeing the actual page

Skeleton screens have been around for a long time but they’re becoming an increasingly popular UX optimisation tool — particularly when it comes to minimising cognitive load. People enjoy using them because it helps them visualise how the page will look when it finishes loading and it provides feedback when there is activity going on in the background.

A skeleton screen isn’t just a blank page or an error message: it’s something that has been carefully crafted with user experience in mind. By providing a distraction-free view while waiting for content to load (like an image of an empty room), skeleton screens help users focus on their tasks while they wait instead of worrying about whether they’re doing everything right.

Skeleton screens are most effective when they’re used alongside other methods such as animated spinners or static images.

Why are skeleton screens useful?

When a user arrives on an app or website page and nothing happens, they’ll assume something’s wrong. To encourage positive user experiences, it’s important to clearly communicate what’s happening when the page loads.

A spinner icon might seem like the obvious choice for communicating that something’s happening or to let the user know that they need to wait. But research shows that empty states without any indication of progress are less successful at encouraging users’ trust.

Skeleton screens can be used as a way to communicate with users that there is activity happening in the background — and, crucially, that it won’t take long. By giving them some visual clues about how long they’ll have to wait before being able to use the site again, you can help build trust between the user and your product.

Long load times can annoy users but skeleton screens provide feedback at key points and make those wait times more bearable. You can also use a skeleton screen to indicate activity. For example, animated skeleton screens can be used as a progress indicator or even as an error message that indicates something went wrong.

Different types of skeleton screens

There are three main types of skeleton screen:

Content skeleton screen
Similar to wireframes, the most common skeleton screen is usually made of basic, static elements. They’re usually designed in greyscale in a way that replicates the actual layout of the page without being distracting. Even high-performing websites like LinkedIn, YouTube and Slack use classic skeleton screens to offset the effects of loading times.

Skeleton screens can be used in tandem with real text, to communicate that the text has loaded but the visual content is still getting there.

[Source – uxdesign.cc]

Skeleton screens are also commonly found on mobile apps.

[Source – Dribbble]

Colour placeholders
Image-based websites, like Pinterest or Pixabay, rely on colour placeholders while their images load. In addition to simulating the UI layout, colour placeholders display the main colour in the image that’s still loading — making the page more aesthetically pleasing than it would be in greyscale.

Before:

After:

[Source – freecodecamp.com]

Animated skeleton screen
Adding motion to skeleton screens can decrease perceived loading time. Usually, these animations are subtle; such as a shimmer that moves from left to right, impersonating how users would read the content. Some skeleton screens also include pulsating motion – or fading in and out –  to indicate progress.

[Source – codemyui.com]

How to use skeleton screens

Skeleton screens are a great way to keep users engaged with your product. But they don’t work in every context and they need to be used strategically.

One of the most common uses for skeleton screens is on content and image-heavy web pages, such as dashboards, cards or lists. If a web page needs to load multiple images at the same time or pull data from several different sources, you’ll likely need a skeleton screen to avoid frustrating your users.

If expected load times are exceedingly long, it might even be worth considering lazy loading instead — the practice of only displaying what’s necessary on the page, while the rest of the content loads in the background.

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.

Skeleton screen vs. Spinner vs. Blank page

[Source – viget.com]

It’s also important to note that skeleton screens should match the look of the actual content as close as possible. You’ll undo all that trust-building if your users have had to wait and if the content isn’t where the skeleton screen elements indicated it would be.

Skeleton screens: The verdict

Skeleton screens are vital for enhancing a user’s overall experience of your website or app. They’re an effective way to explain an app or website’s value proposition to new users and increase engagement before the content loads. They also provide valuable user feedback even when content is loading slowly.

Unsure whether to go for a skeleton screen, loading bar, spinner or just a blank page? It’s worth testing skeleton screens on your audience to evaluate how effective they are. Skeleton screens are a fantastic tool for UX optimisation — but they’re definitely not a quick fix for long loading times or seamless page-to-page transitions. Testing different loading visualisations for different pages will allow you to design for speed in the most effective way possible.

Leave a Comment

Leave a Reply

Your email address will not be published.

What does a UX researcher do?

Graphic Design vs. UI Design: What’s the Difference?

What’s the Impact of Investing in UX?

Wireframing for beginners

A complete UI glossary: 100 terms all designers should know

How to Use the SCAMPER Technique in UX Design

11 popular UX job roles and titles explained

The importance of being humbly confident: Learning to own your mistakes in your UX career