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