1 00:00:00,810 --> 00:00:01,470 Welcome back. 2 00:00:01,740 --> 00:00:09,060 So before we talked about just motion in general and how important it is in the design process, but 3 00:00:09,060 --> 00:00:14,640 I really want to talk about like how to make purposeful animations, how to make motion in general purposeful 4 00:00:14,640 --> 00:00:15,510 in your design. 5 00:00:15,960 --> 00:00:22,350 And what I've done here is I've created this really cool prototype in terms of it's like a photo exploration 6 00:00:22,350 --> 00:00:23,100 application. 7 00:00:23,460 --> 00:00:28,680 It's going to help us figure out different types of ways we can make motion much more purposeful in 8 00:00:28,680 --> 00:00:29,490 our designs. 9 00:00:29,760 --> 00:00:34,740 What I'm going to do is I'm going to actually launch this in prototype. 10 00:00:34,740 --> 00:00:35,250 I have it here. 11 00:00:35,250 --> 00:00:36,180 So I'm going to press play. 12 00:00:36,180 --> 00:00:37,620 It's going to bring me over here. 13 00:00:38,010 --> 00:00:41,040 And this is what we're going to kind of play today just for now. 14 00:00:41,160 --> 00:00:44,250 And I'm going to show you some more advanced stuff in a second. 15 00:00:44,670 --> 00:00:49,350 But what I really want to talk about is when we use, like motion in a subtle way, it helps build, 16 00:00:49,350 --> 00:00:55,740 like, these mental models about how our system works and how users can interact with it instead of 17 00:00:55,740 --> 00:01:00,450 creating like animations or things like that for the purpose of just delay. 18 00:01:00,870 --> 00:01:01,290 Don't worry. 19 00:01:01,290 --> 00:01:02,070 That's OK, too. 20 00:01:02,070 --> 00:01:05,190 Like a confetti pop when something really good happens. 21 00:01:05,280 --> 00:01:11,010 Instead, we can use these animations or just motion in general for usability. 22 00:01:11,010 --> 00:01:17,490 Think of clues for what is happening within your product or maybe signifiers for how certain UI elements 23 00:01:17,490 --> 00:01:18,150 will behave. 24 00:01:18,660 --> 00:01:22,310 Now, the first thing I really want to talk about is state transitions. 25 00:01:22,620 --> 00:01:29,700 Now, this is huge within design and especially like when we're moving across a mobile app or just a 26 00:01:29,700 --> 00:01:35,340 Web app in terms of different transitions between screens and changes in your user interface can involve 27 00:01:35,340 --> 00:01:36,680 really hard cuts. 28 00:01:37,410 --> 00:01:41,580 I mean, that's a change from one screen to another without any transition whatsoever. 29 00:01:41,580 --> 00:01:43,410 And that's kind of like a big no no. 30 00:01:44,190 --> 00:01:47,140 Now, this makes things really difficult to follow. 31 00:01:47,310 --> 00:01:48,090 So think about it. 32 00:01:48,510 --> 00:01:51,780 If you open a door, you start to push the door open. 33 00:01:51,780 --> 00:01:56,050 And when you're in a new room, the same rules apply to digital products. 34 00:01:56,050 --> 00:02:00,300 So, I mean, you open the door slowly and you can see you're going into a new room. 35 00:02:00,660 --> 00:02:05,670 Can you imagine if you just, like, tap the door and you're like immediately in the room that you want 36 00:02:05,670 --> 00:02:06,090 it to be in? 37 00:02:06,110 --> 00:02:08,070 It'd be kind of weird and disorienting. 38 00:02:09,020 --> 00:02:14,840 So let's take a look at this example, when something has two or more states, it's easier for users 39 00:02:14,840 --> 00:02:18,350 to understand if things are animated rather than, like, instantaneous. 40 00:02:19,130 --> 00:02:23,780 If I were to click just like nature over here, you can see, like the hot spots. 41 00:02:24,090 --> 00:02:30,380 If I click that, I can see, like, it's a very gradual change, even with the navigation moving right 42 00:02:30,380 --> 00:02:30,940 to left. 43 00:02:30,950 --> 00:02:32,230 And this is all built in figment. 44 00:02:32,470 --> 00:02:36,590 Hey, you want to stress that because Sigma is awesome and I can also see the images. 45 00:02:36,590 --> 00:02:37,280 Let's do it again. 46 00:02:37,670 --> 00:02:38,960 Architecture is clickable. 47 00:02:40,180 --> 00:02:47,260 It makes that really, really smooth about if we click an image, so we have one over here. 48 00:02:49,270 --> 00:02:56,350 Look, I know as a user, if I'm clicking an image, I'm going gradually into a new detail screen, 49 00:02:56,560 --> 00:03:01,710 I can easily kind of come back out of that was click that again so I can see what's clickable here. 50 00:03:03,050 --> 00:03:08,900 And there you go, I'm back to my home page, and that's just me creating this simple animation in Fidelma, 51 00:03:09,200 --> 00:03:13,820 and that motion really helps smooth that state transition. 52 00:03:14,700 --> 00:03:20,340 The next thing I like to think about is visual feedback, so users really want to know their current 53 00:03:20,340 --> 00:03:25,010 context within a system at any given time, and you should really keep them guessing. 54 00:03:25,020 --> 00:03:31,800 So that could mean like the visual feedback of it being an active like element within your navigation 55 00:03:31,800 --> 00:03:32,390 over here. 56 00:03:33,370 --> 00:03:34,420 That's good feedback. 57 00:03:34,450 --> 00:03:35,430 That's one way to do it. 58 00:03:37,550 --> 00:03:44,540 Using just animation or just motion to tell the user what is happening with feedback really makes the 59 00:03:44,540 --> 00:03:48,230 user feel like they're interacting with the visual elements on the screen. 60 00:03:48,530 --> 00:03:50,410 Pressing buttons is like one way to do it. 61 00:03:50,630 --> 00:03:53,260 Let's use the example of pressing like a like button over here. 62 00:03:54,920 --> 00:03:58,100 So I have feedback over here that that's been pressed. 63 00:03:59,590 --> 00:04:03,430 And it's just a gradual motion and there's some more feedback at the bottom. 64 00:04:05,120 --> 00:04:10,820 So that's one way or a couple of ways that you can actually just showcase visual feedback or just easily 65 00:04:10,820 --> 00:04:17,240 giving feedback to your users if something were to happen where like you click something and a feedback 66 00:04:17,240 --> 00:04:19,850 shows somewhere else, that's just jarring. 67 00:04:20,000 --> 00:04:24,290 But it's, like I said, are a great way to show different types of visual feedback when there's some 68 00:04:24,290 --> 00:04:25,760 sort of interaction happening. 69 00:04:26,150 --> 00:04:27,980 And we'll get into that a little deeper later. 70 00:04:28,880 --> 00:04:32,360 Now, the last thing I really like to talk about is visual cues. 71 00:04:32,360 --> 00:04:37,520 So when your user starts using a product, it may be unclear for them on how to do something or where 72 00:04:37,520 --> 00:04:38,000 to look. 73 00:04:38,240 --> 00:04:39,200 That's totally normal. 74 00:04:39,200 --> 00:04:44,030 I mean, if you're products and you and a user hasn't used it before, are users in general haven't 75 00:04:44,030 --> 00:04:44,840 used it before. 76 00:04:44,920 --> 00:04:51,080 That's going to happen in just about making that experience as delightful and just easy to use as possible. 77 00:04:51,530 --> 00:04:57,330 So animation, I feel, can really help guide users attention and certain areas. 78 00:04:57,350 --> 00:05:00,330 It really directs their focus to the right spot at the right time. 79 00:05:00,710 --> 00:05:05,750 So this is especially true in like onboarding features you can think about, like when a user first 80 00:05:05,750 --> 00:05:06,360 comes to an app. 81 00:05:06,380 --> 00:05:07,460 Let's just jump back here. 82 00:05:08,620 --> 00:05:11,510 When a user first comes to an app, everything could be great. 83 00:05:11,530 --> 00:05:19,030 Oh, and this area can be like highlighted just to showcase that, hey, this is our navigation. 84 00:05:19,960 --> 00:05:22,570 And then it could switch gradually to something else. 85 00:05:22,570 --> 00:05:27,160 And just showcasing features like that, not necessarily like a swiping onboarding, but this is more 86 00:05:27,160 --> 00:05:30,310 like an onboarding for learning how to use an app. 87 00:05:30,730 --> 00:05:36,790 Another thing is like when we actually interact with elements, think about like Cartes, think about 88 00:05:36,790 --> 00:05:38,860 like little notifications. 89 00:05:39,070 --> 00:05:45,790 Sometimes they aren't as prominent as we like them to be and users may not necessarily know where to 90 00:05:45,790 --> 00:05:46,180 go. 91 00:05:46,210 --> 00:05:48,040 So let's look through another example. 92 00:05:48,040 --> 00:05:54,340 So I'm over here and we see this nice little click and then there's a feedback and there's should be 93 00:05:54,340 --> 00:05:58,330 like a little animation right there that we've created once again within Sigma. 94 00:05:58,510 --> 00:06:04,870 So we have a little kind of notification bouncing over and over again in my little navigation at the 95 00:06:04,870 --> 00:06:05,390 bottom. 96 00:06:05,680 --> 00:06:12,640 So this little ball notification kind of ball or ping, wherever you want to call it, is not obtrusive. 97 00:06:12,640 --> 00:06:14,290 It's just kind of in the corner. 98 00:06:14,440 --> 00:06:21,730 It's very subtle, but there is some movement there that should redirect the user's attention to something 99 00:06:21,730 --> 00:06:22,650 you want them to click. 100 00:06:22,920 --> 00:06:29,020 Now, it may not be this, but I can see it really being used for like a car or for our application. 101 00:06:29,020 --> 00:06:31,520 So we may go ahead and do something like that in the future. 102 00:06:31,960 --> 00:06:35,170 So that's one way to like have a visual cue. 103 00:06:35,780 --> 00:06:43,630 And those are different ways you can use animations and motion in your product to just make your product 104 00:06:43,630 --> 00:06:50,130 a much better experience for users and make your motion animations much more purposeful. 105 00:06:50,140 --> 00:06:54,610 See, like everything that's been incorporated within this little app that we've built. 106 00:06:56,960 --> 00:07:04,280 This little prototype, everything is very useful if we didn't have these different types of animations 107 00:07:04,280 --> 00:07:07,700 and I'll show you what it will look like, so if we just go to our prototype. 108 00:07:08,770 --> 00:07:11,540 And over here, I have a thing called smart anime. 109 00:07:11,590 --> 00:07:15,340 Now, if it was just instant, let's take a look at what that could look like. 110 00:07:16,030 --> 00:07:19,330 Like, that's just really jarring right off the bat and. 111 00:07:21,370 --> 00:07:27,940 That's nice, that's Jurien, so just subtle things like that really improve a user's experience and 112 00:07:28,090 --> 00:07:32,940 this type of thing should really be thought about way ahead of time. 113 00:07:32,950 --> 00:07:36,340 Don't leave this to the end, because by that time it may be too late. 114 00:07:37,060 --> 00:07:39,870 So think about ways to incorporate motion. 115 00:07:39,880 --> 00:07:44,590 Think about like state transitions, think about visual cues, think about visual feedback. 116 00:07:44,800 --> 00:07:47,670 That's going to make your app so much more better. 117 00:07:47,680 --> 00:07:50,850 And I guarantee it'll have people talking. 118 00:07:51,310 --> 00:07:54,820 So that's it for creating purposeful animations.