Five UI States3:35 with Hope Armstrong
A UI state refers to a particular condition the screen is in at a specific time.
Five UI States:
- Ideal State
- Empty State
- Feedback state
- Partial State
- Loading State
- UI state: A particular condition the screen is in at a specific time.
- Dynamic UI: Content changes. Text, images, and data are generated by the system or submitted by the user, and the UI changes based on various conditions.
- Static UI: Content stays the same, and the UI stays the same for all users.
[MUSIC] 0:00 Hi, I'm Hope. 0:08 I'm a product designer and teacher at Treehouse. 0:10 In this workshop, you'll learn how to mockup designs with dynamic views and 0:14 content. 0:18 Specifically, we'll focus on product design. 0:20 Product design involves creating screens that 0:23 change based on different conditions. 0:28 That makes it dynamic. 0:32 Marketing design which includes the creation of landing pages and 0:33 home pages doesn't tend to be as interactive. 0:39 And the content generally stays the same. 0:43 For that reason, it's static. 0:47 And, there are fewer opportunities for designing dynamic UI states. 0:49 When designing views and a product, it's typical to think about the ideal state. 0:55 Content perfectly fills the UI, graphs contain data. 1:00 The user has familiarity with the tool and 1:05 the full functionality of the product as a parent. 1:07 However, there are many more scenarios to anticipate. 1:12 From onboarding new users, to helping more seasoned users discover new 1:16 functionalities, and manage copious amounts of data. 1:21 You can think of these scenarios as UI states. 1:25 A UI state refers to the particular 1:29 condition the screen is in at a specific time. 1:32 For example, 1:38 you may be familiar with animations that are shown while a page is loading. 1:38 Here's how it looks when you open a project on webflow.com, 1:44 a web development tool. 1:48 The copywriting is clever. 1:51 It's a playful way of joking about what's happening behind the scenes, 1:53 while also being straightforward about the loading progress. 1:57 So, this is a loading state. 2:01 There are several other states too. 2:03 In the book, designing products people love, Scott Hurff describes the UI stack. 2:07 These are the five states of user interface design, ideal state, 2:14 empty state, error state, partial state, and loading state. 2:19 This framework is a helpful way to think about the permutations 2:25 of a user interface. 2:29 I just like to make one tweak, 2:31 which is to rename the error state to the feedback state. 2:33 This is more encompassing of all the feedback types, 2:37 including warning and success states. 2:41 So my UI stack looks like this. 2:44 When thinking about these UI states, 2:48 there are common conditions that influence each state. 2:50 There are user base conditions such as planned types, 2:54 the amount of time a user has been using the product, custom settings, and so on. 2:57 Then, there are database conditions, 3:04 such as when there is very little data, some data, and an abundance of data. 3:07 And finally, there are system conditions, 3:13 such as Internet connectivity issues, and server outages. 3:16 All of these affect what content is available to include in the UI. 3:21 That covers the five UI states. 3:26 In the next video, we'll take a closer look at ideal states. 3:30
You need to sign up for Treehouse in order to download course files.Sign up