[GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n The term \u2018skeleton screen\u2019 might conjure up images of halloween-style skeletons you can look at while the page loads \u2014 but the reality is less spooky. Skeleton screens help users focus on their tasks by providing a distraction-free view while they wait for content to load. They can also be used to indicate activity and to communicate the purpose of an app or website.<\/p>\n They serve four main purposes. They:<\/p>\n Skeleton screens have been around for a long time but they’re becoming an increasingly popular UX optimisation tool<\/a> \u2014 particularly when it comes to minimising cognitive load. People enjoy using them because it helps them visualise how the page will look when it finishes loading and it provides feedback when there is activity going on in the background.<\/p>\n A skeleton screen isn’t just a blank page or an error message: it’s something that has been carefully crafted with user experience in mind. By providing a distraction-free view while waiting for content to load (like an image of an empty room), skeleton screens help users focus on their tasks while they wait instead of worrying about whether they’re doing everything right.<\/p>\n Skeleton screens are most effective when they’re used alongside other methods such as animated spinners or static images.<\/p>\n When a user arrives on an app or website page and nothing happens, they\u2019ll assume something’s wrong. To encourage positive user experiences, it\u2019s important to clearly communicate what\u2019s happening when the page loads.<\/p>\n A spinner icon might seem like the obvious choice for communicating that something’s happening or to let the user know that they need to wait. But research shows that empty states without any indication of progress are less successful at encouraging users’ trust.<\/p>\n Skeleton screens can be used as a way to communicate with users that there is activity happening in the background \u2014 and, crucially, that it won’t take long. By giving them some visual clues about how long they’ll have to wait before being able to use the site again, you can help build trust between the user and your product.<\/p>\n Long load times can annoy users but skeleton screens provide feedback at key points and make those wait times more bearable. You can also use a skeleton screen to indicate activity. For example, animated skeleton screens can be used as a progress indicator or even as an error message that indicates something went wrong.<\/p>\n There are three main types of skeleton screen:<\/p>\n Content skeleton screen<\/strong> Skeleton screens can be used in tandem with real text, to communicate that the text has loaded but the visual content is still getting there.<\/p>\n [Source – uxdesign.cc]<\/p><\/div>Skeleton screens are also commonly found on mobile apps.<\/p>\n [Source – Dribbble]<\/p><\/div>Colour placeholders<\/strong> Before:<\/strong><\/p>\n After:<\/strong><\/p>\n [Source – freecodecamp.com]<\/p><\/div>\n Animated skeleton screen<\/strong> [Source – codemyui.com]<\/p><\/div> [GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n<\/p>\n Skeleton screens are a great way to keep users engaged with your product. But they don\u2019t work in every context and they need to be used strategically.<\/p>\n One of the most common uses for skeleton screens is on content and image-heavy web pages<\/strong>, such as dashboards, cards or lists<\/strong>. If a web page needs to load multiple images at the same time or pull data from several different sources, you\u2019ll likely need a skeleton screen to avoid frustrating your users.<\/p>\n If expected load times are exceedingly long, it might even be worth considering lazy loading<\/a> instead \u2014 the practice of only displaying what\u2019s necessary on the page, while the rest of the content loads in the background.<\/p>\n When not to use skeleton screens<\/strong> <\/p>\n Skeleton screen vs. Spinner vs. Blank page<\/strong><\/p>\n [Source – viget.com]<\/p><\/div>\n It\u2019s also important to note that skeleton screens should match the look of the actual content as close as possible. You\u2019ll undo all that trust-building if your users have had to wait and if the content isn\u2019t where the skeleton screen elements indicated it would be.<\/p>\n Skeleton screens are vital for enhancing a user’s overall experience of your website or app. They’re an effective way to explain an app or website’s value proposition to new users and increase engagement before the content loads. They also provide valuable user feedback even when content is loading slowly.<\/p>\n Unsure whether to go for a skeleton screen, loading bar, spinner or just a blank page? It\u2019s worth testing<\/a> skeleton screens on your audience to evaluate how effective they are. Skeleton screens are a fantastic tool for UX optimisation \u2014 but they\u2019re definitely not a quick fix for long loading times or seamless page-to-page transitions. Testing different loading visualisations for different pages will allow you to design for speed in the most effective way possible.<\/p>\n <\/p>\n If you want to learn more about UI features, take a look at our glossary of UI terms\u00a0<\/a> and 10 essential UI rules to follow<\/a>.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Skeleton screens have been around for a long time but they’re becoming an increasingly popular UX optimisation tool. We explain why you should use them and when they should appear. <\/p>\n","protected":false},"author":34,"featured_media":7518,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[],"class_list":["post-7517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7517"}],"version-history":[{"count":7,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7517\/revisions"}],"predecessor-version":[{"id":12228,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7517\/revisions\/12228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7518"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What is a skeleton screen?<\/h2>\n
\n
Why are skeleton screens useful?<\/h2>\n
Different types of skeleton screens<\/h2>\n
\nSimilar to wireframes<\/a>, the most common skeleton screen is usually made of basic, static elements. They\u2019re usually designed in greyscale in a way that replicates the actual layout of the page without being distracting. Even high-performing websites like LinkedIn, YouTube and Slack use classic skeleton screens to offset the effects of loading times.<\/p>\n![\"LinkedIn](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/10\/LinkedIn-skeleton-screen.png\" "\\"\\"")
![\"mobile](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-2022-10-12-at-11.23.17.png\" "\\"\\"")
\nImage-based websites, like Pinterest or Pixabay<\/a>, rely on colour placeholders while their images load. In addition to simulating the UI layout, colour placeholders display the main colour in the image that\u2019s still loading \u2014\u00a0making the page more aesthetically pleasing than it would be in greyscale.<\/p>\n![\"Colour](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-2022-10-12-at-11.26.34.png\" "\\"\\"")
<\/p>\n![\"Colour](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-2022-10-12-at-11.26.03.png\" "\\"\\"")
\nAdding motion to skeleton screens can decrease perceived loading time. Usually, these animations are subtle; such as a shimmer that moves from left to right, impersonating how users would read the content. Some skeleton screens also include pulsating motion – or fading in and out –\u00a0 to indicate progress.<\/p>\n![\"animated](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/10\/Animated-skeleton-screen.gif\" "\\"\\"")
How to use skeleton screens<\/h2>\n
\nIt might seem like there are no possible downsides to using skeleton screens \u2014\u00a0but depending on your audience, they can cause more confusion than clarity. Here are a few examples of when skeleton screens aren\u2019t the right visual cue (and what to use instead):<\/p>\n\n
![\"Skeleton](\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2022\/10\/All-three-skeleton-screens.gif\" "\\"\\"")
Skeleton screens: The verdict<\/h2>\n