The Budding Trend Of Skeleton Screens
December 11th, 2017
There was a time when successful online banking transactions directed to a full blank page for almost 2 minutes. No matter how patient of a person you are, prominent bank websites could really get easily on your nerves.
After few years, the page started loading like this
This was several years ago when probably everyone was still becoming familiar with the idea of online banking. Later, they started displaying the message like:
However, the moment we make a transaction, we all face a similar kind of situation.
Results like the above are still acceptable as they ensure that content will be loaded shortly. In the same case, blank screens do not convey anything, which disrupts the user experience.
Though this element made the users aware of the results, it failed to address the basic need to keep them “waiting”. Witnessing these icons on the screen only made them feel that time is moving slower than before.
It was then, companies started taking their online presence much more seriously.
In May 2013, this is how XBOX ONE designed their loading screen.
Ever since the idea of spinners and progressive indicators caught up, every designer and developer wanted to create a unique and innovative set of spinners and loaders that would enhance the user experience.
Here are the loading screens of few popular brands:
Since it was the time for something new and innovative, this is where the modern loaders like the Skeleton Screen stepped in and solved the issue for today’s web user.
The ideology of Skeleton Screens lies in between both the concepts. You don’t get the ‘Wait message’ nor does the user witnesses a ‘blank screen’.
Skeleton Screen loads the layout of the page while the content is still processing.
This is a progressive kind of loading where 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.
You know, Using colors and animations can, but doesn’t always, make sense.
As a regular mobile user witnessing perennial spinners can be difficult all the time. Especially in today’s date and age where you have a short attention span. Users sometimes blame the network while other times blame the app.
Skeleton Screens took the blame on itself.
It was very recently that Facebook integrated Skeleton Screen. Now when the screen loads really slow due to app functions or poor network, you can see the page progressing but only bit by bit. The UI of Facebook is more skeleton than any other app. The lazy load on Facebook adds a great user experience as it is far better than the progress bars and loading spinners.
We recently added Skeleton Screen to our upcoming project and asked 10 different people to analyze how it affects the user experience.
Our experiences have been great. More power to Skeleton Screens.