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
The interactive state is a moment when a user engages with a UI.
New terms:
- Interactive state: A moment when a user engages with a UI.
Resources
- Designing Interactions - Treehouse course
- Material Design interaction states
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
The five states cover
the main scenarios in a UI.
0:00
A state that occurs across
most of these states, but
0:04
the loading state being a possible
exception is the interactive state.
0:08
This is when the user
engages with the UI,
0:13
whether it's a hover, click,
focus state, and so on.
0:18
Check out these examples and
the material design documentation.
0:23
For the purposes of this workshop, I won't
go into the details of interaction design,
0:28
but if you'd like to learn more,
check out the links in the teachers notes.
0:33
You'll also want to design for
dynamically generated content.
0:37
While you'll likely be using static
content, such as text and images in
0:41
your mock up, when the app is in use, it
will need to accommodate dynamic content.
0:46
This content can be text, images and
0:52
data that are generated by the system or
submitted by the user.
0:55
That opens up the door to
a wide variety of content.
1:00
And that's why it's important
to use actual text, images and
1:04
data wherever possible.
1:08
If you handcraft the text in a paragraph
to always fit perfectly in two lines,
1:11
then the layout may break when
a user inputs a lengthy paragraph
1:16
that spans more than two lines.
1:20
Here, I have a card that summarizes
the trips in a given County.
1:22
There's only so much room on the card, so
I've kept the description at three lines.
1:26
Any text beyond that gets clipped, and a
"..." appears to show it continues.
1:32
The user can click to open the county page
1:38
if they'd like to continue
reading the description.
1:41
In addition to too much text,
you'll also want to account for
1:44
short text and no text at all.
1:47
Also, plan for different images.
1:49
Perhaps the user hasn't added any images for their visit to a county.
1:53
In that case,
I could design a fallback image.
1:57
It could be an illustration, an image
served dynamically from the app's database
2:01
of county images, or no image at all.
2:06
Another factor to consider is
the aspect ratio of the image.
2:10
In my design, I have the trip photo
set to be full width, with the top and
2:13
bottom cropped if the image
exceeds the height.
2:18
That will result in some parts
of the image not being visible,
2:21
which is fine with me in this design.
2:25
The image is really just for
providing a glimpse into the gallery.
2:28
But let's say I want to use
a trip image on the County page.
2:32
Let's say I want the Hero image
to be the main focal point,
2:36
spinning the width at the page.
2:39
Since the photo is more prominent,
I want to be sure it appears fully.
2:42
This is a challenge due to its
wide width and short height.
2:46
From the available trip images,
I could ask the developer to add logic
2:50
to select an image with
a horizontal orientation.
2:55
But what if one isn't available, and
only a vertical image is available?
2:59
Let's see how it will look full width.
3:04
Okay, that's not great,
we're just seeing the tip of her head.
3:07
How about if we display it as full height?
3:12
Okay, now there's some white
space on the left and right.
3:17
One technique is to apply the image
the background and blur it.
3:21
Okay, now that's filling the space but
it looks too busy.
3:26
I'll add a semi translucent black
rectangle to tone down the background, so
3:31
the center image stands out.
3:36
What do you think?
3:38
This would be a good option for
vertical images, and
3:40
otherwise, horizontal images
can appear full width, great.
3:43
Now that we have that taken care of,
3:48
let's talk about displaying
text over a provided image.
3:50
Make sure there's an overlay
to provide enough contrast so
3:54
that the text is legible.
3:57
In my app, I overlay a count of images.
4:00
I've included a gradient behind
the text so the image is darkened.
4:04
This hopefully will provide enough
contrast for lighter images.
4:08
Looking back at the ideal state, it works
well for the few photos there, although,
4:14
I should test it with even
lighter images to be sure.
4:19
Feel free to play around with it yourself.
4:22
All right, now I have quite a few
states prepared for my app.
4:25
Depending on the various conditions,
4:29
I can work with a developer to serve
up the appropriate user experiences.
4:31
That's a wrap for this lesson.
4:36
Up next,
I'll share how I created my mock-ups so
4:38
they're set up to handle dynamic content.
4:41
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