1
00:00:00,210 --> 00:00:01,320
Hey, and welcome back.

2
00:00:01,350 --> 00:00:06,860
We're going to be talking about buttons now, buttons are really important part of any UI.

3
00:00:06,870 --> 00:00:11,100
I mean, they're not only used for forms, but can be used to link users to other parts of the site

4
00:00:11,100 --> 00:00:12,180
or within the same page.

5
00:00:12,660 --> 00:00:14,280
We should treat buttons with a lot of care.

6
00:00:14,280 --> 00:00:18,310
And I'm going to show you a couple things you can do to make your buttons that much better.

7
00:00:19,170 --> 00:00:20,190
So let's jump right in.

8
00:00:20,460 --> 00:00:21,490
So what do we have here?

9
00:00:21,510 --> 00:00:23,790
We have a nice little submit button.

10
00:00:23,940 --> 00:00:29,010
Now, Button should describe the action you want the user to take and I think submit and cancel or,

11
00:00:29,340 --> 00:00:34,580
you know, they're OK in most technical applications, but they usually feel way too dry or generic.

12
00:00:35,100 --> 00:00:40,860
Now consider using words like sign up or send information or create account.

13
00:00:40,860 --> 00:00:42,700
I mean, those are much better options.

14
00:00:44,370 --> 00:00:45,990
I'm just going to change this to create account.

15
00:00:47,590 --> 00:00:55,060
And it's just a much more descriptive or you can say more action based word or more action based copy.

16
00:00:55,990 --> 00:00:59,530
Now, this also helps you emphasize the value of completing a certain action.

17
00:00:59,560 --> 00:01:01,570
We want our users to keep motivated.

18
00:01:02,470 --> 00:01:06,790
And a way we can do that is to remind the user of the benefits with completing this flow.

19
00:01:07,600 --> 00:01:11,650
So try something like sign up and you know, or something like create account.

20
00:01:11,660 --> 00:01:16,240
Just be more descriptive instead of just using something generic like submit.

21
00:01:17,720 --> 00:01:22,270
Now, we do have a sign up down here and like I said, like sign ups, a pretty good option like it.

22
00:01:23,060 --> 00:01:25,280
Now consider writing in the first person.

23
00:01:25,290 --> 00:01:26,150
This is another option.

24
00:01:26,150 --> 00:01:31,690
And it really depends on the tone you're going for with your brand and like your entire UI and your

25
00:01:31,730 --> 00:01:32,280
UX.

26
00:01:32,780 --> 00:01:36,320
Now, the Budden is the final interaction that takes a user elsewhere.

27
00:01:36,920 --> 00:01:38,900
There's times where you can try making it personable.

28
00:01:39,260 --> 00:01:46,490
And it's been proven that buttons that use words like I, me or my have higher conversion rates instead

29
00:01:46,490 --> 00:01:47,200
of sign up.

30
00:01:47,900 --> 00:01:52,160
Why don't we try something like create my accounts?

31
00:01:56,030 --> 00:02:01,820
I think that sounds a little bit better, a little trick I use is that whenever the copy is in the button,

32
00:02:01,820 --> 00:02:05,360
I will proceed that by I like I want to.

33
00:02:05,720 --> 00:02:07,310
So it makes grammatical sense.

34
00:02:07,550 --> 00:02:09,290
I want to create my account.

35
00:02:10,100 --> 00:02:14,120
This is what I would do if it matches the tone of what you're going for.

36
00:02:14,570 --> 00:02:16,880
But I mean isn't necessarily limited to that.

37
00:02:16,930 --> 00:02:23,060
I think being personable and, you know, combining that with what we learned before about having more

38
00:02:23,060 --> 00:02:27,010
descriptive and action based words just makes your buttons so much better.

39
00:02:28,830 --> 00:02:34,950
So you remember this scenario, right, differentiating between buttons, usually you should have a

40
00:02:34,950 --> 00:02:39,990
primary and secondary button, you may need to use two buttons at certain points and it happens quite

41
00:02:39,990 --> 00:02:40,350
a lot.

42
00:02:40,350 --> 00:02:44,130
And you should come up with a primary and secondary that are easily distinguishable.

43
00:02:44,640 --> 00:02:47,980
The rules are buttons that function differently should appear differently.

44
00:02:48,390 --> 00:02:54,090
So remember, to make the primary button that should take the user to the expected path should be much

45
00:02:54,090 --> 00:02:54,740
more prominent.

46
00:02:54,990 --> 00:02:55,470
So.

47
00:02:56,420 --> 00:02:57,350
In this case.

48
00:02:58,590 --> 00:03:05,040
Something like that works like we saw before, but when a user is on mobile, you should make buttons

49
00:03:05,040 --> 00:03:06,010
easily stoppable.

50
00:03:06,750 --> 00:03:12,150
I think 40 pixels to forty eight pixels is a good height for a button, especially on mobile.

51
00:03:13,120 --> 00:03:19,740
And it works really well with using a base unit of apexes, remember, keep them easily distinguishable

52
00:03:20,050 --> 00:03:26,890
and also remember that when you're on mobile, you need to have a bigger topical area just so.

53
00:03:28,130 --> 00:03:30,710
You don't necessarily have something like this.

54
00:03:32,290 --> 00:03:37,660
And when you're on mobile, it's just it's not fun to try and tap something like that, you may actually

55
00:03:37,660 --> 00:03:41,500
tap the council by accident, so try to avoid doing anything like that.

56
00:03:41,500 --> 00:03:44,100
40 to 40 pixels is generally a good rule of thumb.

57
00:03:48,040 --> 00:03:55,210
Now, there are times where, you know, I would use a clear all I mean, I've been guilty of doing

58
00:03:55,210 --> 00:03:56,230
this a couple of times.

59
00:03:56,890 --> 00:04:03,730
So if you have a set of filters that you need to apply, you may want the user to be able to reset everything.

60
00:04:03,730 --> 00:04:08,410
Or if there's a large form, sometimes people I don't know why you would do that, but I've seen it

61
00:04:08,410 --> 00:04:11,740
before in terms of like a resetting or a clear all on a form.

62
00:04:12,520 --> 00:04:17,110
You should probably try and avoid using some sort of like reset button like this.

63
00:04:17,830 --> 00:04:22,210
It uses, rarely uses, and it's kind of vulnerable to being clicked accidentally.

64
00:04:22,780 --> 00:04:27,110
This resulted in frustration, data loss and possible abandonment.

65
00:04:27,130 --> 00:04:37,290
So what I would do here is just keep it to view results, but it also depends on the use case as well.

66
00:04:37,330 --> 00:04:43,210
So if you find that your users use your product in a way where they're constantly adding and removing

67
00:04:43,210 --> 00:04:45,880
a bunch of content, then it may make sense.

68
00:04:46,330 --> 00:04:49,230
I could see that being used for like a CRM tool.

69
00:04:49,240 --> 00:04:55,360
It's like an internal tool for a team to use to search up users or search up like clients or something

70
00:04:55,360 --> 00:04:55,900
like that.

71
00:04:56,470 --> 00:05:01,030
And they want to easily add and remove filters and they just do it on a day to day basis.

72
00:05:01,040 --> 00:05:03,640
So it may help them with their day to day flow.

73
00:05:03,880 --> 00:05:08,530
But a user that's coming to a website and just adding filters like to search for like rentals or something

74
00:05:08,530 --> 00:05:15,580
like that, typically they would be more inclined to change those filters manually rather than lose

75
00:05:15,580 --> 00:05:17,500
all their filter changes in one go.

76
00:05:17,740 --> 00:05:22,980
So keep that in mind when you are designing longer forms or filters or something like that.

77
00:05:24,530 --> 00:05:26,900
And the last one I have here is disabled.

78
00:05:26,930 --> 00:05:31,800
Now, this isn't disabled, but consider having a disabled button for your user.

79
00:05:31,850 --> 00:05:36,740
A disabled button is a good it's really good for cases where a user can't progress unless they fill

80
00:05:36,740 --> 00:05:38,090
out all required fields.

81
00:05:38,930 --> 00:05:44,060
So in this case, what I would typically do with a disabled button here, let's let's make the background

82
00:05:44,060 --> 00:05:44,840
color like.

83
00:05:47,780 --> 00:05:50,000
Maybe like 30 percent or something.

84
00:05:50,030 --> 00:05:50,840
Yeah, that's that's fine.

85
00:05:51,260 --> 00:05:56,210
So we have a 30 percent on the background color and the foreground for the text would be something like

86
00:05:56,570 --> 00:05:57,740
75 percent.

87
00:05:57,740 --> 00:05:58,910
Maybe that's a little too much.

88
00:05:59,450 --> 00:06:01,550
We can do something like 50 percent.

89
00:06:02,710 --> 00:06:04,930
He can even go even lower than the 25.

90
00:06:09,000 --> 00:06:13,590
Yeah, this looks like a good disabled submit button and like this usually comes in handy when you're

91
00:06:13,590 --> 00:06:21,090
doing stuff like credit card information or even entering login information, registration based information.

92
00:06:21,090 --> 00:06:22,650
So keep that in mind.

93
00:06:22,650 --> 00:06:28,620
Your users may be more inclined to actually fill out all the required information rather than rushing

94
00:06:28,620 --> 00:06:30,780
to submit and then seeing errors everywhere.

95
00:06:31,450 --> 00:06:34,890
Make sure to test this with your target users whenever you can.

96
00:06:35,340 --> 00:06:38,010
And that's it for best practices for Benin's.