Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Designing Dynamic UI States!
You have completed Designing Dynamic UI States!
Preview
In an Empty state, there is limited content or no content to display in a UI. Also known as a Blank state.
New Terms:
- Empty state: When there is limited content or no content to display in a UI. Also known as a Blank state.
- Onboarding experience: The journey of guiding a new user to use a product
Resources:
- https://emptystat.es - Empty state inspiration
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
Now that you have an understanding of
ideal states, where the app is filled
0:00
with a comfortable amount of data,
let's go the other direction and
0:05
imagine what it would look
like without any data at all.
0:09
Let's see how the app would look for
a brand new user.
0:14
If I simply removed all of
that inputted trip data,
0:18
I'm basically left with an empty map.
0:22
This is not very inspiring.
0:25
In fact, it feels daunting.
0:28
As a new user,
0:31
I'd probably wonder how I'd ever visit
all of the counties in this huge state.
0:32
This state is called the empty state.
0:38
In an empty state, there is limited
content or no content to display in a UI.
0:43
You may also hear this
referred to as a blank state.
0:50
The two terms are used interchangeably.
0:54
In an empty state,
there's limited content to show, but
0:57
don't let that limit your creativity.
1:01
It's best a practice to treat this
as an opportunity to delight,
1:04
inspire or comfort the user,
versus treating it like a dead end.
1:08
Invite the user to take
action wherever possible.
1:13
The empty state can refer
to a few scenarios.
1:18
One, a new user is visiting the app, two,
a user cleared out all of the content.
1:24
And three, there is no data to show.
1:31
In this scenario I just mentioned,
a new user is experiencing the app.
1:35
Instead of showing the ideal state
with all of the data removed,
1:41
I can design a more custom experience.
1:45
This is referred to as
the onboarding experience.
1:50
And it's the journey of guiding
a new user to use a product.
1:54
I can help the user add
their first county visited.
1:58
Perhaps they've already
gone on a few trips and
2:02
just need to catch the app
up with their progress.
2:04
Or perhaps they haven't
begun traveling yet.
2:08
For that case,
2:11
I've added a call out box over the map
to show people the map is interactive.
2:12
When hovering over a county,
2:18
it shows fun facts about the county
as well as places of interest.
2:20
That way the user can
have fun exploring and
2:25
planning their travel, even if they
haven't traveled anywhere yet.
2:28
Next, let's look at an empty state
triggered by a user clearing out
2:33
the content.
2:37
Check out this empty state in Asana.
2:39
I don't have any
notifications in my inbox,
2:43
because I'm up to date
with my team's progress.
2:46
The charming illustration of
people dancing is a nice touch and
2:49
it aligns with the brand's
playful illustration style.
2:53
In this empty state,
no further action is needed.
2:57
Unlike my travel app example,
it's actually a preferred state.
3:01
Now let's look at empty states that
occurs when there isn't any data to show.
3:06
Thredup.com is a used clothing website.
3:11
Let's search for frog t-shirt.
3:15
No items match with the search term, so
3:23
I see this empty state with
a prompt to try a new search.
3:25
I like how there are suggestions for
how to get better search results.
3:30
That covers empty states.
3:35
If you'd like to see more
examples of empty states,
3:38
check out a site called EmptyStates.
3:41
There's a link in the teachers notes.
3:44
Now that you've seen a few examples
of empty states, stay tuned for
3:47
the next video where I'll cover
the remaining states to consider.
3:51
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