Facilitating Better Interactions using Skeleton Screens

Image for post
Image for post

Several years ago, I was performing a funds transfer operation online, for the first time. Until that day, I was a cheque-writing person at heart. Immediately after the transfer on a prominent bank website, the web page blanked out. I was nervous if the transaction had completed or not. The page remained blank for 2 full minutes. I panicked. I clicked on ‘Refresh’ icon, as if luck was desperate to be on my side. I was slapped with a message, “Don’t be impatient. Please wait…”. It was a painful moment. Why was I scolded for feeling nervous about something very important while the bank website hadn’t taken any pain to tell me what happened with regard to my transfer.

Image for post
Image for post

A few months later, I noticed a message pop-up that read, ‘We are processing your payment. Please wait. Do not click on the “Refresh” button or close the window.’ This message compensated for my hurt, in the past. I thought, this time, luck probably was on my side.

Perennial Spinners

Traditional folklore suggests that if we keep users waiting, we must let them know:

  1. It will take a while

Thus, the progress indicators and spinners were born. If you are a frequent user of mobile apps, you have seen the perennial spinners, loading for eternity at some point in your life. You may have seen them innumerable times. Sometimes, you are cursing the app; sometimes you are cursing the network and at other times, you are cursing your own self and taking the blame for things that don’t work as per your expectations (False-Blame).

As this trend of Progress indicators/spinners, caught up, developers and designers put their blood and sweat into developing the ‘Next Best Progress Bar/ Spinner Of The Year’ elements. And then, we had a bunch of innovative items. Google ‘Best Loading Icon’ and see it for yourself. While design and functionality of these icons was good, they failed to fulfill the fundamental need of ‘waiting’. Looking at these icons only made users feel that time is moving even slower than before.

Skeleton Screens

Image for post
Image for post

Recently, I noticed this screen while accessing Facebook app on my phone. This screen indicated that the app is loading the screen real slow, BUT bit by bit. While the app worked this way, it made sure that each UI element’s ‘skeleton’ was loaded beforehand and then content was loaded one after the other in a lazy loading manner. I didn’t know what to call it at the time, but a little later, I found out this is called a Skeleton Screen.

“A skeleton screen is essentially a blank version of a page into which information is gradually loaded.”

~

Luke Wroblewski

A skeleton screen gives a visual cue that content is loading one after the other into each UI element area. It has been found that skeleton screens play a major role in the perception of users who appear to think that these are not as slow as spinners or progress bars. In fact, many users seem to love them for its look and feel. More power to Skeleton Screens.

Have you used skeleton screens in your products? Share your story!

UX in India

Thoughts and writings by Indian UXers/Design Thinkers.

Parimala Hariprasad

Written by

Program Manager — UXI at Google | Google Developer Expert @GoogleDevExpert | Humanizing UX Research | Enchanting Experiences Advocate | BookLover | Here and Now

UX in India

Thoughts and writings by Indian UXers/Design Thinkers. Occasional reviews, journeys and analysis about using Indian websites, apps and services.

Parimala Hariprasad

Written by

Program Manager — UXI at Google | Google Developer Expert @GoogleDevExpert | Humanizing UX Research | Enchanting Experiences Advocate | BookLover | Here and Now

UX in India

Thoughts and writings by Indian UXers/Design Thinkers. Occasional reviews, journeys and analysis about using Indian websites, apps and services.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store