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 Interactions!
You have completed Designing Interactions!
Preview
Now we'll delve into micro-interactions, which are tiny interactions that can make a big impact on the user experience.
New Terms:
- Microinteractions: contained product moments that revolve around a single use case
Parts of a micro-interaction
- trigger
- rules
- feedback
- loops or modes
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
Let's explore Microinteractions.
0:00
As explained by Val Head,
design advocate at Adobe and
0:04
author of Designing Interface Animation.
0:07
Microinteractions are contained
product moments, but
0:11
revolve around a single use case.
0:15
Microinteractions can be
used to immediately show
0:18
the outcome of a user's action.
0:21
This gives the user
the feeling of full control,
0:23
as they can directly manipulate the UI and
expect a response.
0:26
This tight feedback loop builds trust and
empowers the user.
0:32
For example, when you upload a file,
0:36
the UI should immediately indicate
the file upload is in progress.
0:39
And it's even better if it
shows the upload status and
0:44
estimated time of completion.
0:47
Dan Safford, the author of the book,
0:50
Microinteractions, breaks
them into four parts,
0:53
trigger, rules, feedback,
and loops or modes.
0:58
The trigger is what activates
the microinteraction, and
1:04
it can be user initiated or
system initiated.
1:08
An example of a user
initiated microinteraction
1:13
is this cute animation that
appears in Yelp's iOS app.
1:17
As I pull to refresh the content,
a cat launches off into space.
1:22
System initiated microinteractions trigger
automatically under certain circumstances.
1:31
For instance, in Treehouse,
1:38
a notification appears to let you know
about new courses and other news.
1:40
As for the rules, that's what happens
after a trigger is initiated.
1:47
For instance,
what happens if you watch Netflix for
1:52
a long time without
interacting with the UI?
1:56
You get a prompt asking
if you're still watching.
2:00
The feedback is what tells
the user the system status.
2:04
It can be a visual treatment such
as a hover effect or an animation.
2:08
Or it can be a message or vibration.
2:13
And then there are loops and modes.
2:16
This is what happens after
the feedback is shown.
2:19
A loop is based on the link
of the interaction.
2:22
Does the feedback automatically
disappear after some time elapses, or
2:26
does the user need to dismiss it?
2:30
Is there an alarm sound that
plays again if it's snoozed?
2:33
As for most, those are deviations
from the standard interaction.
2:37
Think about how the notifications
on your phone change
2:42
if it's in Do Not Disturb mode.
2:45
If you receive a call,
your phone stays quiet and
2:47
the lock screen doesn't light up.
2:50
Another mode is based on time.
2:54
When you first start using a product,
there may be more informational and
2:56
warning messages to help you onboard.
3:00
Once you interact more,
perhaps those messages don't show anymore.
3:04
And maybe information about more
advanced tips are triggered to show.
3:08
As a final note, microinteractions also
are used to show brand personality and
3:14
spark the light even during
typically mundane tasks.
3:20
When you like a tweet on Twitter,
3:25
the heart animates to show
a joyous celebration.
3:27
This makes the act of liking
feel extra rewarding.
3:31
That covers microinteractions.
3:35
Up next,
we'll take a closer look at feedback.
3:38
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