Boost Your UX with Skeleton Pattern

Make your load times feel faster

If the user’s connection is slow, It can take a while for an app or website to populate content on the screen. However well-designed your user interface may be, at some point or other, the people using it are going to have to wait for something to load. Making the user stare at a loading bar or spinning wheel can increase bounce rates.

A 2014 MIT study showed that humans can perceive discrete images in as little as 13 milliseconds however deciding where to focus takes between 100 and 140 milliseconds. In practical terms, this gives us around 200 milliseconds to present a user interface state change in order to appear instant.

Loading for long time

Between 200 milliseconds and 1 second, people feel they are within the flow of their actions. After 1 second without any other feedback, focus starts to shift. Beyond 10 seconds, user focus is likely to be lost entirely.

Psychological studies into progress indicators show that our interpretation of them is anything but linear. Our method of processing a delay doesn’t match up with reality.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded. This creates the sense that things are happening immediately as information is incrementally displayed on the screen.

With a skeleton screen, the focus is on content being loaded not the fact that its loading and that’s real progress.

How Facebook uses it?

The Facebook mobile app shows users gray blocks and lines to represent images and text as the app loads. Once it finishes loading, the images and text appear in place of the dummy wireframe content. This is no faster than having a loading screen, but in the user’s mind, it feels like it is.

Facebook Mobile App Skeleton Loader

How fast your app loads is in the mind of the user. When connection speeds are slow, you can still give users a fast mobile app experience by using these tricks. Users don’t want to wait for content. But if you make it seem like they’re never waiting, they’ll always enjoy your app under any connection speed.

iOS Guidelines

Apple have incorporated skeleton screens into their iOS Human Interface Guidelines under the name ‘launch images’. Apple’s guidelines recommend showing an outline of the initial application screen excluding text and any elements that may change.

Apple’s Clock

Apple’s Clock is a classic example of a skeleton screen. The launch screen sets the expectation of what the app will look like and creates an impression of the app loading faster than it actually does.

This launch screen shows the basic outline of the app and the four icons at the base of the screen.

Once launched, the all the text and variable UI elements are filled in.

Making it Happen

Looking at the examples above, you may have noticed that the images used aren’t drastically different from wireframes. It’s in this observation that a lot of the work may already be done for you.

The initial load is taking longer than we’d like so it’s time to add skeleton screens to improve the perceived load time.

initial wireframe showing the screen layout.

On initial rendering, only the header and a reserved space for the content are shown

Next, the text is rendered while we wait for the images

Text content is loaded

The final rendered content is shown.

Final Content

By progressively rendering each component, the wait seems shorter.

Summary

Skeleton screens can improve the feel of any action taking longer than a few hundred milliseconds. Applying them to your rendering bottlenecks will make your UI feel faster and make people happier.