Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Designing Dynamic UI States

Well done!

You have completed Designing Dynamic UI States!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Partial States

1:30 with Hope Armstrong

A Partial state is when some data is present. It's in between an Empty State and an Ideal State.

Let's get back into the app I'm designing. 0:00
The next state I'd like to demo is a partial state. 0:03
A partial state is when some data is present. 0:09
It's in between an empty state and an ideal state. 0:13
How does it look with just one county filled in? 0:17
Okay, so 0:21
since there's just one trip card, there's a lot of empty white space to the right. 0:22
This makes the app look unbalanced and kind of dull. 0:27
This area is prime real estate to do something fun and engaging. 0:32
To inspire users to think about their next trip, 0:37
I can show a panel with actionable recommendations. 0:41
Labeled with the county, they can check out nearby destinations and 0:45
start planning future trips. 0:48
This makes the app more useful to the user and 0:51
also shifts their focus to the exciting possibilities of where they can go. 0:54
Instead of the sad reality of where they haven't been, I also removed the line 0:59
graph for now, since it isn't interesting to see with only one data point. 1:04
The line graph becomes helpful when there are a few data points. 1:09
Once more trips are displayed, I can remove the Explore panel and 1:13
show the graph. 1:17
Can you think of anything else that would be helpful to do with this partial state? 1:19
Feel free to pause the video and brainstorm some ideas. 1:23
In the next video, I'll talk about loading states. 1:27