How to display login/register errors?

Question

I have a login form and a register form on my website in this format:

Username: [        ]
Password: [        ]
   Email: [        ]

There are multiple ways to approach informing the user of invalid register data:

1) If the user inputs an invalid username change the Username label from black to red.

2) Additionally, a site admin could also display a watermark on each textbox to indicate valid input.

3) A label could be prepended or appended to the form indicating the reason for failure. For example, after the submission failed before Username or after Email it would state something like, "Inputted username is invalid. Must contain only alphanumeric characters."

4) Likewise, the error message could be positioned to the right of the textbox associated with the incorrect input value. For example, if the username was incorrect then to the right of the Username textbox, in red, it may state "Inputted username is invalid. Must contain only alphanumeric characters."

I'm sure there are many other ways to do it. The only problem I see with the first method is that it may not be as color-blind assessable. With all other methods additional labels containing messages are created to display to the user.

How would User Experience solve this problem? What is the most elegant solution to this common problem?

Answer 1

Read Web Form Design: Filling in the Blanks by Luke Wroblewski. I think it will help you work through all the questions and considerations you have and make decisions based on data Luke provides in the book.

Do your own user research too to find out what kind of error feedback works best for your users and your form design.

Giving as much feedback as possible is generally the best avenue. Never depend on a single form of feedback that could be misinterpreted (such as a color, which is of no use to color blind people). Always be explicit, which means that just changing the color of the border isn't enough.

Ideally you want to tell the user WHAT is incorrect, WHY it is incorrect, and HOW the user can correct it. In the case of an already taken username, for instance, you would want to communicate that it is incorrect by highlighting the field in an accessible way (make it red, make the border thicker, place an icon next to it), that it's already taken by writing "This username is already taken" in a label, and what solutions there are such as writing suggestions for usernames that are still available: "The username 'johnsmith' is already taken. Try johnsmith123, john_smith, johnsmith1010, ...".

Consider skipping feedback on whether a field is valid. Although you should be as clear as possible in the case of errors, telling the user a field is valid is essentially non-information because I already assume the field is correct if it's not covered in error feedback. But your users might disagree so make sure to test various alternatives.

Answer 2

Couple of thoughts:

1. Make the email address be the unique identifier and only have two fields. It's pretty common practice at this point. It eliminates 33% of your form.
2. Use openID. StackExchange does this and it really does work well. Why does someone need ANOTHER site password?
3. Check out how Twitter does it. Their signup interaction is gorgeous (in my opinion). Copy exactly what they do. It works.

Answer 3

These days a good form should provide feedback in real time. Obviously, you should have a fallback version as well. So ideally the user should not submit a registration form to find out that there's something wrong with it. A typical AJAX progress icon could be displayed next to the input field indicating that there's a communication in progress with the server. If the field passes the criteria successfully than the progress icon could be replaced with a success indication icon, like a tick or something. Alternatively, it could simply disappear indicating that everything is fine. However, if the criteria isn't successful than the message should be displayed. The message should provide a description of why it isn't successful as well as an instruction on how to fix it. The error messages could be displayed in bold as well as red to draw attention to it. I personally find that a typewriter effect on error messages helps to draw attention to it as a human eye tends to see motion first.