Hey and welcome back.
We're going to jump right into states now, they're a bunch of different states that we need to think
about when designing and puts different states, tell the user what is currently happening and what
should happen next.
These states can be differentiated with like text color borders, and these visual cues are integral
to a good input.
So let's jump into the different types of states we encounter.
So the first one we have right here is your default state.
And this just shows an empty field that hasn't been interacted with.
So, I mean, there's just an empty field.
There's your label.
There's nothing I mean, it's just standard.
It's default.
And user hasn't even clicked into it or entered anything.
Next is your active field, so the user is active there in focus right here, and what happens is,
is the user has clicked into this.
It has a highlighted border or your outline, you can call it, and accurate over here on the left to
show the user that they should be typing something.
So, mind you, this is always flashing.
So just to let the user know that an action needs to happen.
Next is filled, so this is a filled input, so once a user has filled an input and entered all the
information and clicked away from the field, it looks similar to your input.
But the only difference is that there's text in there and it's been completed so users know that they
can move on.
So really straightforward.
Next is disabled, so sometimes you run into a case where an input should be disabled due to a requirement
restriction, disabled inputs are generally shown as filled in great out or to indicate that you can't
interact with it.
Sometimes they could have some information in there that can't be edited but is great until some action
is taken.
And just keep that in mind that when we are designing forms and stuff like that, we should be designing
for disabled inputs as well because that scenario could happen.
Success states.
OK, so an answer is correct, you have the option to show a success message so similar to the air input,
we communicate that with color we have green.
We have icons.
And appropriate text.
So you don't necessarily need to show a correct or success messages all the time, it may make sense
in certain scenarios if your form is designed really well, users will often have multiple success states
like this, and that may get way too redundant.
It may make sense in some scenarios.
So keep that in mind.
Now, this one is really important.
We have an error when a user has entered something incorrect or maybe the user may have missed an input,
they should be showing him an error message.
Now, the message generally should have the appropriate color red.
We have icons and text.
This error should always and I stress this, this should always be in line the form or in line to the
input and not necessarily outside of the form underneath the actual corresponding input is totally fine.
And that's where I think you should be putting all your error messages.
The worst thing is when you have a like a four or five filled form and then you have the error message
all the way at the top of the former at the bottom of the form.
And you're like, well, well, what did I enter wrong or what went wrong?
That is a pretty bad experience.
So keep it confined to where the actual error is just so users can quickly remedy that.
Now, we kind of touched upon this in our lesson on typography in terms of like the appropriate text
as well.
So let's talk about assistance.
Now, there will be times when a user comes to an input and needs a bit of assistance, you know, a
tip or a hint, this will help the user fill out your input much quicker if you do it right.
Here are certain ways we can provide assistance to our users.
So one way is to text.
Now, we touched upon this a little bit.
So I have a text right here, right beside my label, right.
Aligned, not necessarily as a placeholder.
I don't do placeholders often, but.
Using hands above or below your input field gives users helpful information about the question you're
asking them, so if you need to use it.
That is incorrect, actually, if you need to use it, use it like that on top or below, just to give
users some helpful hints if they need it.
This could be like a sieve.
No, I mean, maybe not that, but you could use it for birth dates in terms of the format.
I always know when I'm entering a date format that I don't know if I should put the date first of the
month first or the year first.
And, you know, I've been asked in all separate ways.
It's just good to have some sort of outline on how to do that.
The next is auto format, so we have an auto format, credit card number over here, and essentially
we have the power to automatically format a user's answer depending on the scenario.
So this avoids any format errors and helps users read and review their answers.
So think like things like credit card numbers, phone numbers, etc..
So right now I have a credit card number here and it's just much more easier for me to break it up into
chunks rather than to read it like this.
So this is not as easy to read, I know it says one, two, three, four, one, two, three, four,
one, two, three, four.
One, two, three, four, but.
It's harder to read when it's all combined, so breaking into chunks or auto formatting is just a much
easier experience on the user.
So keep that in mind and have a good conversation with your developers about doing that.
So we've seen this input before now autocomplete, sometimes users need to enter something long or they
may not necessarily know what they're trying to search for.
And we should help them with autocomplete.
This saves the user a bunch of time and also reduces the possibility of errors with formatting and spelling.
So if we have an address like we have down here, it's just much more easier to get them to start typing
in the the first letters or the first numbers of their address and then start auto filling.
It could be even used for like answering a question, a specific question in relation to something.
And the user doesn't necessarily know the answer, or there may be multiple answers or they may be searching
for multiple things.
So autocomplete has a wide variety of use cases and you should use it when the user may be confused
on what to enter.
Or it could cut down on the amount of time a user could enter information like a long address, which
is pretty pedantic when you think about it in terms of answering one.
Now, default values, it's always smart to prefilled textfield with the most likely answer when the
answer is expected by the majority of users.
So if I were to ask you a question about like your country and I knew ninety five percent of my users
are in Canada or the United States or whatever country, I could prefill that data with just Canada
or the United States, and that would be a much easier experience with the majority of our users.
So they don't have to go through the process of actually selecting that or finding that answer.
Now, in this case, potato chips and the right answer is always salt and vinegar.
So that's my favorite my favorite flavor for chips.
But you should always think about how you can make the user's life a little bit more easier.
And that's it for input's.