User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have two candidates for indicating that a form field is in an error state.
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:
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
Error
Note: The copywriting on this example is quite poor... I hope you don't speak German ;)
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.
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.
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. 
And this is another very interesting example, in this link GWT Bootstrap 
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.
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.
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.
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.
