9

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

3

7 Answers 7

5

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 ;)

6

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.

4
  • 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.
    – Nicole
    Jul 9, 2012 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. Jul 9, 2012 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, 2012 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. Jul 9, 2012 at 17:00
5

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

2
  • 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. Jul 10, 2012 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, 2012 at 11:06
2

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.

3
  • Upvote for thinking about the color blind, they're users too!
    – Ben
    Jul 9, 2012 at 13:20
  • @Jeroen , You have the same name as me, woah! this is weird ;) Jul 9, 2012 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 :) Jul 10, 2012 at 5:44
1

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

1
  • 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.
    – Nicole
    Jul 9, 2012 at 15:37
0

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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