The eect of skeleton screens
Users’ perception of speed and ease of navigation
Nanyang Technological University
Digital Media Lab
Digital Media Lab
Digital Media Lab
Progression bars and spinners have long been the norm when pro-
viding feedback during wait times on the web. However, a more
recent trend is the use of skeleton screens. This paper aims to eval-
uate the usefulness of skeleton screens as an alternative to spinners.
This is done user testing a ctional news site with two variations,
one showing skeleton screens before content is loaded, and another
utilizing spinners. Both a questionnaire and measuring timing while
nding a specied article when entering a website for the rst time
was used. The results show that the page using skeleton screens,
scored higher on average on both perceived speed and ease of navi-
gation. However, people using the page with spinners were faster
at nding the article when entering the site for the rst time. The
results of this paper cannot show any signicant dierences in any
of the comparisons between the web pages.
•Human-centered computing →Interaction design theory,
concepts and paradigms;Empirical studies in interaction design;
feedback, skeleton screens, spinners
ACM Reference Format:
Thomas Mejtoft, Arvid Långström, and Ulrik Söderström. 2018. The ef-
fect of skeleton screens: Users’ perception of speed and ease of navigation.
In ECCE’18: Proceedings of the 36th European Conference on Cognitive Er-
gonomics (ECCE2018), September 5–7, 2018, Utrecht, Netherlands. ACM, New
York, NY, USA, 4 pages. https://doi.org/10.1145/3232078.3232086
When designing a website there are certain conventions that one
should strive to follow to create an as satisfying user experience as
possible. One important aspect of a website, and cause of frustration
among users, is the speed in which the content is displayed and
Permission to make digital or hard copies of all or part of this work for personal or
classroom use is granted without fee provided that copies are not made or distributed
for prot or commercial advantage and that copies bear this notice and the full citation
on the rst page. Copyrights for components of this work owned by others than the
author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or
republish, to post on servers or to redistribute to lists, requires prior specic permission
and/or a fee. Request permissions from firstname.lastname@example.org.
ECCE’18, September 5–7, 2018, Utrecht, Netherlands
2018 Copyright held by the owner/author(s). Publication rights licensed to the
Association for Computing Machinery.
ACM ISBN 978-1-4503-6449-2/18/09. . . $15.00
how responsive it is to the users interactions [
have come to expect a certain uidity and quality when browsing
the web, and not catering to users’ needs may lead to them leaving.
In 1997, Nielsen [
] stated that download speeds are the single-most
important design criterion on the web and a study from 2004 study
states that the tolerable waiting time for information retrieval is
approximately 2 seconds before abandoning the site [
with the inclusion of feedback, to reassure the user that something
is happening, the tolerable wait time can be prolonged [
tional och commonly used methods include the use of spinners and
progress bars to indicate that content is loading.
In 2013, Wroblewski
urged people to move away from the
use of progress bars and spinners claiming that they made the user
focus on the indicator and not the progress. The proposed alterna-
tive was “skeleton screens”. This is, essentially, a blank version of a
page into which information is gradually loaded. Instead of the ac-
tual content, a simple wire-frame structure is displayed resembling
the appearance of the nished loading site. The thesis is that with
the help of a skeleton screen the user will focus “on content being
loaded not the fact that its loading”. Thus making the user feel as if
the content is loaded faster than it actually is.
The objective of this study is to evaluate if skeleton screens
improve the users’ perception of speed of the website, and the
concept of skeleton screens and its usefulness when designing a
website. The following questions will be addressed:
How does the inclusion of skeleton screens aect the user’s
perception of the speed of the website, compared to spinner?
How does the use of skeleton screens aect user’s perception
of how easy the website is to navigate, compared to spinners?
What impact does skeleton screens have on the speed of
nding information for rst time website visitors?
2 LITERATURE REVIEW
Constructing a website is not an easy task and there are a plethora
of things to consider when catering to the users’ needs. One eld
that is especially important is how long users are willing to wait
for a page to respond, and how dierent forms of feedback can
aect the tolerable wait time. According to Nielsen
speeds are the most important criterion when designing for the
Web, and Ramsay et al
found that users perceived faster sites
signicantly more interesting than their slower counterparts. Fur-
thermore, according to research from Fogg et al
had reduced ease-of-use, resulting in lower perceived credibility.
ECCE’18, September 5–7, 2018, Utrecht, Netherlands T. Mejto, A. Långström & U Söderström
The actual time a user is willing to wait changes over time and in
the 1990s, Nielsen [
] gave some basic advice regarding response
times. 0.1 second is about the limit for having the user feel that the
system is reacting instantaneously, i.e. no special feedback required.
1.0 second is about the limit for the user’s ow of thought to stay
uninterrupted, even though the user will notice the delay. Normally,
no special feedback is required, but the user might lose the feeling
of operating directly on the data. 10 seconds is about the limit
for keeping a user’s attention focused on the dialogue. For longer
delays, users will want to perform other tasks while waiting for the
computer to nish, i.e. feedback should be given indicating when
the task expects nish. However, increasingly faster connection
speeds make people more impatient towards digital loading times
and a study from 2009 shows that 47% of users expect a site to
load in 2s or less. According to Google Brutlag
, slowing down
the search results from a mere 0.1 seconds to 0.4 seconds has a
measurable impact on the number of searches per user. The study
also show that the longer the users were exposed to the delay over
a few weeks, the less they used the search engine.
2.1 Eects of feedback on tolerable wait time
In certain situations there is simply no way of avoiding notice-
able wait times when loading a website. Slow connection or large
quantities of data are just some factors which may lead to long
duration wait times. Dellaert and Kahn
state that the potential
negative eects of waiting can be neutralized by managing waiting
experiences eectively. One of the general principles of Nielsen’s
usability heuristics [
] describes that “the system should always
keep users informed about what is going on, through appropriate
feedback within reasonable time” and doing so may increased the
tolerable wait time Nah .
2.2 Dierent forms of feedback
Feedback can be provided in a multitude of ways. One of the most
frequently used methods is progress indicators, which are useful
because they inform users that the system needs more time to pro-
cess the last action performed by the user (for example, to load a
le, or to install a new update) Sherwin
. There are mainly two
dierent types of progress indicators: a looped animation (such
as spinners) and percent-done indicators [
]. Four main advan-
tages are stated: (1) They can let the user know that the system is
working, and progress is being made, and thus reducing the user’s
uncertainty, (2) they provide something to look at while waiting,
which can make the waiting period more tolerable, (3) the user
is given a reason to wait for the loading to be completed by the
simple fact that there seems to be some progress, and (4) reduction
of users’ perception of time, since they focus on the progress of the
indicator instead of paying attention to the waiting itself.
2.2.1 Looped animations. The basic principle of a looped ani-
mation is that by utilizing them the users are oered feedback that
the system is working and processing information [
]. This is done
with the help of an animated graphical loop that continues until the
process is completed, e.g. the very common animated-spinner icon.
However, the looped animation does not provide any details about
how long the wait is. As stated by Nielsen
, 1.0 second is about
the limit for the user’s ow of thought to stay uninterrupted. Thus
Nielsen advices that for waiting duration around 2–10 seconds, a
looped animation is sucient and a good alternative. For durations
longer than 10 seconds the user will need more information about
how long the wait time is expected to be [5, 6, 14].
2.2.2 Percentage-done progression bar. As opposed to simpler
looped animations such as a spinner, percentage-done progression
bars provide additional information about the current progress,
how far they have come, and how much is left. This provides the
freedom to decide whether to continue the wait, or to abandon the
]. As mentioned by Nielsen, 10 seconds is about the limit for
keeping the user’s attention focused on the dialogue, meaning that
the user should be informed how long it is going to take if the load
time exceeds that limit [
]. In continuation, Nielsen advices that a
percentage-done progression bar is what should be implemented
to indicate how far along the process is to the user if the 10 second
threshold is overstepped.
2.2.3 Skeleton Screens. Introduced in 2013, skeleton screens
] can now be found in a number of major sites, e.g. Facebook,
LinkedIn and Slack. The discussion about the speed of spinners
started after spinners was included in the app Polar to indicate that
content was being loaded. Complaints were received from users
claiming that there seemed to be an excessive amount of waiting
around for the page to load, and that the app seemed slower than
previous versions. Wroblewski
means that when users are
exposed to a spinner they tend to focus on the loading indicator
itself, rather than the progress that is being made. To get around
this issue, the use of so-called skeleton screens is promoted. The
concept of a skeleton screen is that before the actual content has
been loaded, a simple wire-frame structure is displayed, bearing
resemblance to the appearance to that of the nished loading site
]. A skeleton screen is “essentially a blank version of a page
into which information is gradually loaded”. A skeleton screen is
meant to ensure that the user will focus on that content is being
loaded onto the page, not at the actual fact that its loading. This
will make it so that the user feels as if the content is loaded more
rapidly than it actually is. Since skeleton screens are proposed as an
alternative to a spinner or looped animation, the same time-frame
of application applies, 2–10 seconds.
To analyze the usefulness of skeleton screens two variations of
a simple news website was constructed using HTML5, CSS3 and
is loaded, and Website B, making use of a traditional spinner icon
before the content is displayed on the screen. The website was
designed as a simple news information site, with ctional articles
being displayed in a news feed of chronological order (1). Both a
start page and some sub-pages, for navigation, were constructed.
The test subjects were instructed to navigate to a few specic
articles in a certain predetermined order from the start page. This
to ensure that the users were exposed to the website and the im-
plemented progress indicators for a longer duration. Before the
content was displayed on each page, the test subjects had to wait
for a duration of 2.75 seconds, which was deemed an appropriate
amount of time from the pilot tests conducted. This is in line with
The eect of skeleton screens ECCE’18, September 5–7, 2018, Utrecht, Netherlands
Figure 1: Fictional news site used in the study.
Figure 2: Skeleton screen before the content was displayed.
Figure 3: Spinner before the content was displayed.
the guidelines from Nielsen, where he stated that for wait times be-
tween 2-10 seconds a looped animation is recommended [
this time the subjects were shown either a spinner (3) or a skeleton
screen (2). The test process was repeated until 4 dierent articles
had been visited in total, and the start page visited 5 times.
Furthermore, to evaluate which feedback makes users navigate
faster when entering a new site, the time of which the test subjects
take to navigate to the rst article from rst arriving on the start
page was measured. The timer starts as soon as the start page is
entered (before all of the content is displayed) and stops as soon
as the participant enters the specied article. For most accurate
the same computer using local les.
After the test, the respondents lled out a questionnaire consist-
ing of two Likert-type scale questions (1-7): “How did you perceive
the speed of the website? (Loading times)” and “How hard/easy did
you nd the website was to navigate?”. A two sample t test was
Figure 4: Rating of website’s perceived loading speed (skele-
ton screen) (1=very slow, 7=very fast).
used in order to analyze dierences between site A and B. Two
independent samples t-tests were also used to compare the results
from the questionnaire for site A and B for the questions regarding
perceived speed of the site, and ease of navigation.
The study was conducted in May 2017, with a total of 14 partic-
ipants equally distributed between Website A and B, with 2 pilot
tests conducted for each site.
4 RESULTS AND DISCUSSION
4.1 Measured time for user to click link
There was no signicant dierence in how fast the participants
found and clicked the article link between website A, using skeleton
screens, and website B, using spinners (p=0.69). The mean time for
the participants who were exposed to the website utilizing spinners
(13.60s) was slightly lower than to those who visited the website
with skeleton screens (15.01s).
There were no signicant dierence in the time it took to nd a
certain link when entering a website for the rst time, when making
use of skeleton screens or spinners. The participants exposed to
the website using spinners performed slightly better, and had a
shorter average time to completion. Additionally the website using
spinners recorded a lower longest duration to click the link than
the one with skeleton screens. However, even if there had been a
signicant dierence in the time it took, it would still not be possible
to determine if this could be accredited to the use of skeleton screens
or spinners due to the structure of the test and external factors. The
participants were not informed that their performance time would
be measured, meaning that the users had no incentive to act as fast
as possible when trying nd the specied link. This lead to some
participants spending time reading all of the content on the web
page before proceeding to click the article. People display dierent
behaviors when browsing websites, and thus making it impossible
to determine if they had actually found it faster or not when using
skeleton screens or spinners respectively.
4.2 The perceived speed of the website
The results from the questionnaire show that there was no sig-
nicant dierence in how the users perceived the speed of the
website between website A and B (p=0.16). Website A, using skele-
ton screens, had a higher maximum marking as well as a higher
lowest marking than website B (4 and 5).
When examining the data from the questionnaire regarding how
fast the participants perceived the website to be when using skele-
ton screens or spinners, no signicant dierence could be found.
ECCE’18, September 5–7, 2018, Utrecht, Netherlands T. Mejto, A. Långström & U Söderström
Figure 5: Rating of website’s perceived loading speed (spin-
ners) (1=very slow, 7=very fast).
Figure 6: Rating of how hard/easy website was to navigate
(skeleton screen) (1=very hard, 7=very easy).
Figure 7: Rating of how hard/easy website was to navigate
(spinners) (1=very hard, 7=very easy).
Thus Wroblewski’s [
] claim that skeleton screens improve the
users’ perception of speed could not be proven in this study. How-
ever, the results gathered from the questionnaire show that the
website using skeleton screens recorded a higher top marking, and
furthermore the lowest notation was higher than that of the site us-
ing spinners. The mean score for the website using skeleton screens
was also noted to be higher than that of the spinner counterpart.
This could point to that websites utilizing skeleton screens could
improve the user’s perception of speed of the website. A lot more
data is needed to verify the claim.
4.3 Ease of navigation on the website
There was no signicant dierence (6 and 7) in how the participants
rated how hard/easy the website was to navigate when comparing
website A and B (p=0.31). The website using spinners (website B)
got a lower lowest marking than the one utilizing skeleton screens
(website A). Website A did not receive any negative markings (below
a value of 4) and had a higher average value.
This study was unable to show any signicant dierence in how
the participants experienced how hard or easy it was to navigate
on a web page with spinners or skeleton screens. From the results
it was possible to see that the website using skeleton screens had
a higher average value than the website using spinners, meaning
that more people found it easier to navigate. Additionally, website
B, using spinners, had a lower lowest notation. Furthermore, the
website with skeleton screens had no value under 4, meaning no
one experienced the site to be hard to navigate. The result indicates
that implementing a skeleton screen as opposed to a spinner could
make the website easier to navigate. However, more data needs to
be gathered to be able to verify the thesis.
The results concluded in this study can not verify that implementing
skeleton screens improve the users perception of speed of a website
when compared to a website utilizing spinners. Furthermore there
was no signicant dierence in how users rated how hard or easy
the website was to navigate when using skeleton screens as opposed
to spinners. Additionally the study could not prove that when
visiting a website for the rst time, a skeleton screen will make
you nd information faster. However, the results gathered suggest
that there might be truth to the claims by Wroblewski that skeleton
screens make it feel as if the website loads faster [
], as well as
that it is easier to navigate a site with skeleton screens.
The authors would like to thank the the Swedish Foundation for In-
ternational Cooperation in Research and Higher Education (STINT)
for their support.
Jake Brutlag. 2009. Speed Matters. (23 June 2009). Retrieved July 12, 2017 from
Benedict G.C. Dellaert and Barbara E. Kahn. 1999. How tolerable is delay? Journal
of Interactive Marketing 13, 1 (1999), 41–54.
B. J. Fogg, Jonathan Marshall, Othman Laraki, Alex Osipovich, Chris Varma,
Nicholas Fang, Jyoti Paul, Akshay Rangnekar, John Shon, Preeti Swani, and
Marissa Treinen. 2001. What Makes Web Sites Credible?. In CHI’01 Proceedings.
ACM, New York, NY, USA, 61–68.
Fiona Fui-Hoon Nah. 2004. A study on tolerable waiting time: how long are Web
users willing to wait? Behaviour & Information Technology 23, 3 (2004), 153–163.
Jakob Nielsen. 1993. Response Times. (1 Jan. 1993). Retrieved February 27, 2018
from https://www.nngroup.com/articles/response-times-3- important-limits/
Jakob Nielsen. 1993. Website Response Times. (21 June 1993). Retrieved March
8, 2018 from https://www.nngroup.com/articles/website-response-times/
Jakob Nielsen. 1994. Enhancing the Explanatory Power of Usability Heuristics.
In CHI’94 Proceedings. ACM, New York, NY, USA, 152–158.
Jakob Nielsen. 1995. 10 Usability Heuristics for User Interface Design. (1
Jan. 1995). Retrieved March 5, 2018 from https://www.nngroup.com/articles/
Jakob Nielsen. 1997. The Need for Speed. (1 March 1997). Retrieved March 10,
2017 from https://www.nngroup.com/articles/the-need-for- speed/
Tiany Poss. 2016. How Does Load Speed Aect Conversion Rate? (14 Jan.
2016). Retrieved March 8, 2018 from https://blogs.oracle.com/marketingcloud/
how-does- load-speed- aect-conversion- rate
Judith Ramsay, Alessandro Barbesi, and Jenny Preece. 1998. A psychological
investigation of long retrieval times on the World Wide Web. Interacting with
Computers 10, 1 (1998), 77–86.
Andrew Sears, Julie A. Jacko, and Michael S. Borella. 1997. Internet Delay Eects.
In CHI ’97 Extended Abstracts. ACM, New York, NY, USA, 353–354.
Paula R. Selvidge, Barbara S. Chaparro, and Gregory T. Bender. 2002. The world
wide wait. International Journal of Industrial Ergonomics 29, 1 (2002), 15–20.
Katie Sherwin. 2014. Progress Indicators Make a Slow System Less Insuerable.
(26 Oct. 2014). Retrieved March 4, 2018 from https://www.nngroup.com/articles/
Luke Wroblewski. 2013. Mobile Design Details: Avoid The Spinner. (17 Sept.
2013). Retrieved March 2, 2018 from https://www.lukew.com//entry.asp?1797