"Build a Blog Reader Android App" was retired on April 1, 2015. You are now viewing the recommended replacement.
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
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
New terms:
- 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.
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
[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 is apparent.
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up