1
00:00:00,820 --> 00:00:01,870
Hey and welcome back.

2
00:00:02,050 --> 00:00:06,190
We're going to jump right into states now, they're a bunch of different states that we need to think

3
00:00:06,190 --> 00:00:11,110
about when designing and puts different states, tell the user what is currently happening and what

4
00:00:11,110 --> 00:00:12,070
should happen next.

5
00:00:12,970 --> 00:00:19,870
These states can be differentiated with like text color borders, and these visual cues are integral

6
00:00:19,870 --> 00:00:20,680
to a good input.

7
00:00:21,070 --> 00:00:24,250
So let's jump into the different types of states we encounter.

8
00:00:24,640 --> 00:00:27,210
So the first one we have right here is your default state.

9
00:00:27,520 --> 00:00:31,000
And this just shows an empty field that hasn't been interacted with.

10
00:00:31,240 --> 00:00:33,460
So, I mean, there's just an empty field.

11
00:00:33,550 --> 00:00:34,630
There's your label.

12
00:00:34,690 --> 00:00:36,580
There's nothing I mean, it's just standard.

13
00:00:36,580 --> 00:00:37,410
It's default.

14
00:00:37,420 --> 00:00:40,480
And user hasn't even clicked into it or entered anything.

15
00:00:41,500 --> 00:00:49,390
Next is your active field, so the user is active there in focus right here, and what happens is,

16
00:00:49,390 --> 00:00:51,130
is the user has clicked into this.

17
00:00:52,090 --> 00:00:58,630
It has a highlighted border or your outline, you can call it, and accurate over here on the left to

18
00:00:58,630 --> 00:01:00,520
show the user that they should be typing something.

19
00:01:00,520 --> 00:01:03,420
So, mind you, this is always flashing.

20
00:01:04,030 --> 00:01:07,690
So just to let the user know that an action needs to happen.

21
00:01:08,900 --> 00:01:17,840
Next is filled, so this is a filled input, so once a user has filled an input and entered all the

22
00:01:17,840 --> 00:01:22,930
information and clicked away from the field, it looks similar to your input.

23
00:01:22,940 --> 00:01:27,440
But the only difference is that there's text in there and it's been completed so users know that they

24
00:01:27,440 --> 00:01:28,040
can move on.

25
00:01:28,980 --> 00:01:30,390
So really straightforward.

26
00:01:31,900 --> 00:01:37,300
Next is disabled, so sometimes you run into a case where an input should be disabled due to a requirement

27
00:01:37,300 --> 00:01:43,840
restriction, disabled inputs are generally shown as filled in great out or to indicate that you can't

28
00:01:43,840 --> 00:01:44,740
interact with it.

29
00:01:45,130 --> 00:01:51,340
Sometimes they could have some information in there that can't be edited but is great until some action

30
00:01:51,340 --> 00:01:52,060
is taken.

31
00:01:52,480 --> 00:01:57,700
And just keep that in mind that when we are designing forms and stuff like that, we should be designing

32
00:01:57,700 --> 00:02:01,180
for disabled inputs as well because that scenario could happen.

33
00:02:02,730 --> 00:02:04,730
Success states.

34
00:02:04,800 --> 00:02:10,430
OK, so an answer is correct, you have the option to show a success message so similar to the air input,

35
00:02:10,440 --> 00:02:13,680
we communicate that with color we have green.

36
00:02:14,670 --> 00:02:15,990
We have icons.

37
00:02:17,400 --> 00:02:19,110
And appropriate text.

38
00:02:20,550 --> 00:02:27,360
So you don't necessarily need to show a correct or success messages all the time, it may make sense

39
00:02:27,360 --> 00:02:35,700
in certain scenarios if your form is designed really well, users will often have multiple success states

40
00:02:35,700 --> 00:02:38,290
like this, and that may get way too redundant.

41
00:02:38,310 --> 00:02:39,810
It may make sense in some scenarios.

42
00:02:39,810 --> 00:02:41,220
So keep that in mind.

43
00:02:42,230 --> 00:02:43,680
Now, this one is really important.

44
00:02:44,000 --> 00:02:51,380
We have an error when a user has entered something incorrect or maybe the user may have missed an input,

45
00:02:51,620 --> 00:02:53,120
they should be showing him an error message.

46
00:02:53,450 --> 00:02:56,800
Now, the message generally should have the appropriate color red.

47
00:02:57,680 --> 00:02:59,720
We have icons and text.

48
00:03:00,410 --> 00:03:08,120
This error should always and I stress this, this should always be in line the form or in line to the

49
00:03:08,120 --> 00:03:14,090
input and not necessarily outside of the form underneath the actual corresponding input is totally fine.

50
00:03:14,090 --> 00:03:17,350
And that's where I think you should be putting all your error messages.

51
00:03:17,480 --> 00:03:22,850
The worst thing is when you have a like a four or five filled form and then you have the error message

52
00:03:22,850 --> 00:03:25,070
all the way at the top of the former at the bottom of the form.

53
00:03:25,070 --> 00:03:28,060
And you're like, well, well, what did I enter wrong or what went wrong?

54
00:03:28,640 --> 00:03:30,050
That is a pretty bad experience.

55
00:03:30,060 --> 00:03:36,740
So keep it confined to where the actual error is just so users can quickly remedy that.

56
00:03:38,150 --> 00:03:44,420
Now, we kind of touched upon this in our lesson on typography in terms of like the appropriate text

57
00:03:44,420 --> 00:03:44,870
as well.

58
00:03:46,760 --> 00:03:49,730
So let's talk about assistance.

59
00:03:50,960 --> 00:03:57,050
Now, there will be times when a user comes to an input and needs a bit of assistance, you know, a

60
00:03:57,050 --> 00:04:03,140
tip or a hint, this will help the user fill out your input much quicker if you do it right.

61
00:04:03,770 --> 00:04:06,860
Here are certain ways we can provide assistance to our users.

62
00:04:07,010 --> 00:04:10,400
So one way is to text.

63
00:04:10,850 --> 00:04:12,560
Now, we touched upon this a little bit.

64
00:04:12,950 --> 00:04:16,280
So I have a text right here, right beside my label, right.

65
00:04:16,280 --> 00:04:18,860
Aligned, not necessarily as a placeholder.

66
00:04:19,010 --> 00:04:22,250
I don't do placeholders often, but.

67
00:04:23,180 --> 00:04:29,720
Using hands above or below your input field gives users helpful information about the question you're

68
00:04:29,720 --> 00:04:31,820
asking them, so if you need to use it.

69
00:04:33,080 --> 00:04:39,350
That is incorrect, actually, if you need to use it, use it like that on top or below, just to give

70
00:04:39,350 --> 00:04:42,380
users some helpful hints if they need it.

71
00:04:42,710 --> 00:04:44,270
This could be like a sieve.

72
00:04:44,620 --> 00:04:50,060
No, I mean, maybe not that, but you could use it for birth dates in terms of the format.

73
00:04:50,600 --> 00:04:55,160
I always know when I'm entering a date format that I don't know if I should put the date first of the

74
00:04:55,160 --> 00:04:56,780
month first or the year first.

75
00:04:56,780 --> 00:04:59,060
And, you know, I've been asked in all separate ways.

76
00:04:59,060 --> 00:05:01,460
It's just good to have some sort of outline on how to do that.

77
00:05:02,760 --> 00:05:09,540
The next is auto format, so we have an auto format, credit card number over here, and essentially

78
00:05:09,540 --> 00:05:13,140
we have the power to automatically format a user's answer depending on the scenario.

79
00:05:13,170 --> 00:05:17,110
So this avoids any format errors and helps users read and review their answers.

80
00:05:17,130 --> 00:05:20,080
So think like things like credit card numbers, phone numbers, etc..

81
00:05:20,640 --> 00:05:24,660
So right now I have a credit card number here and it's just much more easier for me to break it up into

82
00:05:24,660 --> 00:05:27,600
chunks rather than to read it like this.

83
00:05:32,160 --> 00:05:36,750
So this is not as easy to read, I know it says one, two, three, four, one, two, three, four,

84
00:05:36,750 --> 00:05:37,320
one, two, three, four.

85
00:05:37,320 --> 00:05:39,120
One, two, three, four, but.

86
00:05:40,620 --> 00:05:46,950
It's harder to read when it's all combined, so breaking into chunks or auto formatting is just a much

87
00:05:46,950 --> 00:05:48,400
easier experience on the user.

88
00:05:48,870 --> 00:05:52,460
So keep that in mind and have a good conversation with your developers about doing that.

89
00:05:54,510 --> 00:06:00,870
So we've seen this input before now autocomplete, sometimes users need to enter something long or they

90
00:06:00,870 --> 00:06:03,790
may not necessarily know what they're trying to search for.

91
00:06:03,840 --> 00:06:05,620
And we should help them with autocomplete.

92
00:06:06,060 --> 00:06:10,900
This saves the user a bunch of time and also reduces the possibility of errors with formatting and spelling.

93
00:06:11,340 --> 00:06:17,010
So if we have an address like we have down here, it's just much more easier to get them to start typing

94
00:06:17,010 --> 00:06:21,870
in the the first letters or the first numbers of their address and then start auto filling.

95
00:06:22,170 --> 00:06:27,750
It could be even used for like answering a question, a specific question in relation to something.

96
00:06:27,750 --> 00:06:32,910
And the user doesn't necessarily know the answer, or there may be multiple answers or they may be searching

97
00:06:32,910 --> 00:06:33,750
for multiple things.

98
00:06:34,110 --> 00:06:40,410
So autocomplete has a wide variety of use cases and you should use it when the user may be confused

99
00:06:40,410 --> 00:06:41,130
on what to enter.

100
00:06:41,130 --> 00:06:46,890
Or it could cut down on the amount of time a user could enter information like a long address, which

101
00:06:47,310 --> 00:06:51,420
is pretty pedantic when you think about it in terms of answering one.

102
00:06:53,600 --> 00:06:59,900
Now, default values, it's always smart to prefilled textfield with the most likely answer when the

103
00:06:59,900 --> 00:07:01,830
answer is expected by the majority of users.

104
00:07:01,850 --> 00:07:08,750
So if I were to ask you a question about like your country and I knew ninety five percent of my users

105
00:07:08,750 --> 00:07:16,070
are in Canada or the United States or whatever country, I could prefill that data with just Canada

106
00:07:16,100 --> 00:07:20,390
or the United States, and that would be a much easier experience with the majority of our users.

107
00:07:20,390 --> 00:07:24,060
So they don't have to go through the process of actually selecting that or finding that answer.

108
00:07:24,650 --> 00:07:29,000
Now, in this case, potato chips and the right answer is always salt and vinegar.

109
00:07:29,420 --> 00:07:34,670
So that's my favorite my favorite flavor for chips.

110
00:07:34,670 --> 00:07:40,330
But you should always think about how you can make the user's life a little bit more easier.

111
00:07:40,610 --> 00:07:42,020
And that's it for input's.