Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The loading state occurs when the UI is receiving content or action is taking place.
New terms:
- Loading state: A transitionary moment when the UI is receiving content or action is taking place.
- Skeleton screen: A blank version of a page into which information is gradually loaded.
Resources:
Further Reading:
- How to fix a bad user interface - Scot Hurff
- Everything you need to know about Loading Animations - Lisa Dziuba
- Mobile Design Details: Avoid The Spinner - Luke Wroblewski
- UX Pattern Analysis - Loading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The final state we'll look
at is the loading state.
0:00
The loading state occurs
when the UI is receiving content or
0:03
action is taking place.
0:09
It can be triggered by an action,
such as opening an app,
0:11
uploading a file, or
narrowing results with a filter.
0:15
On mobile, apps are opened
by tapping a launcher icon.
0:19
This initiates the app's loading state.
0:24
Take a look at Uber's design for
their JUMP app, which is for
0:27
renting bicycles in cities.
0:31
The red screen makes the logo and
0:33
branding clear to orient the user
to the app they're opening.
0:35
Then, it has a cinematic feeling as it
0:39
pans into the map to show
the available bicycles.
0:42
Another loading state you may be
familiar with are progress bars.
0:46
When you upload an image to
the creative community on dribbble.com,
0:51
the image is overlaid with
a progress bar as it uploads.
0:55
Another popular solution
is a spinner icon.
1:01
There are some basic ones available for
free in the Font Awesome icon set.
1:04
I included a link in the teachers' notes.
1:09
While spinners do inform the user
the system is still active,
1:13
there's an opportunity to do something
more custom to fit a brand and
1:17
add more visual interest to the page.
1:21
Check out these creative ones from
an article written by Lisa Dziuba.
1:25
It's a good write-up about
loading animations, so
1:29
be sure to check out the link
in the teachers' notes.
1:32
It's also worth noting that while a
spinner doesn't inform the user the app is
1:41
still active and not frozen,
it's not always the best solution.
1:45
If you're able to show progress or
an estimation of completion,
1:50
that is a more transparent
solution than an infinite spinner.
1:54
Also, if you know the general layout of
the data to come, you can show a preview.
1:59
There is a technique called
progressive loading UI.
2:06
Visit the publishing website medium.com
to see this technique in use.
2:09
Note that I've throttled the network
to emulate a slow 3G connection here.
2:15
It doesn't actually load this slowly
with my normal Internet speed.
2:20
As the home page begins to load,
boxes appear as placeholders.
2:24
These boxes are called skeleton screens.
2:30
The term first appeared in a blog
post written by Luke Wroblewski,
2:34
called Mobile Design
Details: Avoid The Spinner.
2:39
Per his definition,
a skeleton screen is a blank
2:42
version of a page into which
information is gradually loaded.
2:47
This creates the sense that things
are happening immediately as
2:53
information is incrementally
displayed on the screen.
2:58
It essentially looks like
a wireframe version of the UI.
3:02
And then the text appears and
then the images are loaded.
3:07
By the way, images can be
progressively loaded as well.
3:13
Let's look at medium.com for an example.
3:17
See how the images load?
3:21
They start out blurry and then crisp up.
3:23
As you design the loading state,
consider perception.
3:26
Does the loading state make it
seem like the system is sluggish?
3:30
A spin around the loading screen can
sometimes give the impression that the app
3:34
is slow, whereas a progressive loading
UI can make it seem like the app
3:38
is fast even if both solutions take
the same amount of time to load.
3:43
The changes seen in progressive loading
can trick the brain into staying engaged.
3:49
For my app, I'd like the trip
images to load progressively.
3:55
Here's how I've mocked that
experience up in Figma.
3:59
Before the image loads,
a colored rectangle will appear.
4:03
The color will be based on the key or
predominant color in the image.
4:07
There are tools that help developers
systematically detect the color.
4:12
But for our purpose in Figma, we can
select a color using the eye dropper tool.
4:16
I've also turned the card
text into rectangles
4:22
to represent where the text will appear.
4:24
This is an example of a skeleton screen.
4:27
For the next step, the images are
displayed but they aren't in focus yet.
4:33
This gives the user a hint at what's
to come while the app loads the full
4:38
resolution.
4:43
You can see here that the text
is loaded at this point so
4:44
no more skeleton UI is needed there.
4:48
The final step is to show
the images in full resolution.
4:51
The app has fully loaded at this point.
4:55
That covers the five states.
4:58
As you design for
5:01
these states, consider the transitions
between the states as well.
5:01
As author Scott Hurff puts it,
It's
5:06
the five screen states and
the seamless transitions between them.
5:11
Without these transitionary elements,
we risk confusing or
5:16
surprising our customers as new
states appear and disappear.
5:20
So be careful of how users will perceive
a new state and carefully guide them.
5:26
This can mean leaving the essential
parts of the app in the same position.
5:32
Looking back at my app states,
you can see how I left the navigation and
5:36
the map as is.
5:40
This consistency helps
the user stay oriented and
5:42
allows them to get
comfortable with the UI.
5:47
Stick around for the next video where I'll
get into more details of dynamic states.
5:50
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up