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. 
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:
- It will take a while
- They need to be patient as they wait
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
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!
No comments:
Post a Comment