1
00:00:00,450 --> 00:00:01,980
Hello and welcome back.

2
00:00:02,340 --> 00:00:06,800
We're going to jump right in to some scenarios we often face with dealing with forms.

3
00:00:07,280 --> 00:00:09,780
I'm going to teach you the best practices.

4
00:00:10,290 --> 00:00:14,060
We'll go through some demonstrations on what not to do and we'll fix them together.

5
00:00:14,490 --> 00:00:20,820
So before we even can start creating our own inputs and advanced inputs and buttons, we need to talk

6
00:00:20,820 --> 00:00:26,260
about forms, all forms of essentially replaced conversations we have with each other.

7
00:00:26,280 --> 00:00:31,290
So when you design a form, you should always keep in mind that they should feel like a friendly conversation

8
00:00:31,290 --> 00:00:33,810
between your user and the product.

9
00:00:34,260 --> 00:00:39,470
The first scenario we often find ourselves in is the amount of questions we have on a form.

10
00:00:39,690 --> 00:00:41,400
So over here we have a little form.

11
00:00:42,000 --> 00:00:46,920
It's kind of long and kind of demoralising when creating a form.

12
00:00:46,920 --> 00:00:52,170
We need to keep it as short as possible and only ask the questions that are absolutely necessary.

13
00:00:52,320 --> 00:00:56,770
Remember that there are some optional inputs that absolutely need to be there.

14
00:00:57,240 --> 00:01:01,970
We should mark them as such and avoid using an Asterix if some inputs are optional.

15
00:01:01,980 --> 00:01:03,930
Do you really need those inputs at all, though?

16
00:01:04,140 --> 00:01:09,090
Asterix Mudie your design too, and create too much visual noise and sometimes they can be confusing

17
00:01:09,090 --> 00:01:09,600
to others.

18
00:01:09,990 --> 00:01:11,120
Let's take a look over here.

19
00:01:11,160 --> 00:01:13,650
I think we can actually fix this form.

20
00:01:13,770 --> 00:01:19,050
So I'm going to do is I'm just going to copy this frame, Comanche and V and there we go.

21
00:01:19,050 --> 00:01:19,860
We have our frame.

22
00:01:21,450 --> 00:01:28,590
So what I would do in this scenario is just reduce the amount of inputs, so I don't think if we're

23
00:01:28,590 --> 00:01:34,170
creating a login form, you don't necessarily need to have country phone number.

24
00:01:36,460 --> 00:01:40,690
Um, you may not even need the first name or last name.

25
00:01:42,130 --> 00:01:45,100
You could have an input just for fullName.

26
00:01:47,280 --> 00:01:52,320
And there you go, you don't need to ask questions and don't necessarily need to be there, so do your

27
00:01:52,320 --> 00:01:53,460
best to only ask.

28
00:01:53,460 --> 00:01:56,370
These are the absolute minimum.

29
00:01:58,040 --> 00:01:59,470
So let's jump to our next scenario.

30
00:02:01,770 --> 00:02:04,980
Remember what I said about making your forms a bit more conversational?

31
00:02:05,700 --> 00:02:09,090
Well, they should also logically flow like a conversation.

32
00:02:09,600 --> 00:02:12,150
What is the first thing you ask a person when you meet them?

33
00:02:13,040 --> 00:02:18,020
Their name, you wouldn't ask for their address or their credit card information first, I don't know

34
00:02:18,020 --> 00:02:22,580
if you would ask for their credit card information, but we should start with their name and then move

35
00:02:22,580 --> 00:02:25,160
on over to some more sensitive questions.

36
00:02:25,940 --> 00:02:27,110
So let's fix this input.

37
00:02:27,650 --> 00:02:29,990
So we're just going to duplicate it.

38
00:02:35,840 --> 00:02:37,160
We can just rearrange it.

39
00:02:39,750 --> 00:02:42,060
So like a conversation.

40
00:02:44,440 --> 00:02:52,000
You should be asking what seems logical first, it would be kind of weird to be asked your address or

41
00:02:52,000 --> 00:02:58,150
credit card number before your first name or your full name in your email or any other information like

42
00:02:58,150 --> 00:02:58,450
that.

43
00:02:59,660 --> 00:03:01,060
So that's what I would do.

44
00:03:02,370 --> 00:03:05,610
OK, so the next scenario we often find ourselves in.

45
00:03:07,080 --> 00:03:14,010
Is with long forms, so sometimes you may be tasked with building a very long form or set of long forms,

46
00:03:14,580 --> 00:03:16,770
then that happens and that's totally normal.

47
00:03:16,770 --> 00:03:23,480
It happens there's a lot of different use cases like accounting software or just certain long registrations.

48
00:03:23,490 --> 00:03:24,420
It really depends.

49
00:03:24,780 --> 00:03:31,530
But it's a big no no to have all these inputs grouped together because we run the risk of confusing

50
00:03:31,530 --> 00:03:32,020
our user.

51
00:03:32,430 --> 00:03:38,700
So the solution, try to categorize relatable information so you don't necessarily need to break these

52
00:03:38,700 --> 00:03:40,350
into separate flows.

53
00:03:40,950 --> 00:03:43,400
But what you could do and let's just copy this over here.

54
00:03:45,000 --> 00:03:49,020
You can actually just make these into.

55
00:03:51,260 --> 00:03:52,240
Separate categories.

56
00:03:52,280 --> 00:03:57,440
OK, so what I'll do is it looks like I have credit card information.

57
00:03:58,410 --> 00:04:05,160
So this is a group on its own, a full name, address, city, postal code, country, state.

58
00:04:05,640 --> 00:04:06,900
Let's just bring these down.

59
00:04:12,160 --> 00:04:15,040
Well, I'm going to do is I'm going to break this first one into payment method.

60
00:04:17,330 --> 00:04:19,790
And let's just give it a nice border.

61
00:04:23,540 --> 00:04:24,640
That looks really good.

62
00:04:26,540 --> 00:04:28,140
That's just a line that quickly.

63
00:04:29,250 --> 00:04:33,670
So we have payment method, we can pump this up just a bit.

64
00:04:34,020 --> 00:04:35,850
So it seems like a nice title.

65
00:04:37,140 --> 00:04:38,190
To do that.

66
00:04:39,660 --> 00:04:40,020
Oops.

67
00:04:40,200 --> 00:04:41,310
This changes to board.

68
00:04:43,660 --> 00:04:48,010
And we can even just decrease the capacity of this isn't.

69
00:04:52,220 --> 00:04:53,090
In your face.

70
00:04:54,640 --> 00:04:56,110
Let's just do that a little bit more.

71
00:04:56,820 --> 00:05:01,030
OK, so we have one title over here for a grouping.

72
00:05:03,860 --> 00:05:07,230
We'll bring that one down there and we could just call this.

73
00:05:09,600 --> 00:05:10,680
Billing information.

74
00:05:14,960 --> 00:05:18,230
And just like that, we've logically broken out each piece.

75
00:05:19,230 --> 00:05:24,750
Into their own groups, and you can do this if there's multiple groups, but it just helps users digest

76
00:05:24,750 --> 00:05:26,370
your information much more easily.

77
00:05:27,420 --> 00:05:33,240
So if I were to come to a bunch of inputs like this, this is a lie and like I said before, in terms

78
00:05:33,240 --> 00:05:39,090
of like longer forms and only asking the necessary questions, sometimes you have a large amount of

79
00:05:39,090 --> 00:05:39,510
questions.

80
00:05:39,510 --> 00:05:44,130
And this could be demoralizing just to see just a blank slate of a bunch of inputs.

81
00:05:44,460 --> 00:05:51,990
So breaking it in to pieces allows users to easily understand that information and fill out all the

82
00:05:51,990 --> 00:05:53,730
necessary inputs that they need to.

83
00:05:54,480 --> 00:05:56,550
So let's move on to our next demonstration.

84
00:05:58,640 --> 00:06:01,610
What do we have over here, so layout's.

85
00:06:02,580 --> 00:06:04,710
Label applies to forms as well.

86
00:06:05,250 --> 00:06:13,380
I've personally been guilty of this, where we have two columns now, form should always be a range

87
00:06:13,380 --> 00:06:14,970
from top to bottom in a single column.

88
00:06:14,970 --> 00:06:16,520
So it's easy for a user to read.

89
00:06:17,160 --> 00:06:19,690
We typically read from top to bottom and left or right.

90
00:06:19,710 --> 00:06:25,230
And this implementation makes me kind of wonder which direction I should start to fill the inputs to

91
00:06:25,230 --> 00:06:29,200
go left to right or top to bottom and top to bottom.

92
00:06:29,970 --> 00:06:35,770
So it's a little confusing just for users in terms of which way they should be filling out the information.

93
00:06:35,970 --> 00:06:38,490
Like I said, this just copy paste that.

94
00:06:42,720 --> 00:06:47,250
And we're just going to take these two inputs and just bring them right down here and there you go,

95
00:06:47,460 --> 00:06:49,400
that's just much more easier to fill out.

96
00:06:50,720 --> 00:06:52,820
And if users are tabbing through input's.

97
00:06:54,460 --> 00:06:59,020
Like, if this is longer than where they are on the page, it gets confusing because the page could

98
00:06:59,020 --> 00:07:00,770
be jumping around while they're tabi.

99
00:07:01,210 --> 00:07:02,840
This just keeps everything really consistent.

100
00:07:02,860 --> 00:07:06,730
They know that they're going from top to bottom, right down to the input, the button input at the

101
00:07:06,730 --> 00:07:06,990
bottom.

102
00:07:07,420 --> 00:07:09,390
So keep things consistent like that.

103
00:07:09,400 --> 00:07:11,440
That's just much more easier for the user.

104
00:07:12,940 --> 00:07:20,320
OK, buttons, these are your action buttons at the end of a form, and this is kind of up for debate

105
00:07:20,320 --> 00:07:24,640
and I don't really sway either way in terms of placement of your buttons at the end of a form.

106
00:07:25,060 --> 00:07:26,080
I mean, do have a preference.

107
00:07:26,090 --> 00:07:27,160
I'll let you know in a sec.

108
00:07:27,610 --> 00:07:31,450
Some people will argue that buttons should be left alone over here.

109
00:07:31,720 --> 00:07:34,270
That's because we logically read from top to bottom and left.

110
00:07:34,270 --> 00:07:38,650
Right, meaning that button will be right here waiting for you at the end of the form.

111
00:07:38,660 --> 00:07:42,430
So if you're going to top to bottom, left or right, it's right there.

112
00:07:42,430 --> 00:07:44,020
And it makes most logical sense.

113
00:07:44,680 --> 00:07:50,830
But sometimes when you think about how we think about forms and proceeding to a next step, we generally

114
00:07:50,830 --> 00:07:56,120
think about moving right as the next step and left us going back.

115
00:07:56,560 --> 00:07:59,470
So this is where the debate kind of stems from.

116
00:07:59,860 --> 00:08:05,500
So if this were a step within like a progress form, which has multiple steps, like three steps or

117
00:08:05,500 --> 00:08:10,570
something like that, then sometimes I feel like if you were to click next, you would look for it on

118
00:08:10,570 --> 00:08:12,460
the right rather than on the left.

119
00:08:12,790 --> 00:08:13,970
Totally up to you.

120
00:08:13,990 --> 00:08:17,190
I personally sway in the direction of having them left alone.

121
00:08:17,380 --> 00:08:22,810
I do like them there just because I believe that it does logically help the user going from top to bottom,

122
00:08:22,990 --> 00:08:23,650
left or right.

123
00:08:23,950 --> 00:08:29,710
But it comes down to you testing with your users to so do that, make sure that whatever you have works

124
00:08:29,710 --> 00:08:31,860
well and proceed in that direction.

125
00:08:32,350 --> 00:08:34,020
Let's talk about the scenario we have here.

126
00:08:34,660 --> 00:08:39,400
Another scenario we find ourselves in is that you may have two buttons like a simit and cancel.

127
00:08:39,940 --> 00:08:45,760
And we have to make sure that both buttons are easily distinguishable to avoid the possibility that

128
00:08:45,760 --> 00:08:46,930
a user clicks on the wrong button.

129
00:08:47,410 --> 00:08:52,750
You can easily do that with a secondary button, and you should do your best to add micro copy whenever

130
00:08:52,750 --> 00:08:54,910
possible and be descriptive with your button names.

131
00:08:55,130 --> 00:08:56,170
So let's finish this.

132
00:08:57,460 --> 00:09:00,340
Let's fix this up, so we're going to do is.

133
00:09:01,590 --> 00:09:02,520
Go over here.

134
00:09:03,630 --> 00:09:09,120
One thing I noticed, I'm going left to right, so one thing I did notice is that this is on the wrong

135
00:09:09,120 --> 00:09:09,480
side.

136
00:09:10,140 --> 00:09:15,330
So we're just going to bring that simit over and the council to the right first.

137
00:09:15,330 --> 00:09:16,830
I'm going to fix the button here.

138
00:09:16,830 --> 00:09:22,680
So this council is just way too late to the cement and I run the risk of having my user click one or

139
00:09:22,680 --> 00:09:23,090
the other.

140
00:09:23,430 --> 00:09:25,410
And that is a no no.

141
00:09:25,740 --> 00:09:28,910
So let's just fix this up.

142
00:09:30,110 --> 00:09:36,430
We can do is just have a second, everybody, so that is just easily distinguishable now and over here

143
00:09:36,970 --> 00:09:44,050
we talked about having a better name for our copy or just a better copy for our buttons, just making

144
00:09:44,050 --> 00:09:45,700
it more actionable and descriptive.

145
00:09:46,150 --> 00:09:48,190
So this could be something like.

146
00:09:53,200 --> 00:09:53,780
Perfect.

147
00:09:53,800 --> 00:09:56,350
So this is much better than what we had before.

148
00:09:56,530 --> 00:09:57,140
Let's take a look.

149
00:09:58,360 --> 00:09:59,540
So here they are side by side.

150
00:10:00,040 --> 00:10:04,570
We have a castle and segment on the wrong side, and they were too similar.

151
00:10:04,780 --> 00:10:11,110
Now we can easily understand which one we should be looking and which one we could click if we needed

152
00:10:11,110 --> 00:10:11,380
to.

153
00:10:12,310 --> 00:10:16,750
So I'd emphasize the castle made the create account, stood out.

154
00:10:17,890 --> 00:10:20,350
Let's jump to our next scenario.

155
00:10:21,070 --> 00:10:22,450
So what do we have here?

156
00:10:24,210 --> 00:10:25,740
So everything looks pretty good, right?

157
00:10:26,610 --> 00:10:30,480
Remember how we covered long inputs and broke them out into different categories?

158
00:10:30,900 --> 00:10:35,510
Well, sometimes forms are just too long that you need to split them into different pages entirely,

159
00:10:35,520 --> 00:10:36,810
which is logical.

160
00:10:37,110 --> 00:10:41,610
You don't want a user to infinitely scroll on one page to fill out a super long form.

161
00:10:42,000 --> 00:10:45,150
And on mobile, we need to think about how we treat long forms.

162
00:10:45,510 --> 00:10:49,920
We will probably treat them much more differently than we do on desktop.

163
00:10:50,370 --> 00:10:54,660
So when you do this, you need to let the user know where they are within the flow and what they need

164
00:10:54,660 --> 00:10:57,210
to do and how much longer they are to the end.

165
00:10:57,450 --> 00:11:02,760
This can be done in a variety of ways, like there's progress, there's percentages and step counters.

166
00:11:03,150 --> 00:11:05,010
We have this little form over here.

167
00:11:06,220 --> 00:11:06,800
Right here.

168
00:11:06,850 --> 00:11:08,890
And what we're going to do is we're going to fix this.

169
00:11:09,700 --> 00:11:18,370
Let's take this out and let's just let's assume that this form is like step two of three within our

170
00:11:18,370 --> 00:11:18,780
process.

171
00:11:18,790 --> 00:11:21,580
I'm actually going to go back up and steal.

172
00:11:30,990 --> 00:11:31,680
Sounds good.

173
00:11:31,710 --> 00:11:34,680
So this password, I mean, you can just do.

174
00:11:37,570 --> 00:11:43,420
We can remember that said doesn't really make sense and we can just say personal.

175
00:11:44,690 --> 00:11:45,680
Information.

176
00:11:47,700 --> 00:11:49,580
Let's just bring that down.

177
00:11:55,610 --> 00:11:58,220
Actually, let's create a progress bar first.

178
00:11:59,640 --> 00:12:01,650
So, like I said, there's a couple of ways you can do this.

179
00:12:02,010 --> 00:12:08,460
I mean, I'm just showing you quickly and you could probably do a much better job than I'm doing right

180
00:12:08,460 --> 00:12:08,750
now.

181
00:12:11,830 --> 00:12:12,580
Here we go.

182
00:12:13,660 --> 00:12:17,570
So there is progress bar that isn't very good.

183
00:12:17,770 --> 00:12:20,530
OK, say this is step one.

184
00:12:21,260 --> 00:12:22,540
Let's find a nice screen.

185
00:12:25,980 --> 00:12:28,620
So that's about thirty three percent of the way.

186
00:12:30,040 --> 00:12:35,020
And what you can do is you can make a little progress indicator.

187
00:12:36,710 --> 00:12:38,720
Let's just bring down that size.

188
00:12:45,820 --> 00:12:50,590
So you could do something like that where it just lets the user know that, hey, you are thirty three

189
00:12:50,590 --> 00:12:54,370
percent of the way through so you can have that anywhere on your page.

190
00:12:56,050 --> 00:13:01,210
You could also do like a combination of, like showing what steps they're in or which step they're in

191
00:13:01,210 --> 00:13:04,180
within the flow so that I could look something like.

192
00:13:05,290 --> 00:13:06,730
Let me just bring this out.

193
00:13:09,220 --> 00:13:12,010
Oops, that's a little too late.

194
00:13:13,100 --> 00:13:15,740
And I think I down 10 percent that that's good.

195
00:13:16,160 --> 00:13:19,070
OK, so this is like kind of like a stepper.

196
00:13:21,520 --> 00:13:24,760
And it could show something like.

197
00:13:27,280 --> 00:13:30,420
This one could just say personal info.

198
00:13:31,280 --> 00:13:37,070
And this kind of allows the users to just get a sneak peek at the type of information that they will

199
00:13:37,070 --> 00:13:38,600
be asked in the future.

200
00:13:39,050 --> 00:13:40,420
So there's personal information.

201
00:13:40,430 --> 00:13:42,470
This could be like payment.

202
00:13:44,240 --> 00:13:47,170
And this could be like shipping.

203
00:13:48,650 --> 00:13:53,450
So this is another option, like I said, it's totally up to you and what you think is the best, like

204
00:13:53,450 --> 00:13:56,600
what you've tested with what performs the best.

205
00:13:57,540 --> 00:14:03,780
Another way to do this is to just kind of have a little stepper and this is usually like pretty much

206
00:14:03,780 --> 00:14:04,570
all you need.

207
00:14:05,430 --> 00:14:10,170
Most of the time I find you can do something like step one.

208
00:14:11,300 --> 00:14:12,200
Of three.

209
00:14:14,100 --> 00:14:15,130
So you could do something like that.

210
00:14:15,190 --> 00:14:20,070
It just helps the user understand that, you know, if they're coming into this form, they have a good

211
00:14:20,250 --> 00:14:23,180
understanding of how long the form process is going to be.

212
00:14:23,370 --> 00:14:27,640
They don't want to be stuck in an infinite scroll and not know where to go.

213
00:14:27,660 --> 00:14:33,450
It also allows you, if it's a really long form, you could implement some sort of save feature where

214
00:14:33,450 --> 00:14:37,470
they could save at a certain step and they could easily remember.

215
00:14:37,920 --> 00:14:42,930
So remember, if your form gets too long or if you're dealing with mobile, you need to break things

216
00:14:42,930 --> 00:14:46,480
out just so it's just in bite sized pieces for your user.

217
00:14:47,370 --> 00:14:52,710
So these are the best practices for forms and we'll jump into best practices for input's.