1
00:00:00,530 --> 00:00:06,620
So let's talk about best practices for inputs, so I want you to take a guess, which are the most complex

2
00:00:06,620 --> 00:00:07,400
UI elements.

3
00:00:08,350 --> 00:00:13,330
If you've guessed it puts, then you're correct, they may look simple, but in reality, due to their

4
00:00:13,330 --> 00:00:18,250
versatility, different states and frequent use, it can be very hard to figure out.

5
00:00:18,520 --> 00:00:23,320
But when you do get inputs right and they're designed really well, they allow users to input data in

6
00:00:23,320 --> 00:00:25,250
a way that is quick, easy and correct.

7
00:00:25,660 --> 00:00:26,770
So let's jump right in.

8
00:00:27,250 --> 00:00:31,480
So these are the types of inputs that you're probably going to encounter the most in your career.

9
00:00:31,780 --> 00:00:32,290
Here we go.

10
00:00:32,290 --> 00:00:33,960
Some basic inputs.

11
00:00:34,360 --> 00:00:37,570
Now, there are a variety of input types that we use to collect user data.

12
00:00:37,570 --> 00:00:42,490
Depending on what types of questions or requirements your form may have, you'll need to pick the right

13
00:00:42,490 --> 00:00:42,850
one.

14
00:00:43,600 --> 00:00:45,800
So the first one I have here is a TextField.

15
00:00:45,880 --> 00:00:49,180
Now, these text fields are used for short written responses.

16
00:00:49,630 --> 00:00:53,710
Users can add only one line of text through text does get to long.

17
00:00:53,710 --> 00:00:58,450
It will automatically scroll the content left so you can continue to see what you're entering.

18
00:00:58,930 --> 00:01:03,320
So if I were to start entering a name here, it would just push the rest of the content left and you

19
00:01:03,320 --> 00:01:05,010
just be able to continue to see everything.

20
00:01:05,410 --> 00:01:06,550
The next is a text area.

21
00:01:06,820 --> 00:01:10,660
Now, sometimes you may need to incorporate an input for longer responses.

22
00:01:10,720 --> 00:01:12,620
This is where the text area comes into play.

23
00:01:13,270 --> 00:01:15,580
These are taller than a regular text field.

24
00:01:15,580 --> 00:01:17,500
And as you can see, look at the difference.

25
00:01:19,460 --> 00:01:24,860
And allows for users to enter multiple lines of text when the text does reach the bottom of this container.

26
00:01:25,840 --> 00:01:31,000
It will automatically expand downwards some text areas, allow users to adjust the width and height

27
00:01:31,000 --> 00:01:31,610
manually.

28
00:01:32,170 --> 00:01:34,780
It's just going to depend how it's coded by the developers.

29
00:01:36,030 --> 00:01:42,810
Next, we have dropdown menus or Selex, these are used when there are multiple options a user needs

30
00:01:42,810 --> 00:01:43,380
to choose from.

31
00:01:43,860 --> 00:01:50,330
When you click, the input menu will appear just below where the user will see the predefined options.

32
00:01:50,370 --> 00:01:54,570
When a user selects an option, it will appear in the input field that they just clicked.

33
00:01:55,350 --> 00:02:00,510
It's best to use dropdown menus when the user needs to select from more than five options, but not

34
00:02:00,510 --> 00:02:03,600
too many, because then it becomes a little bit of an accessibility issue.

35
00:02:05,730 --> 00:02:11,670
Next, we have checkboxes checkboxes are typically used when there are one or multiple options for the

36
00:02:11,670 --> 00:02:14,940
user to select from users can make multiple selections here.

37
00:02:15,860 --> 00:02:20,480
As you can see, try using these when there are four or less options to choose from.

38
00:02:20,930 --> 00:02:24,560
And next, we have radio buttons.

39
00:02:24,800 --> 00:02:29,420
Now, these look pretty similar to the checkbox, but the interaction is entirely different.

40
00:02:29,990 --> 00:02:31,550
These are used for multiple options.

41
00:02:31,550 --> 00:02:33,150
But and this is big.

42
00:02:33,530 --> 00:02:37,040
Users can only select one option here similar to the checkbox.

43
00:02:37,040 --> 00:02:38,830
Try keeping the options to for less.

44
00:02:38,840 --> 00:02:45,230
So if I were to have option three selected and I go to select option one, it would automatically uncheck

45
00:02:45,500 --> 00:02:49,190
or select three and one would be the only option selected.

46
00:02:49,460 --> 00:02:52,730
If you do want to select multiple options, use the checkbox.

47
00:02:53,940 --> 00:02:57,630
Now, there are some advanced inputs and let's get into that.

48
00:02:58,530 --> 00:03:03,540
So sometimes these inputs are not enough for what we're asking of a user, some questions can get pretty

49
00:03:03,540 --> 00:03:06,030
complex and also some interactions.

50
00:03:06,240 --> 00:03:08,010
So let's look at some examples of that.

51
00:03:08,130 --> 00:03:10,730
Right now, we have a multi select textfield.

52
00:03:10,920 --> 00:03:15,450
So what you can do here is these fields allow users to add multiple inputs.

53
00:03:15,450 --> 00:03:18,800
Generally, when a user enters and input, it will be displayed as a chip.

54
00:03:18,810 --> 00:03:20,820
And this is what a chip looks like.

55
00:03:21,260 --> 00:03:25,710
I mean, you can design it differently, but typically it's just it has the content in the middle and

56
00:03:25,710 --> 00:03:29,090
then it has an exit or a removal icon to the right.

57
00:03:29,640 --> 00:03:33,390
Now it will be displayed as a chip and the user can add another.

58
00:03:33,420 --> 00:03:36,480
Users are also able to remove chips that they previously entered.

59
00:03:36,870 --> 00:03:40,080
So this is typically what a multi select textfield would look like.

60
00:03:40,920 --> 00:03:46,260
And this is a dropdown search, if there are a bunch of options within your drop down menu, you should

61
00:03:46,260 --> 00:03:48,870
consider adding some sort of contextual search.

62
00:03:49,470 --> 00:03:54,570
The way this interaction works is when a user begins typing available options that match the user's

63
00:03:54,570 --> 00:03:58,080
search will filter it saves the user a bunch of time.

64
00:03:58,380 --> 00:04:02,420
So if I were to type in an address or like a country or something like that.

65
00:04:02,670 --> 00:04:08,040
So this input source country but could just say something like address, then it's just so much more

66
00:04:08,040 --> 00:04:10,680
easier than just inputting everything manually.

67
00:04:10,680 --> 00:04:16,350
Or if they need to search for a specific country, then they could just start typing and the list would

68
00:04:16,350 --> 00:04:18,360
come up over here have suggested results.

69
00:04:18,720 --> 00:04:23,340
So it just gives the user a bunch of time and that's it for advanced inputs.

70
00:04:23,340 --> 00:04:28,440
These are typically all the types of inputs that you would see, both basic and events or some sort

71
00:04:28,440 --> 00:04:29,400
of variation.

72
00:04:29,670 --> 00:04:35,850
I mean, there are many more there are deep pictures and pictures are used only we to our user to select

73
00:04:35,850 --> 00:04:37,140
a day or date range.

74
00:04:37,320 --> 00:04:40,340
It really depends on the type of product you're building.

75
00:04:40,500 --> 00:04:46,080
So there are a bunch of inputs out here, but this is what you're typically going to be using most of

76
00:04:46,080 --> 00:04:46,470
the time.