In this era of digitalization, teams are focusing more on giving best experience to the users. So, user experience keeps on evolving, new methodologies and components are being adopted by the teams. One among them is Skeleton Loader which you might have seen on many web sites and mobile apps. While building a product, we always try to ensure great performance from an API turnaround time, design and rendering point of view. But, no matter how hard we try there will always be a point where user has to wait. To provide best experience during this waiting is of utmost importance in evaluating the performance of the whole product. You must have seen different kinds of loaders on various websites, viz., spinner, progress bar, loading message etc. Skeleton Loader is of same kind and to keep users involved in the process. In this article, we will learn about Skeleton loader, its purpose, usage, and points to keep in mind while designing. Also, we will go through the practical implementation later. What is Skeleton Loader ? In simplest terms, Skeleton Loader is a static / animated placeholder for the information that is still loading. It mimic the structure and look of the entire view. It gives an idea regarding what kind of content is loading in each block like image, text, long text etc. It indicates that the things are really happening. It is used to create a perception of reduced waiting time. These visual placeholders were seen in light gray or neutral color boxes that appears in the area where content has not been loaded yet. These placeholders can be in various forms. Static Placeholders : The opacity of the skeleton objects transitioning in and out slowly. Pulsing Placeholders The skeleton objects will have shadow / gradient moving from left to right or opposite. Waving Placeholders : Content will replace placeholders immediately when the data is available. Image: Pulse Vs Wave Examples Nowadays, we can see skeleton screens in different shapes and sizes at number of different places across web and apps. Image: Skeleton Screen on Facebook and Zomato in CY 2020 Why to Use ? Skeleton screens are perceived as being shorter in duration when compared against a blank screen and a spinner. Use of loader / spinner creates a period of uncertainty for the user since the load time is unknown. It drives user’s attention to progress instead of waiting time. For creating an illusion of short page load times in apps and on the web. When to use — When not to use When to use Use on high-traffic pages where resources takes a bit long to load like Account Dashboard. When the component contains good amount of information, such as List or Card. Could be replaced by Spin in any situation, but can provide a better user experience. Use when there’s more than 1 element loading at the same time that requires an indicator. When not to use Not to use for a long-running process, e.g. importing data etc. Not to use for fast processes that take less than 300ms. Things to keep in mind The goal is to design for a perception of decreased waiting time. Contents should replace skeleton exactly by position and size immediately after they are loaded. Using motion that moves from left to right (wave) gives a better perception of decreased waiting time than fading in and out (pulse). Using motion that is slow and steady gives a perception of decreased waiting time. When designing Skeleton Loader for image gallery or related stuff, the dominant color based skeleton objects provides future context to objects that are loading. One can see such pattern in Google Images. Implementation So, how to design Simple Skeleton Loader using only HTML and CSS ? Well, this will be explained in detail in next article of the series . Using CSS: Design a Simple Skeleton Loader If you enjoyed reading this post, do appreciate and give a follow. Thank you for your time. Also published at https://blog.prototypr.io/skeleton-loader-an-overview-purpose-usage-and-design-173b5340d0e1

Facebook

How To Create And Use Skeleton Loader: An Overview [Part 1]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How To Create And Use Skeleton Loader: Simple Example [Part 2]

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

How To Create And Use Skeleton Loader: Simple Example [Part 2]

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps