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 two candidates for indicating that a form field is in an error state.

Option 1

enter image description here

Option 2

enter image description here

Should the error icon be in the field, or next to the label? Or something else? Or does it not matter?

Note: this would typically be in addition to a form-scope error box above all fields:

enter image description here

share|improve this question
    
Which one would you prefer and why? –  JeroenEijkhof Jul 9 '12 at 5:50
7  
You are confusing the issue a bit by using a delete icon that looks like it can be clicked or touched instead of a warning or error status icon –  Roger Attrill Jul 9 '12 at 6:38
    
Good examples in here: alistapart.com/articles/inline-validation-in-web-forms –  Ben Brocka Jul 9 '12 at 13:20

7 Answers 7

up vote 5 down vote accepted

IMO neither of your candidates is strong enough. The user shouldn't have to look for the field with error, it should be very obvious.

And you probably should place the text about the error (e.g. "Doesn't look like an email address", "Password doesn't match" etc.) next to the field. Above all fields works fine for short forms but it gets quite problematic with long ones, even more when there are several errors.

That's how we do it:

No error

No error

Error

Error

Note: The copywriting on this example is quite poor... I hope you don't speak German ;)

share|improve this answer

The current suggestions have all been great, and like most I think that option 2 may be confusing for the user in terms of continuity with other systems such as iOS where the icon shown represents a clickable element to clear the field.

One suggestion I haven't seen above is temporary background changes to the parent of the input. This serves 3 purposes:

1) The area with colour change is larger. It draws the user's eye in (assuming it's visible) 2) The area changing colour is going from white to a colour rather than one colour to another. I work on a lot of gov systems and we have to consider colour blindness in everything we do. 3) It doesn't take away from your styling once the colour has animated away.

I would however like to point out that this method must be backed up with something like option 1 or the eBay/twitter methods - once the animation is gone the user need to stay aware of which fields require attention.

Something that just came to mind - what about option 2 with a different icon? Then you don't have the consistency issues. Something like a yellow warning triangle with exclamation mark in it would work IMO.

Example warning triangle

share|improve this answer
    
Great idea about the different icon. It's more specific/unique and represents the feel of "this needs correcting" better as opposed to a big stop sign. –  NickC Jul 9 '12 at 15:37

We use both a red border and the image inside the field (like option 2) because it feels the most concise. We then show the message underneath the field in red and instructions on how to fix it in a tool tip. Icons in our system have the "hand" cursor instead of the mouse pointer so by not changing the cursor on this image it indicates that there is no action.

share|improve this answer

I think showing the error message below the object is good practice, with coloring whole box with yellow color or text red color . This mortgage site shows the way. Red and Yellow are now standard colors for showing errors. From 6 feet away you can clearly see that there is an error and where it is.

enter image description here

share|improve this answer

I believe it is best the first example, but without the error icon, just the color field, which is best because it highlights the error in form. As an example this is how the image registration Twitter. enter image description here

And this is another very interesting example, in this link GWT Bootstrap enter image description here

share|improve this answer
2  
It is a very basic rule to never use only color as indication because of colorblind users. Color should be used only alongside another indication. Your Twitter screenshot does this with the check/X icons. The GWT screenshot violates this rule. –  Vitaly Mijiritsky Jul 10 '12 at 5:42
    
Would be interesting then use the example of GWT, combined with icons. For people without vision problems, it is very easy to distinguish the fields incorrectly completed. –  Xosler Jul 10 '12 at 11:06

I don't think people who are color blind will easily spot option 1. A black-and-white icon in the textbox will be visible to (almost) everyone.

share|improve this answer
    
Upvote for thinking about the color blind, they're users too! –  Ben Jul 9 '12 at 13:20
    
@Jeroen , You have the same name as me, woah! this is weird ;) –  JeroenEijkhof Jul 9 '12 at 16:57
    
A green icon will be equally visible to everyone, it's just the fact that it's green will be lost to colorblind users :) –  Vitaly Mijiritsky Jul 10 '12 at 5:44

Option 2 objection

As an iOS(iPhone, iPad, iPod) user, and I know that is not everybody, an "X" to right on the inside of a form field indicates first of all that if I click/tap the "X" it would clear the field.

I recommend to add that functionality if you go with option 2. That being said I respond better to Option 1 because my initial take is that it is more easily scanned as I look for where the error is.

Additional thought

I would like to challenge you, what more things could you do that might make this stand out? Follow the standards, make it familiar ... but augment it with that little extra.

Maybe the error message has some more character, a story that is in your brand voice.

share|improve this answer
    
You are completely right about the X-used-to-clear thing. Can you clarify what you mean by "follow the standards"? I'm not sure what the standard is in this regard. –  NickC Jul 9 '12 at 5:52
    
I simply meant to not deviate from best practices around forms (read more from Luke Wroblewski) but still try to add a little bit more than all other forms like this. Your users will like it and obivously you are posting here about a single form which to me means you got some time to think about how to make it better. –  JeroenEijkhof Jul 9 '12 at 6:20
    
However it would be useful for the user to click the x and delete the email and start from scratch... what do you think? –  edgarator Jul 9 '12 at 7:59
    
@edgarator, Yes i agree, this also means that the text in the email field should be preserved between session/page-loads which doesn't always happen but is good practice. –  JeroenEijkhof Jul 9 '12 at 17:00

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.