Empty States3:56 with Hope Armstrong
In an Empty state, there is limited content or no content to display in a UI. Also known as a Blank state.
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 up