1
00:00:00,820 --> 00:00:08,890
Hello and welcome to our lesson on forms and UI elements, now you may be thinking to yourself, what

2
00:00:08,890 --> 00:00:10,390
are UI elements?

3
00:00:10,870 --> 00:00:12,400
And that's a very good question.

4
00:00:13,430 --> 00:00:18,380
You elements are basically just elements within your user interface, like take a look over here at

5
00:00:18,380 --> 00:00:18,830
this picture.

6
00:00:19,190 --> 00:00:24,890
We have cards, we have some icons, we have a navigation.

7
00:00:24,890 --> 00:00:26,940
We have a badge on an icon right there.

8
00:00:26,960 --> 00:00:29,720
We also have like a little picture over here.

9
00:00:30,050 --> 00:00:32,720
And these are all considered UI elements.

10
00:00:33,440 --> 00:00:41,090
But forms are probably the most common UI elements that we actually experience and probably, if not

11
00:00:41,090 --> 00:00:42,740
the most important.

12
00:00:43,130 --> 00:00:44,030
So let's take a step back.

13
00:00:44,030 --> 00:00:45,900
Forms are everywhere.

14
00:00:45,920 --> 00:00:46,430
Think about it.

15
00:00:46,730 --> 00:00:53,180
We might think that a form is just a standard set of inputs on a page, but when we're designing a user

16
00:00:53,180 --> 00:00:55,700
experience, they're featured in a lot of different places.

17
00:00:56,420 --> 00:00:57,410
Take this, for example.

18
00:00:57,830 --> 00:00:59,240
This is considered a form.

19
00:00:59,240 --> 00:01:03,150
When you log right into a product, you have some elements here, like a button.

20
00:01:03,170 --> 00:01:05,120
You have a forgot your password, Lincoln.

21
00:01:05,480 --> 00:01:11,450
You have different form inputs like this is your standard password input and this is your standard email

22
00:01:11,450 --> 00:01:11,780
input.

23
00:01:12,020 --> 00:01:16,520
And these all come together to create a form, even these social logins over here.

24
00:01:18,030 --> 00:01:24,570
What about when you even send a message this is considered a form, this alongside these buttons are

25
00:01:24,570 --> 00:01:25,950
considered a larger form.

26
00:01:25,950 --> 00:01:28,290
Component forms are everywhere.

27
00:01:29,100 --> 00:01:32,280
Even when you search, this is considered a form.

28
00:01:32,850 --> 00:01:37,440
They're crucial to the success of your design and can impact the business of the product if certain

29
00:01:37,440 --> 00:01:41,640
forms rely on optimization and hitting certain goals.

30
00:01:41,970 --> 00:01:46,670
With forms being such an integral part of building products, it's critical to get them right.

31
00:01:47,100 --> 00:01:48,020
But don't be scared.

32
00:01:48,030 --> 00:01:52,830
We're going to learn how to build some brilliant forms and UI elements that are really delightful,

33
00:01:53,070 --> 00:01:54,630
usable and inclusive.

34
00:01:55,230 --> 00:01:58,530
So you may be thinking, where do we start?

35
00:01:59,490 --> 00:02:00,480
OK, you ready?

36
00:02:01,440 --> 00:02:03,360
Remember how we built our own site map?

37
00:02:03,660 --> 00:02:07,860
What we talked about building some preliminary site maps, user flows and concepts.

38
00:02:07,860 --> 00:02:14,070
US earlier when we did that, we were thinking about the types of content we would have on certain pages.

39
00:02:14,610 --> 00:02:19,680
Before we even begin thinking about designing a form, we need to know what type of content we dealing

40
00:02:19,680 --> 00:02:19,980
with.

41
00:02:20,550 --> 00:02:25,320
So when we looked back at the home page that we built for Habitual, we were talking about the same

42
00:02:25,320 --> 00:02:25,560
map.

43
00:02:25,560 --> 00:02:30,780
And at this portion we knew that users will probably want to search for products over here.

44
00:02:31,050 --> 00:02:34,700
We kind of list as a piece of content that we were definitely going to have on that page.

45
00:02:34,740 --> 00:02:39,780
So with us thinking about search, we drew a bunch of search inputs.

46
00:02:39,780 --> 00:02:42,930
We drew what that search overlay would look like.

47
00:02:42,930 --> 00:02:45,330
And that is all considered a form that comes together.

48
00:02:45,720 --> 00:02:48,090
Now, we definitely know we need a search bar.

49
00:02:48,660 --> 00:02:50,610
Another example is registration.

50
00:02:51,120 --> 00:02:53,050
We touched a bit on that earlier as well.

51
00:02:53,670 --> 00:02:55,050
This is a bit more trickier.

52
00:02:55,140 --> 00:02:59,880
We know the standard types of UI elements that will be used to build the forms a user may see, like

53
00:02:59,880 --> 00:03:02,940
text inputs, buttons, maybe a progress bar.

54
00:03:03,090 --> 00:03:04,500
We saw an example earlier.

55
00:03:05,420 --> 00:03:11,480
But it's not that easy, though, we also need to take into account if the registration wants to capture

56
00:03:11,480 --> 00:03:14,300
other content like user interests or profile images.

57
00:03:15,280 --> 00:03:20,470
So before we even build the form, we need to think about the types of questions we want to ask our

58
00:03:20,470 --> 00:03:20,920
user.

59
00:03:21,900 --> 00:03:28,050
This takes some time to figure out and can be done through some quick prototyping, testing and iteration

60
00:03:28,710 --> 00:03:31,500
so you can find the result that works best for your product.

61
00:03:32,190 --> 00:03:34,340
We'll come back to this scenario later.

62
00:03:35,010 --> 00:03:39,840
But the goal here is to generate some ideas and come back to them.

63
00:03:39,840 --> 00:03:40,950
That always just keeps on.

64
00:03:40,950 --> 00:03:46,680
Coming up in our design process is that we need to keep on generating ideas, learn from those ideas,

65
00:03:46,680 --> 00:03:48,870
refine them and then keep on going.

66
00:03:49,350 --> 00:03:50,580
So same thing with forms.

67
00:03:50,580 --> 00:03:54,600
We need to think about the types of questions we need to ask our users, because it's incredibly important

68
00:03:54,600 --> 00:03:58,410
that we get that right and then we can iterate and refine the details later.

69
00:03:58,770 --> 00:04:01,280
So you want to start building some components for your product, right?

70
00:04:01,860 --> 00:04:07,170
Well, we're going to cover a wide array of examples of different types of forms and accompanying UI

71
00:04:07,170 --> 00:04:13,410
elements will be covering like forms, input's, advanced inputs and buttons.

72
00:04:13,620 --> 00:04:17,910
We're going to jump right into Fatema to take a look at the different types of scenarios we often face

73
00:04:17,910 --> 00:04:18,750
as designers.