Hey and welcome back.
We're going to be talking about some best practices for input's, one thing that you should know is
that the height of your input should always be the same height as your primary button to maintain that
visual consistency.
Remember when we learned about spacing and grids?
Well, we defined a base unit of eight pixels and using that we can create input field heights of thirty
two pixels or forty pixels or even forty pixels and so on.
So right now, if we look at our pixel height, we have 40 pixel height and on our button we have a
30.
We need to adjust this just because right now it does not look consistent.
Which is just that's a 40 and all of a sudden that looks much better.
Let's just reverse it to see what it looked like before.
Much more consistent.
And we can just make sure that space you can leave extra space if you want at the end, but that looks
much more better than it did before.
Your input, Fieldings, all inputs in a form should be the same length, but, you know, that's just
basically a guideline that varies depending on the type of answer you may ask the user to answer.
A good example is when we ask users for their credit card information.
Let's take a look at the KVI number.
Now, this input field shouldn't be too long because it's generally only three digits.
Sometimes having longer puts for short answers can confuse the user into thinking they may have entered
a too short answer.
There's an easy way to fix this.
What we can do is we can just shrink this.
And what I'm doing here is I'm holding shift a shift in control, and I'm just going to nudge that over.
And if you don't know what nudges up here in the bar, if I go to preferences and I go to nudge amount's.
I have a big nudge of 10, I would probably set that to my base unit or some variation of it, so I'm
going to set it to four and you'll notice that if I hold shift control.
I can decrease the width of this frame based off of my Nojima, so I have four, eight, 12, 16.
And now everything looks like it's based properly.
And that looks much better, so if we go back and we look at what it looked like before.
This looks much better.
So remember, based off of the context of the type of answer you're looking for, you can adjust the
input size, especially for something like this.
Next, these labels, so your labels should be short and clear and, you know, easy to read.
It's best to keep your labels short and sweet and to the point, one to two words is generally enough
to describe what is being asked.
So the label should contrast the input file also.
So generally people bold and shrink them a bit.
They also lower the opacity sometimes.
I mean, that's a visual thing that you can do afterwards.
Another tip is to make sure only the first letter is capitalized for easy scanning and readability.
So right now we have a very long input.
And all we want to do is type their first name, so the easiest way to do that is just to ask for a
first name and that's it.
I wouldn't capitalize the second word, I like to just capitalize the first one and let the rest drop
to lower case, that also depends on the type of input.
I mean, you could be asking for some information that needs to be capitalized like CVB.
That is another example.
It's just based off of context.
But generally, this is what I do.
This is like kind of like a semi bold.
You can build it just a bit to contrast whatever is in the input.
Let's see if we can change this input right here.
These are my components, the label No.
Defaults or you can do active if we go into our.
OK, well, we'll get to that in a second.
But generally, yeah, make sure that your label differentiates from.
From your input, so I'm going to just write some text in here.
So there's my first name.
And what I would do is I would probably have it at whatever font size that I think is best, maybe 16
and that would be something like a regular at one hundred percent.
And that is definitely enough.
In terms of showing some sort of hierarchy within the input and to differentiate between the actual
label and the input text, so make sure that you are doing all of that and make sure that you aren't
having too long of sentences or something like that.
When you're asking for a question in terms of a label, keep it short and sweet.
OK, so here's another one.
Now placeholders.
Now, this is another thing that people debate a lot over to placeholder and not to placeholder, I'm
sorry, I just kind of butchered Shakespeare there for a bit.
But anyways, placeholders at their best, they show repetitive information and at its worst, it hides
important information and reduces accessibility.
So when a user clicks on a placeholder and starts to type in an answer that automatically replaces the
placeholder with whatever the user has, input it.
And this can be a problem that the placeholder is being used as a label or a hint.
At that point, the user can no longer see that text and can't review their answer.
As for accessibility, there are a little harder to see due to lighter color and are often undetected
by page readers.
Let's take a look here.
So right now we have spouses birthday as a placeholder and.
Yeah, that is not good.
So what we can do here?
Is just remove this text and hide it.
And we're just going to duplicate that and what we can do is just type in.
Expose his birthday, and I don't really think you need a hint for that, you can do something like
this.
So spouses.
So if we were to use this, for example, I would remove this placeholder text because, like I said,
placeholders aren't necessarily.
I mean, they are useful when you use the information there, but when it's hidden, it's gone and what
you can do is just text on the right side or below, whatever suits your designed best and whatever
works with users best.
But what I've done here is I have the optional content right here instead of within the placeholder.
Do this.
Rather than have a placeholder, because it's a better solution in the end.
And that's it for some best practices for input's.