Chung, Bill. Everything You Need to Know About Skeleton Screens. UX Collective, 2018.

University of Michigan - Ann Arbor

Redesign of the loading screen to improve user satisfaction by:
1. Decreasing perceived wait time
2. Making users more willing to endure longer wait times

Loading Screen Design

Everything You Need to Know About Skeleton Screens

Skeleton screens are partially loaded web pages. They use placeholders, such as boxes, to show where content will be once loaded. They can decrease the perceived loading wait time by offering a transition from not loaded to loaded. Facebook, LinkedIn, Google Drive and Youtube use them. 

Skeleton Screens to Decrease Perceived Wait Time

Kim, H., Kim, M., Kim, J., & Park, H. (2014). The Effects of Load Time, Contents, Loading Screen, and Animation Type on User Satisfaction with the Load Speed of Mobile Apps : Archives of Design Research, 27 (2), 107-119.

The Effects of Load Time, Contents, Loading Screen, and Animation Type on User Satisfaction with the Load Speed of Mobile Apps

Sequential and continuous changes of the screen can make users more willing to endure a longer waiting time. Sequential loading animation also shows high satisfaction regardless of the load time. 

Continually Changing Loading Screens Result in Higher User Satisfaction

Jung, Hanna. 32 Creative Loading Animations That Are Worth The Wait. Digital Synopsis

32 Creative Loading Animations That Are Worth The Wait

47% of users expect a webpage or an app to load in 2 seconds or less. After 4 seconds, the average user starts getting frustrated and after 8 seconds, they leave. In fact, a one second delay in your site speed can result in a 7% reduction in customer conversions.

Learn Before

Related