UI cheat sheet: text fields
By: Tess Gadd
Tags: UI, UX Design, Usability, UX, UI Design

7. Feedback

A feedback state is when a user needs to be notified that the text that they have inputted is right or wrong. For example, if a username has been taken or if a password is incorrect, or if you have entered a valid birthday date, etc.

There are two approaches to giving feedback; both can be useful, depending on the context. In the first approach, your aunt Mildred tells you that you should wear more make-up. In the second approach, you ask your aunt Mildred if you look okay, and she tells you to wear more make-up.

So, moving on from that metaphor:

Approach 1: Tell the user that they made a mistake while they are filling out the form.

Approach 2: Tell the user that there is a mistake on submission.

For our purposes right now, the results can both look the same.

Fail feedback

Fail feedback can be used to highlight mistakes such as empty required fields, wrong passwords, invalid email (e.g. when the email doesn’t contain an ‘@’), wrong email (when the email isn’t on the database), etc.

Fail feedback

Tips for styling fail feedback:

Make use of feedback text to let the user know why there is an issue.

Make sure the feedback text is legible (AAA standards).

I recommend using an icon to indicate what fields are incorrect, as a colour blind person may not be able to differentiate the colour red.

Positive feedback

Positive feedback isn’t given as often as negative feedback. We can have long philosophical debates about this. (‘Maybe traffic cops should tell us when we are driving well and not only when we aren’t.’) In this case, however, we expect most users to be able to fill out their details correctly and there being a mistake should only be the exception.

However, you may consider adding positive feedback to places that the systems can check and that would make the rest of the application process easier if the user knew that a certain piece of information was correct.

Success/positive feedback

Tips for designing positive feedback:

Use an icon, as colourblind people may not be able to differentiate the colour green.

You should only see positive feedback while you are completing the form and not on submit.

Invalid email address feedback (register)

When a user registers, the system has to make sure that the email is valid. We want users to input the correct address so that we can contact them and also so that they can log in later. This is vital for any sign-up process.

Non-optional: Check to see if the email follows a pattern

Every email address follows a pattern, the ‘local-part’ followed by an @ symbol and then a ‘domain’. There are checks that an input field can run to ensure that the pattern is correct.

Invalid email address feedback

Optional: Double-check the email address with a confirm field

While we don’t see this that often, some forms ask you to confirm the email address to avoid mistypes and mistakes.

Email addresses don’t match feedback

After all, if the user makes a mistake while typing their email into a sign-up form, it is incredibly difficult to reset it.

Optional: Send a validation email to confirm the address

This method of confirmation is becoming more and more popular for an obvious reason: you can know if an address is real because the user is able to respond to an email you send them. Here is the standard flow of email confirmation validation.

The user signs up and enters their email address. The next page they see tells them to follow a link sent to them via email. They open up their email account and open the email. They follow the link in the email and it opens up a browser page and alerts them to the fact that their email had been validated. They can now continue to the rest of the site.

Wrong email address feedback (login)

If the user enters the wrong email address, or it isn’t on the database, your system has to let them know. Usually, there isn’t a penalty (such as limited tries) for entering an email wrong. In some cases where the user has entered the wrong email address, you may want to suggest that they re-register with that address.

Wrong email address feedback

Unavailable username feedback (register)

Creating a username is the worst because someone out there always got there first, and all the cool ones are already taken. (Maybe one day I will register for a game before someone steals the username ‘croft’, but it has yet to happen.) So you sit there trying all sorts of random combinations until one of them is available. (croft, lcroft, laracroft, 1aracroft, 14racroft, 14racr0ft — success! Wait, why the hell is my name 14racr0ft?)

Registering a username feedback

Moving on from my username rant, you need to always communicate instantly with your user if their desired username is available before they select the confirm button, otherwise it becomes a tedious process. And while it may be a bit old school, it is sometimes nice for the system to recommend usernames that are similar and available.

Wrong username feedback (login)

Here the user has to enter their username to log in to their account. If a user forgets their username, suggest they retrieve it with their email address.

Wrong username feedback.

Weak password feedback (register)

If the password that the user provides isn’t strong enough, the interface will have to tell them. It will also have to tell them why it isn’t strong enough and how they can make it stronger.

Depending on your industry or business requirements, you may have specific password rules. A bank, for example, should have a stronger password than an online forum, due to the importance of the information it contains. However, the standard password pattern is: 8 characters long, with at least one capital letter, one lowercase letter, one special character, and a number. That being said, if you make it any more complicated than that your users will get annoyed. After all, everyone just uses one password right?

Feedback showing the user how they can improve their passwords.

If your user is struggling to improve their password you should very clearly tell them how they can strengthen it. Some do this in helper text, others in tooltips — regardless of the solution, let the user know.

Password strength indicator

Some sites indicate to their users how strong their password is depending on the complexity of the password. For a cool approach, look at Dropbox’s solution in the hall of fame section below.

Text fields allowing users to check their passwords

Your user may also want to confirm their password — especially seeing that it is hidden. One way is to add a show/hide symbol. Another is to have them write out their password twice. While it is important to make sure that a password is correct, I personally think it is more important to make sure an email address is correct, as you can always reset a password while you can’t do anything with an incorrect email address.

Wrong password feedback (login)

Password fields typically display the entered text as a non-alphanumeric symbol. (This is to stop your nosy spouse peering over your shoulder to see what your Facebook login details are.)

A login password should only show that it is wrong once the user has clicked submit. You don’t want to tell someone that they have the wrong password before this point because you would just be making it easy for baddies (or your spouse).

Feedback on a wrong password attempt

You may want to limit the number of wrong attempts that a user can enter — especially on an information-sensitive site.