Recently the apps of larger providers tend to make their loading times seem shorter by displaying a basic frame of the actual layout first; the so-called skeleton screen.
Skeleton Screens, Spinner or the Void
Skeleton screens are supposed to leave the impression of a fast loading time. This works by displaying the skeleton, the basic structure of the site, as fast as possible. Then, step by step, this frame is filled with content.
Basically, the skeleton screen has the same purpose as the already established spinners and loaders, which either rotate or display a loading bar to show that the user will need a little more patience until the content is loaded. Those who didn’t use spinners until now, probably just used the blank screen.
While spinners make it very clear that content is being loaded, blank screens don’t convey any message at all. Thus, the latter can easily confuse the user, and, depending on how long the blank screen remains, he could gain the impression that nothing will happen, resulting in the user leaving in frustration.
Skeleton screens are somewhere in between the two variants. On the one hand, there is no direct information regarding any delays, like a spinner would display. On the other hand, though, the user won’t be left frustrated about waiting for the content for a bit.
No Matter Which Method is Used, the Waiting Remains.
Apparently, in the end, it does not make a real difference which version you use. The user has to wait either way.
Nonetheless, choosing the right version can be advantageous in the close competition for the short attention span of the modern Homo Digitalis. Google, Facebook, Medium, Slack, and tons of other giants have already decided on using skeleton screens.
That alone may be enough reason to make use of this method as well. As we have known since Steve Krug, it is always good to pick up users from where they are, rather than making them learn new patterns.
So, if all the more significant providers use skeletons, I don’t see a good reason not to jump on that train. In the transition period, however, it may make more sense to differentiate.
The Expectations of the Potential Users Are Important
Today, for instance, I wouldn’t say that skeleton screens were already comprehensively rooted in the user’s consciousness. Albeit their widespread usage, logically, some areas still expect loading times to be displayed by spinners or loading bars.
This is definitely the case when it comes to loading media content, like images or videos. Even the white screen is probably more expected than a skeleton screen in that regard.
Another point to consider is the question how a skeleton screen is defined. While Google and Facebook, for instance, already show what you’re waiting for in the basic frame, other apps show generic placeholders for images and text. So, as always, it is possible to create good and bad pages, or skeletons, in this case.
In this context, a good page would display the basic shapes of the loading UI as closely as possible, and also provide fitting containers for the following content. Using colors and animations can, but doesn’t always, make sense.
Either way: Meeting the expectations of the audience is still more important than using modern loading time techniques because they’re trendy. As neat as the tool may be, people don’t want to buy drills, but holes in the wall.
Further Articles
- At CSS Tricks, author Max Bock explains how to create skeleton screens using CSS.
- At Sitepoint, Chris Lienert explains the process of the visual development of skeleton screens.
- Last but not least, the UI experts of Viget have conducted a user test on skeleton screens.
Image by David Karich from Pixabay
Send Comment: