1
00:00:01,340 --> 00:00:02,480
Hey and welcome back.

2
00:00:02,990 --> 00:00:08,530
We are going to be talking about sketching screen states now, I love sketching screen states.

3
00:00:08,810 --> 00:00:12,080
This focuses on drawing the entire screen or different interactions.

4
00:00:12,440 --> 00:00:17,660
An example is a user comes to a search page, clicks on a search bar and overlay pops up.

5
00:00:18,020 --> 00:00:20,300
They type get suggested searches.

6
00:00:20,480 --> 00:00:21,220
You get the point.

7
00:00:21,470 --> 00:00:24,290
We start thinking about those little micro interactions as well.

8
00:00:24,530 --> 00:00:25,670
That's the fun part, too.

9
00:00:26,000 --> 00:00:28,040
I spent a lot of my time actually drawing these.

10
00:00:28,070 --> 00:00:29,450
So let's go back to our client.

11
00:00:29,450 --> 00:00:31,330
Let's think about something that we can work on.

12
00:00:31,730 --> 00:00:36,560
I kind of gave a little example about searching for a product, and I think that's a good way to kind

13
00:00:36,560 --> 00:00:37,040
of start.

14
00:00:38,000 --> 00:00:40,880
Let's think about our home screen just a little bit more.

15
00:00:41,520 --> 00:00:42,860
So let's just title that.

16
00:00:43,460 --> 00:00:48,800
And when I'm going to do is, well, you'll notice that I'm not really writing any annotations because

17
00:00:49,100 --> 00:00:50,120
they're kind of illegible.

18
00:00:50,870 --> 00:00:55,010
But since we're doing this together, you know, get out your sketchpad, keep on going.

19
00:00:55,490 --> 00:00:58,670
You know what I'm drawing and we don't really need them in this case.

20
00:00:59,480 --> 00:01:04,850
So if I start to think about this in a little bit more detail, I start to think about what are the

21
00:01:04,970 --> 00:01:10,100
kind of like the different types of features and different types of elements that this page should have.

22
00:01:11,000 --> 00:01:13,640
You know, we talked about a profile image.

23
00:01:13,790 --> 00:01:16,250
We have a search here as well.

24
00:01:16,370 --> 00:01:20,510
And we could start thinking about, well, you know, we created a saved page.

25
00:01:20,810 --> 00:01:23,630
How does a user save an item?

26
00:01:23,630 --> 00:01:25,340
So we have our item here.

27
00:01:25,430 --> 00:01:28,460
Maybe it's a little heart on each image.

28
00:01:29,780 --> 00:01:31,760
Oh, no, I kind of like that.

29
00:01:33,150 --> 00:01:38,280
You know, I start to think about different things like the user can see in relation to that image of

30
00:01:38,280 --> 00:01:40,170
that type of content, that's really important.

31
00:01:40,770 --> 00:01:47,220
So if we do men, I start think about the product name, start thinking about like maybe there is the

32
00:01:47,220 --> 00:01:51,300
price, maybe there's some.

33
00:01:52,350 --> 00:01:55,650
Product information, if that's useful, I'm not sure.

34
00:01:55,680 --> 00:01:59,550
Is there a button can you just click this whole section?

35
00:01:59,550 --> 00:02:04,200
Is it like a card that's really going to be up to you and what you think is best for users?

36
00:02:04,380 --> 00:02:11,310
Typically, I don't like placing like little buttons over here and just limiting the user because like

37
00:02:11,310 --> 00:02:14,310
on mobile, you know, you want to tap larger surface areas.

38
00:02:15,270 --> 00:02:17,760
You've got to make your buttons much larger to.

39
00:02:20,510 --> 00:02:26,150
In this case, I probably will use like a card, I'm not sure just yet, but something to start thinking

40
00:02:26,150 --> 00:02:26,460
about.

41
00:02:26,480 --> 00:02:30,020
So this probably like this interaction when I'm thinking about it, maybe it's a carousel.

42
00:02:30,030 --> 00:02:33,860
So when the user kind of swipe left.

43
00:02:35,700 --> 00:02:43,350
What will happen is this will go there and we'll kind of start getting images that go left or right,

44
00:02:43,740 --> 00:02:44,850
which is pretty cool.

45
00:02:44,880 --> 00:02:46,280
So those will go left to right.

46
00:02:46,800 --> 00:02:49,540
But let's think a little bit more about this on screen.

47
00:02:49,560 --> 00:02:51,390
I mentioned like thinking about interest.

48
00:02:51,390 --> 00:02:56,100
We can start thinking about, like, ways that fits into the app.

49
00:02:57,560 --> 00:03:01,250
Maybe there's like interest title and Lacasse all.

50
00:03:02,460 --> 00:03:08,040
Thing where they can go find more interest or maybe edit their current interest, maybe they'll see

51
00:03:08,040 --> 00:03:13,950
items in relation to certain categories and.

52
00:03:16,460 --> 00:03:19,680
They can click on them and put them into a different funnel.

53
00:03:19,910 --> 00:03:24,830
So I'm starting to think a little bit more detail in terms of like what's on the page, what I need

54
00:03:24,830 --> 00:03:26,600
to account for when I'm building a product.

55
00:03:27,260 --> 00:03:29,700
And that's really helpful, especially with screen states.

56
00:03:30,560 --> 00:03:32,100
So we did talk about search.

57
00:03:32,120 --> 00:03:35,540
So what happens if you actually click this search over here?

58
00:03:36,810 --> 00:03:42,120
Let's draw a statement when somebody clicks a search, I'm thinking like an overlay will pop up.

59
00:03:42,330 --> 00:03:43,710
What does that interaction look like?

60
00:03:44,040 --> 00:03:45,560
So let's just start ground zero.

61
00:03:45,570 --> 00:03:48,390
No one will just name it overlay.

62
00:03:49,170 --> 00:03:51,780
Maybe an overlay pops from top to bottom.

63
00:03:52,740 --> 00:03:55,550
There's little X with the search.

64
00:03:56,370 --> 00:03:57,240
We're on mobile.

65
00:03:57,240 --> 00:03:59,820
So we have to remember that there's a keyboard here.

66
00:04:02,800 --> 00:04:05,260
It's a lot of rectangles.

67
00:04:06,830 --> 00:04:13,660
We also need to remember that these keyboards have some sort of large button that can be used as like

68
00:04:13,670 --> 00:04:14,180
an enter.

69
00:04:14,600 --> 00:04:17,180
So it's an alternate way for them to select something.

70
00:04:17,750 --> 00:04:22,670
So if they're writing something in there, if they're typing something in there, we need to start thinking

71
00:04:22,670 --> 00:04:23,720
about what happens.

72
00:04:24,200 --> 00:04:25,670
So once they start typing.

73
00:04:30,810 --> 00:04:32,000
We'll stay in the same screen.

74
00:04:33,430 --> 00:04:39,260
Everything up here will stay the same, but now we'll start getting some type of head Brazil here,

75
00:04:39,280 --> 00:04:42,140
let's zoom in so we can write a little bit more neatly.

76
00:04:42,400 --> 00:04:45,610
So if I start typing in something like a book.

77
00:04:50,830 --> 00:04:56,530
We're watching Japan, which is a little bit more, and we can build it and say something like books

78
00:04:57,010 --> 00:04:57,970
for.

79
00:04:59,760 --> 00:05:00,870
Eight plus.

80
00:05:02,490 --> 00:05:08,560
And that's a great way just to kind of like make the user's life a little bit easier.

81
00:05:08,700 --> 00:05:15,360
Maybe they're looking for a bookshelf so we can do the same there where we just bring that down and

82
00:05:15,750 --> 00:05:18,410
it'll be like shelf, it'll just finish off the rest.

83
00:05:18,420 --> 00:05:21,330
So it's just kind of auto suggesting, auto completing for them.

84
00:05:23,330 --> 00:05:27,740
So we start thinking about those types of elements that we're going to need, obviously this kind of

85
00:05:27,740 --> 00:05:32,480
stays persistent and we'll start thinking about what happens then.

86
00:05:34,120 --> 00:05:37,810
Musical one point one, but the next step.

87
00:05:38,870 --> 00:05:43,710
Is that they would go straight to search results.

88
00:05:44,210 --> 00:05:46,580
Now, what do search results look like?

89
00:05:48,590 --> 00:05:54,620
Maybe there's like a back, but in maybe we got search at the top, whatever rewrote.

90
00:05:55,950 --> 00:05:59,220
Maybe we got some information about the amount of results.

91
00:06:00,710 --> 00:06:08,060
And or maybe just filter out up here, let's try a little filter icon, not the best, but, you know,

92
00:06:08,060 --> 00:06:10,780
it works and they get the results here.

93
00:06:14,050 --> 00:06:19,100
Now, here we start thinking about what do they see, what can they interact with?

94
00:06:19,510 --> 00:06:24,520
I know that they could be if we split these up, maybe they seem more like cards like before so they

95
00:06:24,520 --> 00:06:32,520
can tap the whole thing and go straight into like a product page that we've been sketching a bunch lately.

96
00:06:34,620 --> 00:06:39,630
But, you know, there's probably a couple of other things that we can pull up here, maybe we have

97
00:06:39,630 --> 00:06:40,320
that heart.

98
00:06:41,740 --> 00:06:43,780
And users can go straight.

99
00:06:45,110 --> 00:06:45,920
To.

100
00:06:46,930 --> 00:06:50,170
Our saved beach, whatever that may look like.

101
00:06:52,820 --> 00:06:57,740
I started off with understanding that I'm going to be creating an interaction for this info, searching

102
00:06:57,740 --> 00:07:02,580
for some sort of product, and I asked myself the question, well, what comes next?

103
00:07:02,960 --> 00:07:06,310
And now I'm asking the question of, well, what alternate scenarios are there?

104
00:07:07,430 --> 00:07:09,850
So there's a couple of different scenarios here.

105
00:07:09,890 --> 00:07:14,420
Users can from here, we have different float's users can go see a product.

106
00:07:14,660 --> 00:07:17,450
You just can save their products to a saved page.

107
00:07:18,880 --> 00:07:24,220
You just also can enter a new search, it can go all the way back.

108
00:07:25,790 --> 00:07:27,590
And users could even filter.

109
00:07:28,640 --> 00:07:31,610
You just could also kind of like just abandon the search if they want to.

110
00:07:31,660 --> 00:07:35,430
Maybe we have a persistent, like, navigation at the bottom.

111
00:07:37,220 --> 00:07:41,000
So there's so many different scenarios like what happens with filters.

112
00:07:42,530 --> 00:07:47,600
Maybe it's like another overlay, it comes down from the top, nice little animation and, you know,

113
00:07:47,630 --> 00:07:51,320
I'm starting to think about these animations a little bit more, these micro interactions, because

114
00:07:52,010 --> 00:07:55,010
if I leave them all the way to the end of the project, you know, they're not going to look good.

115
00:07:55,010 --> 00:07:56,000
They're going to look immature.

116
00:07:56,000 --> 00:07:59,750
And you should really incorporate motion early on.

117
00:08:00,110 --> 00:08:06,410
They really help a lot with different types of things like feedback and understanding the state of a

118
00:08:06,410 --> 00:08:06,920
screen.

119
00:08:07,190 --> 00:08:09,710
And we're going to do a whole lesson on motion later.

120
00:08:09,710 --> 00:08:12,790
But it's great to just start thinking about it right now.

121
00:08:13,640 --> 00:08:17,210
So this is like our filters we're going to call a fill.

122
00:08:17,450 --> 00:08:20,720
And now I could start thinking about the content here.

123
00:08:21,200 --> 00:08:24,440
I mean, now we're branching out, and that's totally fine.

124
00:08:24,650 --> 00:08:25,850
Sometimes I don't branch out.

125
00:08:25,850 --> 00:08:29,660
Sometimes I just kind of stop here and I start refining this kind of flow.

126
00:08:31,330 --> 00:08:35,110
But it's pretty cool to start thinking about all the different types of things that you're going to

127
00:08:35,110 --> 00:08:39,260
need to account for, like the different types of elements, different types of content.

128
00:08:39,280 --> 00:08:43,660
So if I think about filtering for a product like this, there's a title maybe the people will want to

129
00:08:43,660 --> 00:08:45,910
filter for something like price.

130
00:08:46,390 --> 00:08:47,650
So that may be an option.

131
00:08:50,900 --> 00:08:58,040
And maybe it's by customer review or maybe it's by like newest items.

132
00:08:59,280 --> 00:09:05,400
Maybe there's another section where it's by review, solely by review, so we can start thinking about

133
00:09:05,400 --> 00:09:07,530
what we're going to need to actually implement.

134
00:09:09,240 --> 00:09:14,730
Moving forward, it's going to really help us in the future, and this is why we actually just kind

135
00:09:14,730 --> 00:09:16,560
of sketching, you know, just do it quickly.

136
00:09:17,540 --> 00:09:23,390
So take some time to really go through that, like I said, don't get bogged down by the details like

137
00:09:23,810 --> 00:09:28,040
you could tell that we just went through it really quickly and we learn a lot about what possibly could

138
00:09:28,040 --> 00:09:29,210
be in our application.

139
00:09:29,570 --> 00:09:33,350
We created a bunch of screens and we have a really good jumping off point.

140
00:09:33,650 --> 00:09:40,760
But now we can take these use them for like user flows, use them for site maps and even start building

141
00:09:40,760 --> 00:09:42,620
wire frames like ASAP.

142
00:09:42,890 --> 00:09:48,530
The whole point of sketching is to just be lean, be agile and don't get bogged down by the details.

143
00:09:49,280 --> 00:09:55,820
Ignore things like dribble or where you see, like, really high definition like sketches.

144
00:09:56,300 --> 00:09:57,650
Just go for it, jump right in.

145
00:09:58,190 --> 00:10:00,680
And that's it for sketching screen states.