Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
1  
By "How would UX solve this problem?", are you asking this site's UX community, or do you literally mean "how would applying the profession" solve it? The way you worded the question is a bit confusing. :-) –  Rahul Apr 6 '11 at 22:24
    
By watermark, do you mean checkmark? –  Rahul Apr 6 '11 at 22:30
    
Does watermark = designinginterfaces.com/firstedition/… ? –  iambeano Apr 7 '11 at 4:22
add comment

3 Answers 3

up vote 2 down vote accepted

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.

share|improve this answer
    
With regards to safety/security, you should actually highlight that the combination username/password is incorrect, without specifying if it is the username or the password, to discourage hackers to go and try to find valid usernames. While I understand it is less userfriendly, it is also a very important aspect of a login form. –  nathanvda Apr 7 '11 at 7:56
    
@nathanvda good tip for login forms. My example was referencing registration. –  Rahul Apr 7 '11 at 9:52
add comment

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.
share|improve this answer
    
+1 for openID. I wish more sites out there would do this. –  Jason Towne Apr 6 '11 at 22:04
1  
Scary advice overall. First of all, -1 for OpenID: quora.com/OpenID/What-s-wrong-with-OpenID. Second, "do exactly what xxx does" without any thought or research given yourself? I hope no professional UI or UX designer ever does that! As for making the email address the unique identifier; that works for the technical side, but what if choosing a username is important for this signup flow? That should at least be considered rather than just pursuing the goal of reducing form size by 33%. –  Rahul Apr 6 '11 at 22:21
1  
Rahul, The question didnt give specifics. Twitter does a good job of interaction on the situation provided. Your comment just seems kinda rude. –  Glen Lipka Apr 7 '11 at 3:36
    
Sorry if it came off that way. I just wanted to make clear that I didn't agree with it. Buds? :-) –  Rahul Apr 7 '11 at 9:53
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.