1 00:00:00,560 --> 00:00:05,590 Everyone, and welcome back, so we are going to be talking about something super exciting, I know 2 00:00:05,590 --> 00:00:09,640 we talked about motion and micro interactions are next. 3 00:00:09,880 --> 00:00:15,780 Micro interactions are so important and they involve a lot of motion. 4 00:00:16,480 --> 00:00:18,550 Sometimes they are very subtle. 5 00:00:18,560 --> 00:00:22,120 Usually they are very subtle, but micro interactions are very fun. 6 00:00:22,120 --> 00:00:25,990 And I'm going to show you what they are and why they're so important. 7 00:00:26,080 --> 00:00:28,660 And we're going to jump into how we're going to create some of our own. 8 00:00:29,170 --> 00:00:30,610 So let's jump right in. 9 00:00:30,640 --> 00:00:36,580 So this is a micro interaction over here, just pulling to refresh and something is happening. 10 00:00:37,120 --> 00:00:41,270 Even just the interaction between the slider is a micro interaction. 11 00:00:41,290 --> 00:00:43,600 So let me show you exactly what they are. 12 00:00:44,140 --> 00:00:51,610 So what is a micro interaction despite being small micro interactions have the power to make that experience 13 00:00:52,240 --> 00:00:54,070 much more effective in human. 14 00:00:54,550 --> 00:00:56,050 So let's take a look at the definition. 15 00:00:56,740 --> 00:01:01,120 Now, if I to define a micro interactions, I would say that they're contained product moments that 16 00:01:01,120 --> 00:01:02,590 are meant for a single use case. 17 00:01:03,370 --> 00:01:09,040 And those little moments are a large part of all of our interactions daily. 18 00:01:09,070 --> 00:01:13,120 I mean, we need to think about the different things that we actually interact with. 19 00:01:13,610 --> 00:01:20,230 So maybe every time you set your alarm, the sliding back and forth that is happening over here is a 20 00:01:20,230 --> 00:01:21,490 micro interaction. 21 00:01:22,560 --> 00:01:24,750 How about checking your notifications? 22 00:01:25,700 --> 00:01:30,980 That little pop up that may pop up when you have a notification and whatever app you're using is a micro 23 00:01:30,980 --> 00:01:31,670 interaction. 24 00:01:33,120 --> 00:01:35,460 We're adding to your cards. 25 00:01:36,770 --> 00:01:38,660 If I was buying something at a store. 26 00:01:39,600 --> 00:01:40,890 That is an interaction. 27 00:01:41,830 --> 00:01:48,310 That click the feedback that you get over there and what's happening on the screen, so those are all 28 00:01:48,310 --> 00:01:50,230 little micro interactions. 29 00:01:52,080 --> 00:01:56,670 Micro interactions do great job at communicating the tone of your brand. 30 00:01:57,510 --> 00:02:00,490 This can go on to be part of your brand signature moments. 31 00:02:00,510 --> 00:02:06,180 I mean, one thing that I think about when I think about a brand that uses micro interactions to communicate 32 00:02:06,180 --> 00:02:06,820 their tone. 33 00:02:06,990 --> 00:02:09,360 I think Facebook I know this is an example. 34 00:02:09,360 --> 00:02:13,490 It's kind of overused, but the Facebook reactions are amazing. 35 00:02:13,500 --> 00:02:16,800 I mean, just kind of cracks me up. 36 00:02:16,800 --> 00:02:17,610 They're really great. 37 00:02:17,610 --> 00:02:23,100 The little subtle animations, when you click them, when you interact and hover over them to select 38 00:02:23,100 --> 00:02:29,250 whether you like or you you know, you love something or you're angry at something, these little things, 39 00:02:29,250 --> 00:02:33,330 they all communicate the tone of the overall Facebook brand. 40 00:02:33,660 --> 00:02:37,290 And I really can't think of Facebook without these anymore, to be honest. 41 00:02:38,800 --> 00:02:47,350 So a micro interaction has structure, and I know it kind of sounds weird, I mean, like you think, 42 00:02:47,350 --> 00:02:52,780 oh, they're just kind of like a little animation or something, but they actually do have structure. 43 00:02:53,140 --> 00:02:58,510 And it came from Stouffer's book Micro Interactions Designing with details. 44 00:02:58,990 --> 00:03:02,940 So in order to create an effective micro interaction, there are four essential parts. 45 00:03:03,610 --> 00:03:04,900 The first one is trigger. 46 00:03:05,260 --> 00:03:07,200 The second one is rules. 47 00:03:07,780 --> 00:03:11,420 Then there is feedback and then modes and loops. 48 00:03:12,010 --> 00:03:13,450 So let's talk about that. 49 00:03:14,980 --> 00:03:16,390 The first one being trigger. 50 00:03:16,400 --> 00:03:21,810 So we've seen this one already, but a trigger is this is what starts the micro interaction. 51 00:03:21,820 --> 00:03:24,130 It can be like user initiated. 52 00:03:24,160 --> 00:03:32,230 So in this case, user is actually just kind of swiping through something and there is some sort of 53 00:03:32,230 --> 00:03:33,700 feedback happening there. 54 00:03:34,120 --> 00:03:37,940 Or if I click a button and there's a checkmark or if I pull to refresh. 55 00:03:37,960 --> 00:03:39,670 So those are all user triggered. 56 00:03:40,660 --> 00:03:47,470 But they can also be initiated by a product, so that could be like a user gain notification. 57 00:03:47,890 --> 00:03:53,770 So over here, like if I were to click something in the NAV or if I were to click something and I get 58 00:03:53,770 --> 00:04:00,130 like a little maybe notification bubble that is system initiated, these little clicks are all user 59 00:04:00,130 --> 00:04:01,000 initiated, though. 60 00:04:02,050 --> 00:04:07,300 So if we were to think of a little kind of bubble that would pop up or if these animations were to be 61 00:04:07,300 --> 00:04:13,480 happening, when they want to get the user's feedback, that is a micro interaction and that is the 62 00:04:13,480 --> 00:04:15,280 trigger like this. 63 00:04:16,220 --> 00:04:23,870 So we see a little notification bubble that is a great just a great example of what system triggered 64 00:04:23,990 --> 00:04:25,070 micro interaction looks like. 65 00:04:26,450 --> 00:04:32,480 The second one is rules, so this is the second piece of our structure over here, and these really 66 00:04:32,480 --> 00:04:39,360 determine how micro interactions respond to a trigger while also defining what happens during that interaction. 67 00:04:39,590 --> 00:04:45,390 So I know I have an example here, but generally a rule isn't really seen by the user. 68 00:04:45,920 --> 00:04:47,900 They're kind of the things that are happening in the background. 69 00:04:47,910 --> 00:04:55,220 So when I click on this, this needs to fill there needs to be a little kind of ball underneath here 70 00:04:55,220 --> 00:04:56,240 to replace the text. 71 00:04:56,270 --> 00:04:59,360 Those are just the rules, the actual interaction that's happening. 72 00:04:59,900 --> 00:05:06,530 That isn't necessarily the rule that is laid out, but that's just an example of what a rule could be. 73 00:05:08,710 --> 00:05:11,230 The third is feedback. 74 00:05:12,470 --> 00:05:19,430 So this tells the user what is actually happening during a micro interaction, so think about like inputting 75 00:05:19,430 --> 00:05:25,040 something that is invalid in an input field or having a successful input field. 76 00:05:25,670 --> 00:05:26,900 Something is happening here. 77 00:05:27,170 --> 00:05:34,070 I can see when I click the outline of the input is showing, so does give me feedback that I am clicking. 78 00:05:34,070 --> 00:05:39,740 The camera is flickering, showing me that I need to actually enter something and when I enter something 79 00:05:39,740 --> 00:05:40,280 wrong. 80 00:05:42,210 --> 00:05:46,200 I'm getting actual error feedback or success feedback. 81 00:05:48,350 --> 00:05:54,110 The next is Loops and Mode's, these are kind of like the meta rules of a micro interaction and how 82 00:05:54,110 --> 00:05:58,850 it changes when it's used, like sometimes micro interactions won't necessarily change. 83 00:05:59,060 --> 00:06:07,010 A good example is if you enter a password and a Google Chrome has saved your password, that is like 84 00:06:07,250 --> 00:06:11,960 a micro interaction for kind of saving passwords in entering passwords over and over again. 85 00:06:11,960 --> 00:06:17,060 It changes over time based off of like the sites you visit and the data it collects. 86 00:06:17,390 --> 00:06:23,600 Another example I have here is what happens if I'm talking to somebody and I'm inputting some text here 87 00:06:23,600 --> 00:06:29,720 and it kind of pre fills the types of words that I've already said in the past of the sentences. 88 00:06:29,720 --> 00:06:35,990 I've already said in the past and allows me to kind of, you know, interact much more easily based 89 00:06:35,990 --> 00:06:37,660 off of, like past conversations. 90 00:06:37,910 --> 00:06:41,020 So that is an example of loops and modes. 91 00:06:41,420 --> 00:06:47,330 So understanding the structure of micro interactions allows you to really design ones that make a difference. 92 00:06:48,390 --> 00:06:52,110 But not every element can be a micro interaction. 93 00:06:52,140 --> 00:06:55,230 I mean, there's a lot that can be, you know, go through some examples. 94 00:06:56,420 --> 00:06:59,870 Scroll bars are definitely a micro interaction. 95 00:07:00,260 --> 00:07:06,350 They use triggers, visual feedback to see the user kind of changing the location of the page. 96 00:07:06,380 --> 00:07:07,730 So that is a scroll bar. 97 00:07:07,940 --> 00:07:11,850 That is visual feedback of what is happening. 98 00:07:11,870 --> 00:07:13,370 So that is a micro interaction. 99 00:07:13,370 --> 00:07:18,500 Generally, elements that aren't a micro interaction are static elements. 100 00:07:19,400 --> 00:07:23,600 Static elements that are always static are not part of a macro interaction. 101 00:07:24,230 --> 00:07:28,930 Flows that have multiple actions are also not necessarily part of a micro interaction. 102 00:07:29,540 --> 00:07:31,300 So just keep that in mind. 103 00:07:31,790 --> 00:07:33,900 I'll get into that a little more detail. 104 00:07:34,730 --> 00:07:39,050 Alarms are micro interaction, so they are triggered by the system. 105 00:07:39,080 --> 00:07:40,950 They can also be triggered by the user. 106 00:07:41,780 --> 00:07:48,140 So right here, a system is giving feedback to the user needs to get out of bed and walk away for something 107 00:07:48,260 --> 00:07:49,240 to happen here. 108 00:07:49,250 --> 00:07:51,890 So I'm guessing the alarm is really, really loud. 109 00:07:52,320 --> 00:07:56,960 So that is a micro interaction based off of a system trigger. 110 00:07:57,770 --> 00:08:02,270 Now, buttons can be part of my contractions sometimes. 111 00:08:02,480 --> 00:08:06,640 So if there is no feedback when a user clicks a button, then there really is no micro interaction. 112 00:08:06,650 --> 00:08:11,030 So if I click a button and nothing happens to that button, that's Nonnemaker interaction. 113 00:08:11,030 --> 00:08:16,790 But if I click this button, you can see that the actual state changes and other things will pop up 114 00:08:16,790 --> 00:08:18,260 within this realm. 115 00:08:18,410 --> 00:08:20,060 That is a micro interaction. 116 00:08:20,090 --> 00:08:23,270 Things don't necessarily need to pop up, but you can see that just a state change on the button. 117 00:08:24,180 --> 00:08:31,680 What about pull to refresh now, this is a micro interaction, the user triggers this and they get visual 118 00:08:31,680 --> 00:08:33,930 feedback to that user action. 119 00:08:33,930 --> 00:08:37,600 So I'm swiping down to get more data. 120 00:08:38,460 --> 00:08:43,440 There is a feedback of the loader and that is a micro interaction. 121 00:08:44,040 --> 00:08:47,220 Now, swiping animations are also micro interaction. 122 00:08:47,250 --> 00:08:49,470 So if I'm swiping in this case through movies. 123 00:08:51,450 --> 00:08:58,950 That is a micro interaction, users trigger this, they get feedback, and that user has swiped an element. 124 00:09:01,470 --> 00:09:03,150 What about notifications? 125 00:09:03,180 --> 00:09:10,920 Those are also micro interactions, so a system triggers a notification, it pops up. 126 00:09:10,930 --> 00:09:16,410 I mean, it doesn't necessarily need to do this, but if it pops up here, that is a micro interaction 127 00:09:16,800 --> 00:09:20,040 and it provides the user with feedback of a new notification. 128 00:09:20,640 --> 00:09:22,440 Now, there are other examples. 129 00:09:24,050 --> 00:09:31,450 Of what like micro interactions can be and what they can't be an example like is a video player. 130 00:09:31,460 --> 00:09:37,340 So if we go back to thinking about a button, a video player has buttons, but an entire video player 131 00:09:37,670 --> 00:09:39,490 is not a micro interaction. 132 00:09:39,710 --> 00:09:44,300 The buttons within the video player, however, are if you're adjusting the volume, that is a tiny 133 00:09:44,300 --> 00:09:45,190 micro interaction. 134 00:09:45,440 --> 00:09:48,980 If you're pressing play on the video player, that is a micro interaction. 135 00:09:49,220 --> 00:09:51,800 The video player itself, not so much. 136 00:09:52,960 --> 00:09:58,900 Even gifts, the gifts aren't micro interaction's, those are just kind of images on loop, and they 137 00:09:58,900 --> 00:10:03,340 don't necessarily adhere to system triggered or user triggered behaviors. 138 00:10:03,670 --> 00:10:05,880 So those wouldn't be micro interactions as well. 139 00:10:06,370 --> 00:10:11,380 But all these different elements can be made into micro interactions if they are either triggered by 140 00:10:11,380 --> 00:10:16,480 the user, triggered by the system, and give a visual feedback to what is happening. 141 00:10:16,510 --> 00:10:22,330 So remember, they need to follow that structure and that's it for what are micro interactions.