Explore skeleton pattern as alternative to loading spinner

[basham]

In Luke Wroblewski's article Avoid The Spinner, he suggests using interface skeletons (i.e. interface placeholders) rather than spinners to indicate loading progress.

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.

Don't use spinners:

Use skeletons:

Facebook utilizes skeletons as well:

This article is discussed in the third act of the UX Podcast, #57 James & Per avoid spinning. They suggest that skeletons could also improve rendering performance in the browser.

---

See issue #39 for a similar animated transition pattern.

[basham]

From A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App:

One of my preferred methods for avoiding spinners on waits longer than 100ms but shorter than, say, 250ms — where a spinner will actually do more harm than good — is to hide it behind an animation.

For instance, if you’re Ajaxing in content, try animating the content’s container so that it shrinks up and then grows back to fit the new content. A short animation like this will distract the user from the wait — instead of staring at a spinner they’re simply waiting for a short animation to finish. They may not even realize the new content wasn’t there to begin with.

Of course, repetitive animations that take a long time to complete can be annoying too, so make sure you when you use these techniques sparingly. That’s good advice for most animations.

[basham]

Extracted Facebook's News Feed placeholder code into this CodePen, as an exemplar reference. http://codepen.io/basham/pen/cGJjn

[basham]

Comparing the different states for Facebook's approach, the placeholder markup is placed above an empty news stream element. Once the stream loads, the placeholder is removed from the DOM.

[basham]

See Luke's 3-min video on this subject: How to Avoid Loading Indicators

[waltonryan]

Does anyone have additional ways to implement the animation shimmer for skeleton screens? @basham you linked to a good one. Wondering if there are others.

[basham]

@waltonryan: Unfortunately, other exemplars aren't coming to mind. But I wonder if an animated SVG would be preferred over the layers of <div>'s that Facebook styles, since the skeleton is a graphic.

[waltonryan]

@basham thanks. Yeah, SVGs would be good; and also potentially using keyframes.

I'll be implementing something like this next quarter - I'll update it here if I get anything useful.

[oslego]

@basham, @waltonryan It's possible to create skeleton screens using only CSS background properties and color gradients that simulate solids. The shimmer animation can be a regular CSS animation that moves one of the background layers, which is a color gradient with white in the middle, over the other layers.

As a bonus, you can use :empty pseudo-class selector so that the skeleton screen background only applies while the DOM element is empty, for example while fetching data to inject.

Here's an example: http://codepen.io/oslego/pen/XdvWmd

This method does not require mutating the DOM with placeholder elements, therefore it keeps the code cleaner.

[waltonryan]

@oslego Whoa totally cool. :empty is a great approach, which I didn't know existed. Looks like IE 8 is not supported though: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty. But works for us as we don't need to support IE8 no more.

[oslego]

@waltonryan Yes, according to Microsoft's own docs, the :empty pseudo-class selector is supported in IE9+. CSS gradients may not be supported in IE9, but I have no means to test that at the moment.

However, this approach to skeleton screens can be used as a progressive enhancement so many other users will benefit from it.

[waltonryan]

sgtm.

[robynlarsen]

@oslego thanks for sharing! I'm going to try and test out the CSS method on a current project.