1
00:00:00,360 --> 00:00:08,280
So in our last video, we went over what exactly is a micro interaction and the structure of a micro

2
00:00:08,280 --> 00:00:08,910
interaction.

3
00:00:09,300 --> 00:00:14,610
Now, I know that was kind of really in-depth, but it's super important for us to understand how we

4
00:00:14,610 --> 00:00:17,010
can create really great micro interactions.

5
00:00:17,250 --> 00:00:21,300
Making good micro interactions can really push our product over the edge.

6
00:00:22,050 --> 00:00:25,570
So let's talk about why they are so important.

7
00:00:25,590 --> 00:00:29,700
I think we kind of already have an understanding, but let's get into this.

8
00:00:30,930 --> 00:00:35,990
So micro interactions don't usually get a lot of attention during like just a design process.

9
00:00:36,480 --> 00:00:42,300
They seem like these little small details of a broader, much larger experience.

10
00:00:42,720 --> 00:00:49,040
Those details have a big impact on the type of product that you are building.

11
00:00:49,060 --> 00:00:50,130
Doesn't matter what type of product.

12
00:00:50,130 --> 00:00:56,190
I mean, it just has a large impact and it gives your users a good impression of your product.

13
00:00:56,760 --> 00:00:59,750
That's why, in a nutshell, why they're so important.

14
00:01:00,710 --> 00:01:06,320
Now, in most cases, the difference between products that we really like and products that we don't

15
00:01:06,320 --> 00:01:12,140
really like, I think it comes down to like just the Polish and quality of those micro interactions.

16
00:01:12,200 --> 00:01:17,660
Like it's essential that we put a lot of focus on designing those small, small moments because they

17
00:01:17,660 --> 00:01:19,240
really make up a lot of the app.

18
00:01:19,250 --> 00:01:26,180
I know that sounds weird, but think about if Facebook didn't have those little animated reactions,

19
00:01:26,360 --> 00:01:33,620
think about if we had, like, bad transitions between, like deleting cards and stuff like that and

20
00:01:33,620 --> 00:01:35,630
things were happening instantaneously.

21
00:01:35,780 --> 00:01:38,660
I mean, this goes way back to motion in general.

22
00:01:38,870 --> 00:01:44,600
Now, it's so important that we create those really great small moments that make your app much easier

23
00:01:44,600 --> 00:01:46,850
to use and much more delightful to use.

24
00:01:47,780 --> 00:01:52,330
So the biggest thing is that they provide so much feedback to our users.

25
00:01:53,030 --> 00:01:54,050
Now, think about it.

26
00:01:54,050 --> 00:01:56,480
Your product should be intuitive no matter what.

27
00:01:56,480 --> 00:01:57,680
I mean, it's no excuse.

28
00:01:57,780 --> 00:02:01,710
There should be intuitive, but this is what we should always strive for.

29
00:02:01,730 --> 00:02:06,770
So my interactions are something that you can achieve with this, like just providing feedback in general.

30
00:02:06,780 --> 00:02:12,620
So the biggest thing to consider is like the user's journey when we're designing for, like, providing

31
00:02:12,620 --> 00:02:13,380
good feedback.

32
00:02:13,670 --> 00:02:19,790
Now, if a user is, you know, in the middle of, like a payment process or something like that, could

33
00:02:19,790 --> 00:02:24,900
you imagine if they didn't get any feedback whatsoever, that would be pretty bad.

34
00:02:25,490 --> 00:02:30,500
I mean, we need to look for places where the user might need that feedback and reassurance.

35
00:02:30,500 --> 00:02:35,360
And like, this is especially a place that a user needs that think about, like sending and transferring

36
00:02:35,360 --> 00:02:37,850
money, more complicated things like that.

37
00:02:37,850 --> 00:02:46,010
And like like I said, if you didn't get that success or that confirmation, that would be pretty jarring

38
00:02:46,010 --> 00:02:46,730
as an experience.

39
00:02:46,730 --> 00:02:48,590
And I personally would be confused.

40
00:02:48,590 --> 00:02:49,910
I would be a little concerned.

41
00:02:50,180 --> 00:02:53,540
I would probably try and contact their customer service line.

42
00:02:53,960 --> 00:02:57,850
I would really want to know where my money went and if the payment was successful.

43
00:02:57,860 --> 00:03:02,450
So this is really important just in general for your product.

44
00:03:02,460 --> 00:03:07,490
It cuts down a lot of costs when not having to talk to users because, you know, you're giving them

45
00:03:07,490 --> 00:03:08,540
the right amount of feedback.

46
00:03:08,540 --> 00:03:11,540
You're making your application much more intuitive.

47
00:03:12,720 --> 00:03:16,220
They also help prevent errors.

48
00:03:16,820 --> 00:03:24,140
Now, helping users deal with air states is a common practice, but it's much better when we kind of

49
00:03:24,140 --> 00:03:27,380
prevent those kind of errors from happening in the first place.

50
00:03:27,800 --> 00:03:32,690
So what I'm thinking here, like what happens if we kind of have, like, inline validation when we

51
00:03:32,690 --> 00:03:37,310
think like this, we can create products that keep users in control of their own experience.

52
00:03:37,670 --> 00:03:42,740
So when users signs up to like a new product or service, they often have to enter like a password or

53
00:03:42,740 --> 00:03:43,310
username.

54
00:03:43,850 --> 00:03:49,070
And generally, like once they hit submit, then they're hit with all the errors at once.

55
00:03:49,730 --> 00:03:51,400
Now, that's bad UX.

56
00:03:51,680 --> 00:03:55,310
What we should do is we can easily handle this with inline validation.

57
00:03:55,490 --> 00:03:57,860
We talked about this within forms.

58
00:03:58,070 --> 00:03:59,240
We talked about this.

59
00:03:59,510 --> 00:04:00,500
It just in general.

60
00:04:00,500 --> 00:04:01,220
That's just good.

61
00:04:01,220 --> 00:04:03,200
You ask, so is this coming back again?

62
00:04:03,200 --> 00:04:06,440
And this is a micro interaction in and of itself.

63
00:04:06,770 --> 00:04:12,020
So having the inline validation while it's happening, instead of actually forcing the user to click

64
00:04:12,020 --> 00:04:14,600
like submit or next, is really helpful.

65
00:04:15,380 --> 00:04:18,530
But it's also helpful in the state of, like, thinking about like undo.

66
00:04:19,190 --> 00:04:24,410
Sometimes you make mistakes and click things accidentally and, you know, your product should always

67
00:04:24,410 --> 00:04:30,080
make it easier for users to kind of go back and undo that action that they did in the first place.

68
00:04:31,120 --> 00:04:37,510
With micro interactions, they really help communicate that state within this kind of component over

69
00:04:37,510 --> 00:04:37,800
here.

70
00:04:39,280 --> 00:04:43,730
And it really helps to suggest that further action is kind of possible.

71
00:04:43,960 --> 00:04:45,540
So let's think about what's happening here.

72
00:04:45,550 --> 00:04:51,580
The user clicks that they click on the submit button and then they can undo with that line of text.

73
00:04:52,790 --> 00:04:59,660
So mistakes happen all the time, and just incorporating something like that could really help.

74
00:05:00,470 --> 00:05:03,980
Now let's think about seamless experiences.

75
00:05:04,760 --> 00:05:07,790
Micro interaction can really make seamless interactions.

76
00:05:07,790 --> 00:05:11,820
The experiences, the less after a user needs to invest in an interaction.

77
00:05:11,840 --> 00:05:14,040
I mean, the better usability of the product.

78
00:05:14,630 --> 00:05:19,440
Now, this is why we kind of strive for that seamless design that we always want.

79
00:05:19,790 --> 00:05:24,740
We don't want users to put too much effort into doing the tasks that we want to do.

80
00:05:24,950 --> 00:05:26,780
Micro interactions can really help here.

81
00:05:27,170 --> 00:05:30,080
When I think about that, I think about like SWIP interactions.

82
00:05:30,440 --> 00:05:34,250
We don't want you just to, like, tap on these little areas.

83
00:05:34,250 --> 00:05:40,460
We want them to be able to just effortlessly slide throughout and make the app so easy to use.

84
00:05:41,300 --> 00:05:45,830
Swiping allows users to easily move throughout the list instead of constantly tapping.

85
00:05:46,250 --> 00:05:47,720
So like I said, it's so much more easier.

86
00:05:48,380 --> 00:05:52,340
But also another example is just pulling to refresh.

87
00:05:52,940 --> 00:05:56,490
This is an excellent example of a micro interaction that is triggered by the user.

88
00:05:56,510 --> 00:06:01,760
I mentioned this before in the last video, but this also allows users to kind of pull down a list of

89
00:06:01,760 --> 00:06:09,200
items to receive more information, whether that be like emails, more post images, you name it, anything.

90
00:06:09,800 --> 00:06:14,120
It makes the experience of browsing much more smoother.

91
00:06:14,630 --> 00:06:16,600
Can you imagine if we didn't have to refresh?

92
00:06:16,610 --> 00:06:21,530
I couldn't really think of a design pattern that would really help you get off just like a refresh button.

93
00:06:21,530 --> 00:06:23,840
But that would be kind of weird with a pull, a refresh.

94
00:06:23,900 --> 00:06:28,840
You have to really do is just pull the screen down and everything just kind of happens on its own.

95
00:06:28,850 --> 00:06:31,760
So making that much more easier to use.

96
00:06:32,770 --> 00:06:39,070
The next is encouraging engagement now using emotion and design in general makes it possible to form

97
00:06:39,070 --> 00:06:40,480
a better connection with your users.

98
00:06:40,870 --> 00:06:41,710
That's just fact.

99
00:06:42,310 --> 00:06:44,920
Animated feedback works really well here.

100
00:06:45,280 --> 00:06:49,510
Like think about a horror animation when somebody like like something.

101
00:06:50,640 --> 00:06:55,680
Or maybe like a confetti pop, what I have over here, when somebody does something like a task that

102
00:06:55,680 --> 00:06:59,430
you want them to do, whether they, like, cleared their whole inbox, I know that's hard for some

103
00:06:59,430 --> 00:06:59,910
people.

104
00:07:00,390 --> 00:07:05,670
But also in this instance, it's something really big, like you have been chosen for the job that is

105
00:07:05,670 --> 00:07:06,060
huge.

106
00:07:06,060 --> 00:07:08,670
And we want to celebrate those little moments for people.

107
00:07:09,030 --> 00:07:14,340
I mean, like I said, it could be something as simple as clearing your inbox to something much more

108
00:07:14,670 --> 00:07:19,540
bigger and much more celebratory, like getting a job that you wanted.

109
00:07:19,950 --> 00:07:25,770
So this really helps encourage engagement because it's really possible to achieve a better result when

110
00:07:25,770 --> 00:07:28,320
a user achieves important goals or finished the tasks.

111
00:07:28,500 --> 00:07:32,100
And these moments can really be reinforced with these micro interactions.

112
00:07:32,400 --> 00:07:39,180
And by doing this, you're creating that sense of achievement and can make that little moment a bit

113
00:07:39,180 --> 00:07:39,900
more special.

114
00:07:40,140 --> 00:07:41,260
So that's what we're aiming for.

115
00:07:41,280 --> 00:07:45,630
That's what I'm trying to get at, is you can use these little kind of micro interactions, these little

116
00:07:45,630 --> 00:07:52,830
animations, to really bring users back into your product, keep them excited about your product, get

117
00:07:52,830 --> 00:07:54,990
them just really loving your products overall.

118
00:07:55,620 --> 00:08:00,510
Now, I'm not saying we should have confetti pops everywhere, but just choose accordingly.

119
00:08:00,510 --> 00:08:02,700
And it's got to match your brand as well.

120
00:08:02,700 --> 00:08:06,440
And that's the next thing you know, they can really help communicate the tone of your brand.

121
00:08:06,990 --> 00:08:07,650
Big surprise.

122
00:08:07,660 --> 00:08:12,960
We got Facebook reactions here again, but micro contractions should always have a purpose.

123
00:08:13,200 --> 00:08:16,460
But that doesn't mean that they shouldn't be able to capture your brand.

124
00:08:16,710 --> 00:08:24,540
So the last slide I talked about encouraging engagement and confetti pops may not be for every single

125
00:08:24,660 --> 00:08:25,190
product.

126
00:08:25,200 --> 00:08:30,270
I mean, they may not be suitable for that, but we need to think about our brand and micro interactions

127
00:08:30,270 --> 00:08:34,090
can really align with our brand and help even communicate it further.

128
00:08:34,290 --> 00:08:40,230
So if your brand's tone is fun and colorful and joyful, it's OK to try and recreate that within your

129
00:08:40,230 --> 00:08:41,430
micro interactions.

130
00:08:42,090 --> 00:08:44,050
This only works if it matches your brand.

131
00:08:44,520 --> 00:08:51,570
So think about these different tips about creating just better micro interactions and why they're so

132
00:08:51,570 --> 00:08:58,560
important, because these kind of formed the basis of just how we make interactions in general and what

133
00:08:58,560 --> 00:09:02,310
we're thinking about when we actually go and plan them out.

134
00:09:02,640 --> 00:09:07,170
So in our next video, we're actually going to jump in and create some small micro interactions with

135
00:09:07,170 --> 00:09:12,960
famous smart anime, and then we'll create our own animation with motion.