Engaging users with progressive loading in skeleton screen

While building a product, we try to ensure its great performance from a design and technical perspective. But no matter how hard we try to optimize the system to minimize the delay and provide users with a well-designed product, there will always be a point where the user has to wait. Understanding the expectations of the potential users and providing a great experience in that waiting time is of the utmost importance for evaluating the performance of the whole product.

Why not use loader/spinner?

Use of loader/spinner creates a period of uncertainty for the user since the load time is unknown. It draws attention to the fact that the user is waiting. There is a sudden transition of the screen which makes the user confused and raises different questions in his/her mind.

1. How much time will the app take to load?

2. What will I get to see in the first place?

3. How much content has been loaded and how much still remains?

Loader/Spinner

It only takes 3 seconds for the user to abandon a product.

A study shows that within 200 milliseconds to 1 second, people feel that they are within their flow of action. After 1 second without any feedback, they are most likely to lose their focus and after 10 seconds, users focus is likely to be lost entirely.

What is Skeleton Screen?

Skeleton screen is a low fidelity UI into which information is gradually loaded. It gives users a visual cue that the content is being loaded into each UI element.

Using Skeleton Screen for Engaging users

1. Skeleton Screen when used as the feature in the product make people perceive that app/website is loading fast. Improved perceived performance not only provide good UX but also helps in increasing conversion ratio.
2. By designing the skeleton screen that leverage motion(L to R to follow the natural eye movement) helps in decreasing the perceived duration time.
3. Further using skeleton screen with progressive loading is thought of benefit for the user. In progressive loading individual element becomes visible as soon as it is loaded, it helps in displaying the content that is exactly loaded and what is yet to be loaded. Using these features all together act as a clear indication of progress.

Skeleton Screen with motion and progressive loading on Facebook App

Prioritize the loading content

While implementing progressive loading in the skeleton screen we should keep in mind the goal we are trying achieve with the product and prioritize the loading content accordingly.

Let us consider examples of a few products:

1. Times of India

Their main objective is to bring the latest news and top headlines from around the world. If we consider reading a newspaper, people like to read headlines in the first place to get a gist of what is happening around, rather than diving deep into the news content.

So for the appearance of speed and keeping users within their flow of action, they should prioritize and display Headlines in the first place.

2. Zomato

Zomato had prioritized the loading content accordingly and had engaged users in the wait time adequately. Their main goal is to provide restaurant search and discovery service for the user. First, the users' location is detected which is then gradually loaded and displayed in the skeleton screen. It provides the user with a clear view that he will get to discover the restaurant near his location.

Secondly, the bottom navigation that contains the core functionality of the product and allows switching between the features. With the first feature of ‘ORDER’, it gives the user a more clear view that the restaurant that provides delivery service near his location will be displayed.

Prioritize the loading content

Skeleton screen when combined and implemented with all these features not only helps in engaging users but also make our App/ website more interactive and smooth.

Complete process implementation

Thanks for reading. I hope you like it.