1
00:00:00,530 --> 00:00:01,520
Hey and welcome back.

2
00:00:01,550 --> 00:00:05,840
We're going to be talking about some best practices for input's, one thing that you should know is

3
00:00:05,840 --> 00:00:11,810
that the height of your input should always be the same height as your primary button to maintain that

4
00:00:11,810 --> 00:00:12,980
visual consistency.

5
00:00:13,340 --> 00:00:15,680
Remember when we learned about spacing and grids?

6
00:00:16,160 --> 00:00:21,890
Well, we defined a base unit of eight pixels and using that we can create input field heights of thirty

7
00:00:21,890 --> 00:00:25,040
two pixels or forty pixels or even forty pixels and so on.

8
00:00:25,940 --> 00:00:31,430
So right now, if we look at our pixel height, we have 40 pixel height and on our button we have a

9
00:00:31,430 --> 00:00:31,820
30.

10
00:00:32,360 --> 00:00:37,190
We need to adjust this just because right now it does not look consistent.

11
00:00:39,000 --> 00:00:42,580
Which is just that's a 40 and all of a sudden that looks much better.

12
00:00:42,750 --> 00:00:44,850
Let's just reverse it to see what it looked like before.

13
00:00:49,140 --> 00:00:50,160
Much more consistent.

14
00:00:51,440 --> 00:00:57,350
And we can just make sure that space you can leave extra space if you want at the end, but that looks

15
00:00:57,350 --> 00:00:58,940
much more better than it did before.

16
00:01:03,420 --> 00:01:09,720
Your input, Fieldings, all inputs in a form should be the same length, but, you know, that's just

17
00:01:09,720 --> 00:01:15,270
basically a guideline that varies depending on the type of answer you may ask the user to answer.

18
00:01:15,570 --> 00:01:19,170
A good example is when we ask users for their credit card information.

19
00:01:19,630 --> 00:01:21,060
Let's take a look at the KVI number.

20
00:01:21,390 --> 00:01:25,380
Now, this input field shouldn't be too long because it's generally only three digits.

21
00:01:25,620 --> 00:01:30,420
Sometimes having longer puts for short answers can confuse the user into thinking they may have entered

22
00:01:30,420 --> 00:01:31,410
a too short answer.

23
00:01:31,530 --> 00:01:32,840
There's an easy way to fix this.

24
00:01:33,530 --> 00:01:37,140
What we can do is we can just shrink this.

25
00:01:43,620 --> 00:01:51,090
And what I'm doing here is I'm holding shift a shift in control, and I'm just going to nudge that over.

26
00:01:51,960 --> 00:02:00,060
And if you don't know what nudges up here in the bar, if I go to preferences and I go to nudge amount's.

27
00:02:01,760 --> 00:02:09,200
I have a big nudge of 10, I would probably set that to my base unit or some variation of it, so I'm

28
00:02:09,200 --> 00:02:13,490
going to set it to four and you'll notice that if I hold shift control.

29
00:02:14,590 --> 00:02:25,990
I can decrease the width of this frame based off of my Nojima, so I have four, eight, 12, 16.

30
00:02:30,160 --> 00:02:33,540
And now everything looks like it's based properly.

31
00:02:35,940 --> 00:02:40,230
And that looks much better, so if we go back and we look at what it looked like before.

32
00:02:49,580 --> 00:02:51,040
This looks much better.

33
00:02:52,090 --> 00:02:57,490
So remember, based off of the context of the type of answer you're looking for, you can adjust the

34
00:02:57,490 --> 00:02:59,830
input size, especially for something like this.

35
00:03:02,640 --> 00:03:08,190
Next, these labels, so your labels should be short and clear and, you know, easy to read.

36
00:03:08,580 --> 00:03:13,260
It's best to keep your labels short and sweet and to the point, one to two words is generally enough

37
00:03:13,260 --> 00:03:15,030
to describe what is being asked.

38
00:03:15,390 --> 00:03:19,260
So the label should contrast the input file also.

39
00:03:19,260 --> 00:03:22,140
So generally people bold and shrink them a bit.

40
00:03:22,170 --> 00:03:24,470
They also lower the opacity sometimes.

41
00:03:24,480 --> 00:03:27,450
I mean, that's a visual thing that you can do afterwards.

42
00:03:27,960 --> 00:03:32,380
Another tip is to make sure only the first letter is capitalized for easy scanning and readability.

43
00:03:32,400 --> 00:03:34,410
So right now we have a very long input.

44
00:03:36,430 --> 00:03:43,060
And all we want to do is type their first name, so the easiest way to do that is just to ask for a

45
00:03:43,060 --> 00:03:44,460
first name and that's it.

46
00:03:45,700 --> 00:03:52,000
I wouldn't capitalize the second word, I like to just capitalize the first one and let the rest drop

47
00:03:52,000 --> 00:03:54,910
to lower case, that also depends on the type of input.

48
00:03:54,920 --> 00:03:59,250
I mean, you could be asking for some information that needs to be capitalized like CVB.

49
00:03:59,440 --> 00:04:00,690
That is another example.

50
00:04:00,700 --> 00:04:02,140
It's just based off of context.

51
00:04:02,140 --> 00:04:03,610
But generally, this is what I do.

52
00:04:03,820 --> 00:04:05,350
This is like kind of like a semi bold.

53
00:04:05,470 --> 00:04:09,130
You can build it just a bit to contrast whatever is in the input.

54
00:04:10,010 --> 00:04:12,790
Let's see if we can change this input right here.

55
00:04:14,830 --> 00:04:18,010
These are my components, the label No.

56
00:04:24,060 --> 00:04:28,410
Defaults or you can do active if we go into our.

57
00:04:30,180 --> 00:04:32,510
OK, well, we'll get to that in a second.

58
00:04:34,320 --> 00:04:40,290
But generally, yeah, make sure that your label differentiates from.

59
00:04:43,050 --> 00:04:46,020
From your input, so I'm going to just write some text in here.

60
00:04:48,310 --> 00:04:49,630
So there's my first name.

61
00:04:50,770 --> 00:04:58,660
And what I would do is I would probably have it at whatever font size that I think is best, maybe 16

62
00:04:59,170 --> 00:05:02,590
and that would be something like a regular at one hundred percent.

63
00:05:03,790 --> 00:05:06,070
And that is definitely enough.

64
00:05:07,750 --> 00:05:14,470
In terms of showing some sort of hierarchy within the input and to differentiate between the actual

65
00:05:14,470 --> 00:05:20,440
label and the input text, so make sure that you are doing all of that and make sure that you aren't

66
00:05:20,440 --> 00:05:23,500
having too long of sentences or something like that.

67
00:05:23,500 --> 00:05:27,030
When you're asking for a question in terms of a label, keep it short and sweet.

68
00:05:28,160 --> 00:05:30,230
OK, so here's another one.

69
00:05:33,070 --> 00:05:34,750
Now placeholders.

70
00:05:35,310 --> 00:05:40,720
Now, this is another thing that people debate a lot over to placeholder and not to placeholder, I'm

71
00:05:40,720 --> 00:05:43,150
sorry, I just kind of butchered Shakespeare there for a bit.

72
00:05:43,150 --> 00:05:51,160
But anyways, placeholders at their best, they show repetitive information and at its worst, it hides

73
00:05:51,160 --> 00:05:53,740
important information and reduces accessibility.

74
00:05:53,980 --> 00:05:58,390
So when a user clicks on a placeholder and starts to type in an answer that automatically replaces the

75
00:05:58,390 --> 00:06:00,500
placeholder with whatever the user has, input it.

76
00:06:00,850 --> 00:06:05,590
And this can be a problem that the placeholder is being used as a label or a hint.

77
00:06:06,130 --> 00:06:09,700
At that point, the user can no longer see that text and can't review their answer.

78
00:06:10,210 --> 00:06:15,670
As for accessibility, there are a little harder to see due to lighter color and are often undetected

79
00:06:15,670 --> 00:06:16,630
by page readers.

80
00:06:17,140 --> 00:06:17,960
Let's take a look here.

81
00:06:17,980 --> 00:06:21,820
So right now we have spouses birthday as a placeholder and.

82
00:06:23,070 --> 00:06:25,230
Yeah, that is not good.

83
00:06:25,260 --> 00:06:27,810
So what we can do here?

84
00:06:29,430 --> 00:06:34,140
Is just remove this text and hide it.

85
00:06:37,310 --> 00:06:42,470
And we're just going to duplicate that and what we can do is just type in.

86
00:06:44,450 --> 00:06:54,910
Expose his birthday, and I don't really think you need a hint for that, you can do something like

87
00:06:54,910 --> 00:06:55,330
this.

88
00:06:56,900 --> 00:06:58,580
So spouses.

89
00:07:01,090 --> 00:07:05,830
So if we were to use this, for example, I would remove this placeholder text because, like I said,

90
00:07:05,830 --> 00:07:07,630
placeholders aren't necessarily.

91
00:07:10,910 --> 00:07:17,780
I mean, they are useful when you use the information there, but when it's hidden, it's gone and what

92
00:07:17,780 --> 00:07:24,080
you can do is just text on the right side or below, whatever suits your designed best and whatever

93
00:07:24,380 --> 00:07:25,430
works with users best.

94
00:07:25,670 --> 00:07:32,060
But what I've done here is I have the optional content right here instead of within the placeholder.

95
00:07:34,920 --> 00:07:35,670
Do this.

96
00:07:37,380 --> 00:07:41,330
Rather than have a placeholder, because it's a better solution in the end.

97
00:07:42,840 --> 00:07:46,470
And that's it for some best practices for input's.