Skeleton Screens In User Experience Design

Speed is a reward in and of itself when it comes to the user experience (UX) and brands are doing everything they can to improve this key measure of performance (both the real and the perceived performance).

Website Magazine recently addressed the merits of using async, for example, and today we're exploring another rather interesting technique called 'skeleton screens.' Where once spinning progress and status bars did the trick, today's user experience designers take a different approach.

While there are many technical solutions for speeding up software there are also a set of desgin solutions and techniques that don't speed up network response time but can definitely make them feel faster.

The skeleton screen technique can help alleviate users' perception of inactivity or sluggishness on the part of the website. Designers are essentially just giving people visiting the site something to see while the page comes up completely.

Much like a house has a blueprint, there is a basic outline for every website. Using an outline (or perhaps a wireframe) enables designers to know the location of key elements, from graphics and text content to navigation and more before any of the actual work is done. This makes it possible to decide how a website is going to look and perform before designers go through the actual process of creating it. The result is a more well thought out and consistent website product.

A skeleton screen provides a similar benefit, but instead of showing the designer what will go where, it shows visitors what they can expect (e.g., text, image) and where they can expect it to appear when the page fully loads. Skeleton screens do not give the actual information that is going to appear, but enables viewers, within the first few hundred milliseconds, to know where they should focus their visual attention. As soon as the actual information appears, the user is already looking in the right place, which, in theory, should improve the user experience.

When executed correctly, users don't typically realize they were looking at a skeleton screen at all. The perception is that the site appeared instantly (but not fully) because something was on the screen. By the time visual focus was achieved, the text and graphics/images were on the page so all was good in the mind of the user. It's a win-win in every way.

Skeleton screens most definitely have their detractors. Taking the approach can be confusing to users on slow connections and are somewhat unnecessary for those on fast connections. What's more, those looking at offerings like AMP already benefit from very quick rendering (less than a second) thanks to minimal page weight and free caching of pages so the technique is far from a necessity and may be overkill.

CodePen has a good example of a Skeleton Screen developed with CSS and JavaScript here for those looking to employ this technique on their own websites or within their mobile applications.