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
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