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
Motion isn’t just something UX designers include superficially to add delight to a product. Applied thoughtfully, motion enhances usability.
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
Motion isn't just something UX
designers include superficially
0:00
to add delight to a product.
0:05
Applied thoughtfully,
motion enhances usability.
0:07
Audi's design system includes
a section called Functional Animation.
0:12
And that's a useful way to
describe the role of motion
0:17
in guiding users through an application.
0:20
Audi suggests using motion
to provide feedback.
0:24
Users receive confirmation.
0:29
Yes, that tap or click really happened.
0:31
Yes, something's loading.
0:34
Highlight. This is an important feature.
0:38
Pay attention.
0:41
Meaning. How is this interface used?
0:43
What interactions are possible here?
0:47
Position. Where did
this content come from?
0:52
Will a vertical swipe reveal more?
0:56
In addition to determining the role of
motion in an application's storytelling
1:00
process.
1:04
A design system provides guidance
on how animation should behave
1:06
to suit brand personality.
1:11
Does your app speak with a loud,
colorful voice,
1:13
with animations slapping you in the face,
demanding your attention?
1:17
Or does it speak modestly,
1:21
with animations providing gentle
usability cues and nothing more?
1:23
Adobe Spectrum begins with
three motion principles,
1:29
purposeful, intuitive, seamless.
1:33
If the animation calls attention
to itself, it's too much.
1:37
By intuitive, Adobe means
the animation should behave like
1:41
a real-world object subject
to forces like gravity.
1:45
As falling objects near the Earth,
they accelerate.
1:50
Animators call this effect Easing In.
1:54
A ball bouncing up from
a surface will decelerate
1:58
until it eventually starts falling again.
2:02
Animators term this
a deceleration Easing Out.
2:04
Adobe demonstrates these effects and
provides code for implementation.
2:08
Here's a list of suggested motion
durations which depend on the distance and
2:16
complexity of each animation.
2:21
Finally, here are samples of different
types of animation I can choose from.
2:24
As new content enters the page,
I could fade it in, or
2:29
slide the content into place, or
combine both into a slide fade.
2:34
So those are the rules governing
the basic elements of style
2:42
you'll likely find in the design system.
2:46
Together, these rules form
of visual design language.
2:49
In our next stage, we'll take a look at
how these elements combine together,
2:54
piece by piece, like Legos, to form
a library of user interface elements.
2:59
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