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.

How should required field validation be handled visually?

NOTE: assume asterisk is red

*Name:[_______]

or

Name:*[_______]

or

Name: [_______]*

or

Name: [_red bg_ ]

or

Name(<- font color red): [_______]

or

You tell me a better way!

share|improve this question
    
Just a couple of general comments...Humans key on contrast more than color...and...If possible provide a brief explanation of why a field is invalid. –  Rusty Aug 16 '10 at 21:05
add comment

5 Answers

up vote 7 down vote accepted

There's never a right or wrong answer with these type of questions and a lot of it depends on your users personas (engineers vs. power users vs. aunt alice who never used a computer) and context.

A general rule is to use

label [input   ] [validation       ] 

Using the validation area for either a red asterisk to indicate a required field or an error message after validating the form (or both).

The Simply Accessible website has a good, concise write up on required form fields here: http://simplyaccessible.org/examples/required-form-fields

share|improve this answer
2  
Note that the input and its validation should be on a new line after the label if you're designing for mobile safari, or when the user zooms in, they'll see only the input and not the label, which is frustrating. –  Rahul Aug 16 '10 at 20:31
    
@Rahul - Mobile platforms (not just mobile safari) have completely different sets of rules to follow in just about every situation. –  Charles Boyung Aug 19 '10 at 18:57
    
@Charles Boyung Indeed. –  Rahul Aug 19 '10 at 20:36
add comment

It depends a lot on various factors.

  1. As a general rule: there should be a text indication (asterisk) and a visual indication, such as having just a 1 second glance to the form you must be able to understand what fields are required. For example, you can add an asterisk on the side of the label (better if formatted slightly differently from the label itself) and add a more intense border to the fields that are mandatory.
  2. As a second general rule, try very hard to see if you can simplify a form: very often there are ways to minimize forms and avoiding at all optional fields. For example minimalist registration forms could ask just the email, and leave everything else to followups and widgets like "Your profile is 90% complete".
  3. Be consistent in all the website, that's really important, because it doesn't force the user to learn every time.
  4. Note that if the asterisk are aligned together on the same column it's slightly better (but slightly, it's usually avoided to make the form nicer, nice forms perform better than worse ones).
  5. If most element in the form are mandatory, then it's probably better to mark the optional ones.

Gotchas:

  1. Don't rely on colors alone (troublesome if you can't read colors well).
  2. Don't rely on asterisk alone (you force the user to think about what's mandatory and what not).
  3. Don't shatter the form around: while it seem outside the scope of this question, often a polished, vertically aligned form with clear labels helps a lot in the understanding of mandatory fields: since a single vertical scan is easier, it's also easier to detect mandatory fields.
share|improve this answer
add comment

Keeping the asterisk could be useful rather than simply color-based indicator (+1 for accessibility). Throw in a title attribute on the asterisk as well, e.g. <span title="Required Field">*</span>

This is probably necessary anyway to style it appropriately

I don't think the asterisk position is critical -- just be consistent!

share|improve this answer
add comment

I think I've done all of those at one point or another. What I've fallen into more recently is something that takes more work but I think is better for the user. Basically, you give a small red popover box with a stubby arrow pointing toward the field in question, telling them it's a required field. Displaying it above the field in a bright colour I think gets the point across well without altering the flow of the rest of the document with inserted content or bolded text.

It gets more complicated if you have multiple errors at which point displaying multiple popovers is very cluttery, so you either decide to only display the first error or only display one error at a time and once one of the conflicts has been resolved display the next error.

share|improve this answer
add comment

until recently this was the default and it is still very common and since everyone know what it is and what it means I like it.

Name: [_]*

but this is more modern and a lot of new sites use this type of thing. The problem is that if half the fields are red it yells at you and doesn't look pleasant so what many sites do is they wait for you to focus on a required control and then turn it red. The problem with that is that if I don't focus I won't know until I submit and get feed back

Name: [red bg ]

which brings me to what I prefer. Put a star or some other marking so people can see at a glance what needs to be filled in and then when a field is focused change the bg color and on validation if the field fails show it in red.

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.