1
00:00:00,360 --> 00:00:05,280
Everyone, and welcome back, so we're going to talk about a couple of different things just to start

2
00:00:05,280 --> 00:00:11,340
off, we're going to talk about smaller interactions and we can even go into creating interactions like

3
00:00:11,340 --> 00:00:12,770
off of your mobile screen.

4
00:00:13,260 --> 00:00:15,090
So let's jump right in.

5
00:00:15,570 --> 00:00:18,710
So right now, we have the home page over here.

6
00:00:19,320 --> 00:00:24,090
And if you look over at the bottom of the nav, we have it linked to this wish-List page.

7
00:00:25,560 --> 00:00:27,360
And essentially that's just going to pop over here.

8
00:00:27,360 --> 00:00:32,520
But I want to show the interaction of removing an item from your wish list.

9
00:00:32,550 --> 00:00:40,230
So in this kind of wire frame, my intention would be that a user clicks on one of these little heart's.

10
00:00:41,750 --> 00:00:42,480
Over here.

11
00:00:43,160 --> 00:00:50,570
And once they click their heart, they it will get removed from the actual list.

12
00:00:51,080 --> 00:00:56,690
I mean, we can probably clean this up a little bit more, but I want for the sake of this prototype,

13
00:00:56,690 --> 00:00:57,860
I want that to happen.

14
00:00:57,860 --> 00:01:02,180
I want them to click this heart and remove it directly from the list.

15
00:01:02,180 --> 00:01:03,320
So I'll show you how to do that.

16
00:01:05,020 --> 00:01:10,570
We'll get a sneak preview of something called Smart Enemy, which we'll get into later.

17
00:01:10,940 --> 00:01:18,190
OK, so the great thing with stigma is you can kind of make these small little animations and you probably

18
00:01:18,190 --> 00:01:21,820
want to start doing them or exploring them a little bit more now.

19
00:01:22,870 --> 00:01:27,350
So when I click on here, I'm just going to link directly to them right now on top.

20
00:01:27,370 --> 00:01:29,590
I just want to navigate to wishlists.

21
00:01:30,890 --> 00:01:31,580
Over here.

22
00:01:33,040 --> 00:01:38,950
I really would only start fiddling with animations, if you want to start doing some quick interaction,

23
00:01:38,950 --> 00:01:43,900
prototyping, I wouldn't really dive right into it like right right now because that type of fidelity

24
00:01:43,900 --> 00:01:44,620
doesn't matter.

25
00:01:44,620 --> 00:01:49,930
But I'll show you certain things that could really help your prototype if you just add a little bit

26
00:01:49,930 --> 00:01:55,450
of motion to it, because certain instant animations are a bit jarring for users.

27
00:01:55,900 --> 00:02:00,430
So, yeah, we're going to show you something that's really smooth and I'll show you what it looks like

28
00:02:00,430 --> 00:02:00,850
without it.

29
00:02:01,300 --> 00:02:04,990
So, OK, what we're going to do here is we're going to click on this button.

30
00:02:05,140 --> 00:02:10,510
This top layer is going to be removed and the rest of the content is going to shift up.

31
00:02:11,530 --> 00:02:17,560
So I'm just going to remove this as a culture group 20 when we do actually start animation.

32
00:02:17,770 --> 00:02:21,310
The key is to make sure that your names are the same.

33
00:02:21,340 --> 00:02:22,660
So this is the same group 20.

34
00:02:23,080 --> 00:02:25,000
We'll call this remove.

35
00:02:26,550 --> 00:02:34,800
So it's not so arbitrary and we'll call this one remove as well, perfect, so I know that I need to

36
00:02:34,800 --> 00:02:35,820
just delete this.

37
00:02:36,330 --> 00:02:37,290
You can do whatever you want with it.

38
00:02:37,300 --> 00:02:39,060
You can spin it around, you can rotate it.

39
00:02:39,660 --> 00:02:40,650
So let's just keep up there.

40
00:02:40,650 --> 00:02:42,120
So we just have a point of reference.

41
00:02:43,840 --> 00:02:50,740
So I'm going to just deselect that, let's go into our design.

42
00:02:51,830 --> 00:02:52,490
Perfect.

43
00:02:53,030 --> 00:02:57,440
So we're just going to move that up and to oops.

44
00:02:59,920 --> 00:03:01,600
OK, let's move up.

45
00:03:03,180 --> 00:03:03,870
That's good.

46
00:03:04,860 --> 00:03:07,060
We're going to get remove and we're just going to do it.

47
00:03:08,400 --> 00:03:09,120
Perfect.

48
00:03:09,870 --> 00:03:14,250
We're going to shift this frame up, you'll notice that the navigation actually moves with it and that's

49
00:03:14,280 --> 00:03:15,740
based off of like constraints.

50
00:03:15,750 --> 00:03:18,780
So this is kind of the constraints are set to bottom.

51
00:03:18,790 --> 00:03:23,040
So whenever I shift the entire frame, though, it's within, it's going to kind of attach itself to

52
00:03:23,040 --> 00:03:23,420
the bottom.

53
00:03:23,430 --> 00:03:26,070
If I had it to the top, you'll see what happens here.

54
00:03:27,060 --> 00:03:28,930
It's just going to stay put.

55
00:03:29,400 --> 00:03:33,480
So let's just keep that to the bottom and let's go right into this animation.

56
00:03:33,480 --> 00:03:36,510
Let's just make sure we have everything set up perfectly.

57
00:03:36,940 --> 00:03:38,610
So when I do click here.

58
00:03:40,410 --> 00:03:42,450
Let's make that an instant.

59
00:03:46,000 --> 00:03:46,850
And let's take a look.

60
00:03:47,290 --> 00:03:52,540
So let's go over here, see, even that is jarring in its own way.

61
00:03:52,780 --> 00:03:59,260
When you click the wish list, maybe we should have something like just in, you know, at this stage.

62
00:03:59,320 --> 00:04:03,160
I mean, if you have the time, it makes you look a little nicer and makes it less jarring.

63
00:04:05,240 --> 00:04:10,640
So here it is, my wish list, if I click it, it just goes away really quickly.

64
00:04:11,560 --> 00:04:12,840
OK, let's go back.

65
00:04:16,540 --> 00:04:17,530
That is weird.

66
00:04:17,560 --> 00:04:24,730
OK, so what we're going to do is we are just going to make sure that all our groups have product names.

67
00:04:27,180 --> 00:04:28,680
I am not sure why that.

68
00:04:32,610 --> 00:04:35,310
OK, and we're actually just going to.

69
00:04:37,110 --> 00:04:44,040
Copy that again, and we're going to make that same animation, so we're going to prototype it on tap,

70
00:04:44,310 --> 00:04:46,320
navigate to wish list.

71
00:04:47,410 --> 00:04:50,920
OK, and we're going to make this a smart enemy.

72
00:04:51,990 --> 00:04:57,630
And we're just going to leave that for now because we are definitely going to get into this at a later

73
00:04:57,630 --> 00:04:57,870
date.

74
00:04:57,870 --> 00:05:02,430
But I just want to give you a little bit of a sneak preview of the different types of things you can

75
00:05:02,430 --> 00:05:07,380
do, because, you know, at this stage, you want to start prototyping some animations a bit.

76
00:05:08,960 --> 00:05:14,480
You want to start thinking about how things move on your screen just because, I mean, like I said,

77
00:05:14,510 --> 00:05:17,270
you saw that instant animation was just kind of jarring.

78
00:05:18,080 --> 00:05:22,070
So let's go back to wish-List and we're just going to do this.

79
00:05:22,700 --> 00:05:23,780
And that's a little bit better.

80
00:05:23,990 --> 00:05:31,190
So you'll notice that if you just click, it goes away and the items move up.

81
00:05:31,400 --> 00:05:38,060
Now, in the actual case of a user interacting with that little element, I would probably have like

82
00:05:38,060 --> 00:05:41,240
a warning come up that says, are you sure you want to delete this?

83
00:05:41,240 --> 00:05:46,070
Or maybe if we don't have a warning that prevents them from doing that right away or a confirmation

84
00:05:46,310 --> 00:05:50,650
we have maybe like a little toaster, a banner that says, do you want to undo that?

85
00:05:50,840 --> 00:05:52,300
So let's actually prototype that.

86
00:05:53,360 --> 00:05:59,600
So we're going to you notice how like we have similar screens repeated over and over again.

87
00:06:00,500 --> 00:06:01,130
Well.

88
00:06:02,840 --> 00:06:04,730
That really kind of.

89
00:06:05,800 --> 00:06:10,770
Is the point, I mean, you're trying to create these little interactions that are actually quite complex,

90
00:06:10,780 --> 00:06:13,770
there's so many moving pieces that we don't necessarily take into account.

91
00:06:14,230 --> 00:06:16,420
So let's just create that as a point of reference.

92
00:06:16,420 --> 00:06:17,380
And what we can do is.

93
00:06:20,030 --> 00:06:23,030
Let's just create a little toast.

94
00:06:23,060 --> 00:06:25,850
We can just have it at the bottom, which should be pretty cool.

95
00:06:26,120 --> 00:06:32,390
Let's just set the film to why we can even give it a little shadow so we have a little bit more.

96
00:06:34,420 --> 00:06:36,820
You know, just contrast.

97
00:06:38,780 --> 00:06:41,000
We are going to fix this position into the bottom.

98
00:06:44,780 --> 00:06:46,050
Let's just position it.

99
00:06:47,720 --> 00:06:53,930
Above the nav bar, perfect, we can just give it like.

100
00:06:57,270 --> 00:06:59,400
A little bit of a border radius and.

101
00:07:01,720 --> 00:07:06,700
Let's just fix that shadow because it's a really hard shadow, so that's fine, we can give the blur

102
00:07:06,700 --> 00:07:07,570
like a 20.

103
00:07:09,450 --> 00:07:11,020
We bring down the opacity on that.

104
00:07:11,040 --> 00:07:12,810
I think that's totally cool for now.

105
00:07:13,110 --> 00:07:14,710
Let's just draw some text in there.

106
00:07:18,510 --> 00:07:27,930
Are you sure you want to remove that so I mean, like even when you write copy, you should actually

107
00:07:27,930 --> 00:07:30,000
think about it from the user's experience.

108
00:07:30,450 --> 00:07:32,670
Don't just fill everything with, like, a lorem ipsum.

109
00:07:32,670 --> 00:07:35,820
You have to start thinking about this kind of stuff really early.

110
00:07:36,870 --> 00:07:38,400
So that's a little bit big.

111
00:07:38,400 --> 00:07:41,610
We can actually just bump that down a bit, give regular.

112
00:07:44,310 --> 00:07:51,060
OK, and we can probably have, like some more Texan, the side here that just says a new.

113
00:07:52,820 --> 00:07:59,240
And let's just underline it to make it look like it's actually clickable or make it bold.

114
00:08:03,700 --> 00:08:06,760
OK, all right, alignment's.

115
00:08:08,440 --> 00:08:09,370
I like.

116
00:08:10,250 --> 00:08:11,120
Very nice.

117
00:08:11,320 --> 00:08:12,400
OK.

118
00:08:20,260 --> 00:08:21,520
OK, so it's.

119
00:08:25,530 --> 00:08:26,430
Very.

120
00:08:29,900 --> 00:08:37,280
Very good, it is definitely easy to see and easy to tap, and if the user does tap that, we need to

121
00:08:37,280 --> 00:08:41,030
think about them going all the way back here.

122
00:08:42,370 --> 00:08:48,850
And we're going to smart enemy again, because what that will do is it will essentially bring that product

123
00:08:48,850 --> 00:08:52,660
back in the same way it was removed, or at least it should be.

124
00:08:52,930 --> 00:08:54,880
So after delay.

125
00:08:56,690 --> 00:09:05,600
We can do after delay, so after that happens a hundred milliseconds, let's actually go to here and

126
00:09:05,600 --> 00:09:07,370
let's see what happens.

127
00:09:07,400 --> 00:09:09,430
So actually, let's see how this works out.

128
00:09:10,980 --> 00:09:12,480
Because there's a couple of ways we can do this.

129
00:09:13,460 --> 00:09:16,310
So let's start again, we're going to remove this.

130
00:09:19,580 --> 00:09:21,080
Oh, nice.

131
00:09:22,730 --> 00:09:28,010
Let's take a look so we could have that toast as an overlay, so like if a user clicks out of it, I

132
00:09:28,010 --> 00:09:28,980
mean, we can hide it.

133
00:09:28,980 --> 00:09:32,440
But I think it's nice this way because it's kind of like right in the user's face.

134
00:09:32,450 --> 00:09:36,320
This is a pretty big thing, especially if they remove something from a list that they created.

135
00:09:36,320 --> 00:09:39,320
You know, people can easily do that sometimes.

136
00:09:39,650 --> 00:09:44,020
Maybe we hide this within like some sort of, like, menu button like that's like that delete.

137
00:09:44,900 --> 00:09:46,430
But this is really cool.

138
00:09:46,440 --> 00:09:46,850
So.

139
00:09:47,790 --> 00:09:54,030
It removes and then after the delay, this pops up and it goes back cool, so that's how you create

140
00:09:54,030 --> 00:10:00,210
some pretty small micro interactions and not using much of your time to create something like that.

141
00:10:00,210 --> 00:10:03,290
But it can easily illustrate like what you're trying to get across.

142
00:10:03,720 --> 00:10:07,530
So we have a little toast that pops up and it comes back perfectly.

143
00:10:08,490 --> 00:10:09,340
So go out there.

144
00:10:09,360 --> 00:10:10,410
I mean, have some fun.

145
00:10:10,410 --> 00:10:14,610
Think about those little interactions, like let's go back together and I can show you a couple that

146
00:10:14,610 --> 00:10:15,810
I'm already thinking about.

147
00:10:17,010 --> 00:10:25,500
So maybe when they click this product, you know, maybe the image expands to this section and it goes

148
00:10:25,500 --> 00:10:26,760
straight to the home page.

149
00:10:26,760 --> 00:10:30,060
Like, you can already start kind of like prototyping that animation if you want.

150
00:10:30,870 --> 00:10:37,200
I'm going to teach you how to do something like that when we get back into actually discussing motion

151
00:10:37,200 --> 00:10:38,450
and micro interactions.

152
00:10:38,910 --> 00:10:43,980
There's a couple of little things like what happens when you click plus and minus, like it doesn't

153
00:10:44,000 --> 00:10:48,290
actually need to be an animation or anything, but I just need to know, like a feedback change.

154
00:10:48,750 --> 00:10:51,180
So start thinking about these little things like that.

155
00:10:51,840 --> 00:10:56,780
Maybe like if you remove everything from your cart, does like the notification go away or do you and

156
00:10:56,790 --> 00:10:57,920
have the notification.

157
00:10:57,930 --> 00:11:01,810
So those are all small little micro interactions that you can start thinking about.

158
00:11:02,490 --> 00:11:07,830
So that's it for the absolute prototyping basics and figure like these are the absolute basics that

159
00:11:07,830 --> 00:11:10,800
you'll need to know at least to just prototype quickly.

160
00:11:11,220 --> 00:11:16,440
And yeah, you can just go out there really fast and put together a quick prototype like we did here

161
00:11:16,440 --> 00:11:21,870
in terms of like an interaction or if you really wanted to, you can link together the NAV to just show

162
00:11:21,870 --> 00:11:25,500
people just the entire overview of the application.

163
00:11:26,130 --> 00:11:27,600
I wouldn't necessarily do that.

164
00:11:27,600 --> 00:11:29,670
And I have all these built in.

165
00:11:29,670 --> 00:11:36,360
You could, but it would be like a massive file that it would be so easy to kind of get lost in.

166
00:11:36,660 --> 00:11:42,030
So take it easy, go out there, validate things that you want to validate, like the small interactions

167
00:11:42,030 --> 00:11:49,080
or just like certain user flows and get that feedback that you definitely need to just iterate on your

168
00:11:49,080 --> 00:11:49,590
product.