In a perfect world, every webpage and application would load immediately. We wouldn’t have to wait on empty pages or face the dreaded “spinning wheel of death” on macOS.
These experiences not only create bored and impatient users, but they often don’t show any signs of loading progress. While a progress bar is primarily used for specific tasks or actions, they are often inaccurate in showing completion percentage. They also emphasize expected wait time, while users don’t want to have to wait when they open a web page.
Instead, you can use a skeleton screen to create a more engaging loading experience. This technique is best used when loading webpages with multiple elements on the screen to give users a visual indication of progress and an illusion that the loading time is less than it is. In this article, we’ll talk about a brief history of skeleton screens, their usage today, how they differ from loading spinners, and best practices for using skeleton screens in your website or application.
A skeleton screen is a technique for web and app design to address the challenge of page loading times. Instead of displaying a blank screen or using a traditional loading spinner, a skeleton screen shows users an outline or wireframe of the page’s layout and structure while the actual content is still being loaded in the background.
As the content loads, the placeholders in the skeleton screen will update with the actual interface until the entire page is loaded:
This technique provides users with a more engaging experience than facing a loading spinner or blank screen. Our attention spans are shorter than ever and skeleton screens serve to keep it. The skeleton or structure of the page gives users a sense of what the page will look like while it loads.
As loaded content starts appearing, it provides a sense of progress while keeping users engaged and less frustrated. Each piece of loaded content is like a way of keeping the users’ attention and preventing them from abandoning the website or app:
In the early days of the internet, websites were mostly text-based with limited graphical elements. The designs were straightforward, often utilizing tables as layouts and focusing on functionality over aesthetics. Websites lacked graphics or multimedia content due to slow loading times, since back in the day, users primarily accessed the internet through dial-up connections.
As high-speed internet became more accessible, websites began incorporating more images and introduced video. Ecommerce sites like Amazon and eBay emerged, which featured busy, complex interfaces. This required a better loading experience than a simple spinner or blank screen:
With so many elements on the page and different sections loading at different times, sites introduced the skeleton screen to progressively display content to the user while keeping them engaged. It aimed to turn frustration into anticipation as the skeleton provided users with visual cues of what would come next:
Nowadays, companies use skeleton screens across many websites and applications. Users expect a dynamic loading experience that reassures them of progress being made. Without a skeleton screen, users are more likely to get frustrated with a poor loading experience and abandon the website or app.
A skeleton screen is one of a few different loading indicators used in web and app design. Another common technique to indicate loading is the spinner. Let’s compare the two approaches, as well as identify the best use case for each technique.
Skeleton screens are miles ahead in terms of keeping the user engaged while they wait. They provide a more visually interesting loading experience while loading spinners tend to be repetitive and mundane.
While you can design loading spinners with graphical elements to look more appealing, they don’t offer a preview of the layout or structure of a page like skeleton screens do:
When users encounter a loading spinner, they understand that a process or task is ongoing. However, it does not indicate the progress or speed of the loading time. A skeleton screen creates the perception of progress by revealing content and replacing the placeholders as they load. This progressive loading experience also makes the loading time seem faster, as the interface gradually comes into view:
Skeleton screens are ideal for loading pages with various elements, such as images, text, videos, and other content. They provide an engaging loading experience that illustrates the page’s layout while creating a sense of progress and speed. Content-heavy applications or websites can benefit from skeleton screens when loading pages:
Loading spinners are best for simple tasks or actions, such as opening a file or submitting a form. In these cases, there isn’t much content to visually load. Instead, the user is simply waiting for the task or action to be completed. The emphasis is on simplicity and having a clear indication of an ongoing process without added visuals:
Let’s explore a few examples of companies that use skeleton screens in their digital products. This will give you a better idea of how to apply them to your website or application, which we will dive into in the next section.
Documented under the Loading pattern, skeleton screens are one of the ways that IBM’s Carbon Design System guides designers to convey that a page is being loaded. The skeleton state shows a simplified version of the component using motion effects, which signals to the user that the page is not stuck:
The design system advises using the skeleton state for larger container-based components, such as tiles, structured lists, data tables, or cards, to name a few. It’s unnecessary to use it when loading smaller components, like buttons or form fields, or any type of pop-up elements, like toast notifications, dropdown menus, or modals.
SAP’s Fiori design system uses skeleton pages for its Placeholder Loading pattern. Their guidelines explain the goal of the loading pattern, which is to inform the user that loading is currently still in progress. Using animation to indicate loading activity, the skeleton pages are here to communicate speed and reliability. The generic layout of the skeleton screen makes the app appear to load faster to improve the user experience:
The design system also guides designers on the placeholder loading behavior. As the page continues to load, the gray boxes of the skeleton page are replaced by content that is loaded first, such as the actual structure and layout of the page, as well as the headers of each component. Finally, the page is fully loaded and the skeleton page completely disappears:
The Goldman Sachs Design System includes a Skeleton Loader component, which offers a few different use cases. One of them shows specifically how a skeleton area can be used to load an image or chart area. It can optionally display an icon in the center of the area to indicate the type of media it’s loading:
They also demonstrate two different animation styles in their skeleton loader, a pulse or wave animation. Designers can opt to use no animation at all, depending on the context and preference:
To effectively implement skeleton screens into your website or application, there are a few best practices to follow to provide an optimal loading experience for your users.
A skeleton screen should be consistent in layout and structure as the final loaded page. This gives users an idea of what the page will look like, as well as where to potentially find the type of content they are looking for. Given that a skeleton screen is an accurate preview of the page layout, users can start to process the different sections and elements on the page, and anticipate where certain content will appear before it’s fully loaded:
Motion has long been used as a way to communicate ongoing activity or progress. Think of progress bars that advance as loading continues, or loading spinners that continuously rotate. Skeleton screens are no different, and should incorporate motion effects to assure users that the page is not stuck and that content is still loading.
Skeleton screens primarily work the best when loading container-based components, such as tiles, structured lists, or data tables. Containers are more visually complex and distinct, so a skeleton state can be used to convey and differentiate the overall layout. Full pages with a variety of multimedia and content are also great use cases for skeleton screens.
On the other hand, smaller components such as buttons or form fields don’t require a skeleton state. These components are associated with immediate user action and response, so displaying a skeleton for them might mislead the user into thinking that they are available to interact with while the page isn’t fully loaded yet. Skeleton screens are more focused on structure and layout while excluding the smaller details, like icons or status indicators.
If you’re looking to increase user engagement during load times in your website or app, consider implementing a skeleton screen. They offer a dynamic way to display a page’s structure and layout while it loads, allowing users to anticipate the location and organization of content on the page. It also creates a sense of perceived progress and speed for the user, making the wait time less painful than a loading spinner would.
Skeleton screens are used by many companies, which follow best practices like maintaining layout consistency and incorporating motion effects to indicate that the page isn’t stuck. They are also used to load visually complex container-based components but aren’t necessary for smaller, detailed components.
In a world where digital experiences are run by capturing user attention, skeleton screens are an excellent technique for designers to leverage. With thoughtful design, they can turn a boring, loading phase into a positive experience that keeps the user engaged.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Call it what it is. Product designers and UX designers have unique roles, even if their titles often get swapped. In this blog, know the difference and own your expertise.
Search bars are more than icons and inputs — they can be a retention magnet or a churn trigger. Sharing my tried-and-tested search bar design principles in this blog!
Are your colors clashing or cohesive? In this blog, I talk about clashing colors, their impact, and how you strike the perfect balance with colors in your designs.
You know that good design is all in the details. And nicely used kerning impacts readability, user flow, and brand professionalism in your UI design — more on that in this blog.
Learn more →
