Hey, and welcome back.
We're going to be talking about buttons now, buttons are really important part of any UI.
I mean, they're not only used for forms, but can be used to link users to other parts of the site
or within the same page.
We should treat buttons with a lot of care.
And I'm going to show you a couple things you can do to make your buttons that much better.
So let's jump right in.
So what do we have here?
We have a nice little submit button.
Now, Button should describe the action you want the user to take and I think submit and cancel or,
you know, they're OK in most technical applications, but they usually feel way too dry or generic.
Now consider using words like sign up or send information or create account.
I mean, those are much better options.
I'm just going to change this to create account.
And it's just a much more descriptive or you can say more action based word or more action based copy.
Now, this also helps you emphasize the value of completing a certain action.
We want our users to keep motivated.
And a way we can do that is to remind the user of the benefits with completing this flow.
So try something like sign up and you know, or something like create account.
Just be more descriptive instead of just using something generic like submit.
Now, we do have a sign up down here and like I said, like sign ups, a pretty good option like it.
Now consider writing in the first person.
This is another option.
And it really depends on the tone you're going for with your brand and like your entire UI and your
UX.
Now, the Budden is the final interaction that takes a user elsewhere.
There's times where you can try making it personable.
And it's been proven that buttons that use words like I, me or my have higher conversion rates instead
of sign up.
Why don't we try something like create my accounts?
I think that sounds a little bit better, a little trick I use is that whenever the copy is in the button,
I will proceed that by I like I want to.
So it makes grammatical sense.
I want to create my account.
This is what I would do if it matches the tone of what you're going for.
But I mean isn't necessarily limited to that.
I think being personable and, you know, combining that with what we learned before about having more
descriptive and action based words just makes your buttons so much better.
So you remember this scenario, right, differentiating between buttons, usually you should have a
primary and secondary button, you may need to use two buttons at certain points and it happens quite
a lot.
And you should come up with a primary and secondary that are easily distinguishable.
The rules are buttons that function differently should appear differently.
So remember, to make the primary button that should take the user to the expected path should be much
more prominent.
So.
In this case.
Something like that works like we saw before, but when a user is on mobile, you should make buttons
easily stoppable.
I think 40 pixels to forty eight pixels is a good height for a button, especially on mobile.
And it works really well with using a base unit of apexes, remember, keep them easily distinguishable
and also remember that when you're on mobile, you need to have a bigger topical area just so.
You don't necessarily have something like this.
And when you're on mobile, it's just it's not fun to try and tap something like that, you may actually
tap the council by accident, so try to avoid doing anything like that.
40 to 40 pixels is generally a good rule of thumb.
Now, there are times where, you know, I would use a clear all I mean, I've been guilty of doing
this a couple of times.
So if you have a set of filters that you need to apply, you may want the user to be able to reset everything.
Or if there's a large form, sometimes people I don't know why you would do that, but I've seen it
before in terms of like a resetting or a clear all on a form.
You should probably try and avoid using some sort of like reset button like this.
It uses, rarely uses, and it's kind of vulnerable to being clicked accidentally.
This resulted in frustration, data loss and possible abandonment.
So what I would do here is just keep it to view results, but it also depends on the use case as well.
So if you find that your users use your product in a way where they're constantly adding and removing
a bunch of content, then it may make sense.
I could see that being used for like a CRM tool.
It's like an internal tool for a team to use to search up users or search up like clients or something
like that.
And they want to easily add and remove filters and they just do it on a day to day basis.
So it may help them with their day to day flow.
But a user that's coming to a website and just adding filters like to search for like rentals or something
like that, typically they would be more inclined to change those filters manually rather than lose
all their filter changes in one go.
So keep that in mind when you are designing longer forms or filters or something like that.
And the last one I have here is disabled.
Now, this isn't disabled, but consider having a disabled button for your user.
A disabled button is a good it's really good for cases where a user can't progress unless they fill
out all required fields.
So in this case, what I would typically do with a disabled button here, let's let's make the background
color like.
Maybe like 30 percent or something.
Yeah, that's that's fine.
So we have a 30 percent on the background color and the foreground for the text would be something like
75 percent.
Maybe that's a little too much.
We can do something like 50 percent.
He can even go even lower than the 25.
Yeah, this looks like a good disabled submit button and like this usually comes in handy when you're
doing stuff like credit card information or even entering login information, registration based information.
So keep that in mind.
Your users may be more inclined to actually fill out all the required information rather than rushing
to submit and then seeing errors everywhere.
Make sure to test this with your target users whenever you can.
And that's it for best practices for Benin's.