Everyone, and welcome back, so we are going to be talking about something super exciting, I know
we talked about motion and micro interactions are next.
Micro interactions are so important and they involve a lot of motion.
Sometimes they are very subtle.
Usually they are very subtle, but micro interactions are very fun.
And I'm going to show you what they are and why they're so important.
And we're going to jump into how we're going to create some of our own.
So let's jump right in.
So this is a micro interaction over here, just pulling to refresh and something is happening.
Even just the interaction between the slider is a micro interaction.
So let me show you exactly what they are.
So what is a micro interaction despite being small micro interactions have the power to make that experience
much more effective in human.
So let's take a look at the definition.
Now, if I to define a micro interactions, I would say that they're contained product moments that
are meant for a single use case.
And those little moments are a large part of all of our interactions daily.
I mean, we need to think about the different things that we actually interact with.
So maybe every time you set your alarm, the sliding back and forth that is happening over here is a
micro interaction.
How about checking your notifications?
That little pop up that may pop up when you have a notification and whatever app you're using is a micro
interaction.
We're adding to your cards.
If I was buying something at a store.
That is an interaction.
That click the feedback that you get over there and what's happening on the screen, so those are all
little micro interactions.
Micro interactions do great job at communicating the tone of your brand.
This can go on to be part of your brand signature moments.
I mean, one thing that I think about when I think about a brand that uses micro interactions to communicate
their tone.
I think Facebook I know this is an example.
It's kind of overused, but the Facebook reactions are amazing.
I mean, just kind of cracks me up.
They're really great.
The little subtle animations, when you click them, when you interact and hover over them to select
whether you like or you you know, you love something or you're angry at something, these little things,
they all communicate the tone of the overall Facebook brand.
And I really can't think of Facebook without these anymore, to be honest.
So a micro interaction has structure, and I know it kind of sounds weird, I mean, like you think,
oh, they're just kind of like a little animation or something, but they actually do have structure.
And it came from Stouffer's book Micro Interactions Designing with details.
So in order to create an effective micro interaction, there are four essential parts.
The first one is trigger.
The second one is rules.
Then there is feedback and then modes and loops.
So let's talk about that.
The first one being trigger.
So we've seen this one already, but a trigger is this is what starts the micro interaction.
It can be like user initiated.
So in this case, user is actually just kind of swiping through something and there is some sort of
feedback happening there.
Or if I click a button and there's a checkmark or if I pull to refresh.
So those are all user triggered.
But they can also be initiated by a product, so that could be like a user gain notification.
So over here, like if I were to click something in the NAV or if I were to click something and I get
like a little maybe notification bubble that is system initiated, these little clicks are all user
initiated, though.
So if we were to think of a little kind of bubble that would pop up or if these animations were to be
happening, when they want to get the user's feedback, that is a micro interaction and that is the
trigger like this.
So we see a little notification bubble that is a great just a great example of what system triggered
micro interaction looks like.
The second one is rules, so this is the second piece of our structure over here, and these really
determine how micro interactions respond to a trigger while also defining what happens during that interaction.
So I know I have an example here, but generally a rule isn't really seen by the user.
They're kind of the things that are happening in the background.
So when I click on this, this needs to fill there needs to be a little kind of ball underneath here
to replace the text.
Those are just the rules, the actual interaction that's happening.
That isn't necessarily the rule that is laid out, but that's just an example of what a rule could be.
The third is feedback.
So this tells the user what is actually happening during a micro interaction, so think about like inputting
something that is invalid in an input field or having a successful input field.
Something is happening here.
I can see when I click the outline of the input is showing, so does give me feedback that I am clicking.
The camera is flickering, showing me that I need to actually enter something and when I enter something
wrong.
I'm getting actual error feedback or success feedback.
The next is Loops and Mode's, these are kind of like the meta rules of a micro interaction and how
it changes when it's used, like sometimes micro interactions won't necessarily change.
A good example is if you enter a password and a Google Chrome has saved your password, that is like
a micro interaction for kind of saving passwords in entering passwords over and over again.
It changes over time based off of like the sites you visit and the data it collects.
Another example I have here is what happens if I'm talking to somebody and I'm inputting some text here
and it kind of pre fills the types of words that I've already said in the past of the sentences.
I've already said in the past and allows me to kind of, you know, interact much more easily based
off of, like past conversations.
So that is an example of loops and modes.
So understanding the structure of micro interactions allows you to really design ones that make a difference.
But not every element can be a micro interaction.
I mean, there's a lot that can be, you know, go through some examples.
Scroll bars are definitely a micro interaction.
They use triggers, visual feedback to see the user kind of changing the location of the page.
So that is a scroll bar.
That is visual feedback of what is happening.
So that is a micro interaction.
Generally, elements that aren't a micro interaction are static elements.
Static elements that are always static are not part of a macro interaction.
Flows that have multiple actions are also not necessarily part of a micro interaction.
So just keep that in mind.
I'll get into that a little more detail.
Alarms are micro interaction, so they are triggered by the system.
They can also be triggered by the user.
So right here, a system is giving feedback to the user needs to get out of bed and walk away for something
to happen here.
So I'm guessing the alarm is really, really loud.
So that is a micro interaction based off of a system trigger.
Now, buttons can be part of my contractions sometimes.
So if there is no feedback when a user clicks a button, then there really is no micro interaction.
So if I click a button and nothing happens to that button, that's Nonnemaker interaction.
But if I click this button, you can see that the actual state changes and other things will pop up
within this realm.
That is a micro interaction.
Things don't necessarily need to pop up, but you can see that just a state change on the button.
What about pull to refresh now, this is a micro interaction, the user triggers this and they get visual
feedback to that user action.
So I'm swiping down to get more data.
There is a feedback of the loader and that is a micro interaction.
Now, swiping animations are also micro interaction.
So if I'm swiping in this case through movies.
That is a micro interaction, users trigger this, they get feedback, and that user has swiped an element.
What about notifications?
Those are also micro interactions, so a system triggers a notification, it pops up.
I mean, it doesn't necessarily need to do this, but if it pops up here, that is a micro interaction
and it provides the user with feedback of a new notification.
Now, there are other examples.
Of what like micro interactions can be and what they can't be an example like is a video player.
So if we go back to thinking about a button, a video player has buttons, but an entire video player
is not a micro interaction.
The buttons within the video player, however, are if you're adjusting the volume, that is a tiny
micro interaction.
If you're pressing play on the video player, that is a micro interaction.
The video player itself, not so much.
Even gifts, the gifts aren't micro interaction's, those are just kind of images on loop, and they
don't necessarily adhere to system triggered or user triggered behaviors.
So those wouldn't be micro interactions as well.
But all these different elements can be made into micro interactions if they are either triggered by
the user, triggered by the system, and give a visual feedback to what is happening.
So remember, they need to follow that structure and that's it for what are micro interactions.