feature _________________________________________________ 89Content placeholders, or skeletons, are used to construct a
preloaded version of a page while content is loading. They not
only prevent jagged and disruptive ‘reflows’ — where rendered
elements are pushed out of view by subsequent items loading
in their place — they can also make users believe the page is
loading quicker than it really is.
When implementing skeleton screens, content should be
rendered as soon as it is ready, rather than blocking it until
everything is ready to show.
Which works best? Which one feels faster? An app where the
user has no indication when the content is coming? Or one that
uses staggered loading animations, skeleton screens, frosted
images and metadata on content? These two examples may
take the same amount of time to load, but the user perception
of length is completely different.
Using a spinner shows no indication of when the page will be
finished loading. Brief animations, on the other hand, can mask
the loading transition and imply that the system is ‘progressing ‘
rather than ‘processing.’
We all want to see reaction to our actions, and it’s no
different on the web. Smooth scrolling, silky animations and tap
feedback states all help to increase a user’s perception that the
experience is responding immediately to their touch.
Considering tap, hover, loading and passive states all help to
simulate a performant experience, Google’s Material Design
(material.io/design/interaction/states.html) provides
guidance of how to effectively craft all these states.
Today’s user is impatient, and the more you make them
think, the more likely they are to go elsewhere to get the job
done. Clarity and simplicity are therefore key components of
any highly performant web experience.
Squoosh demonstrates how huge
file savings can come without
compromising image quality.When motion is used effectively it helps
inform users and guide the their next step.