20

Form validation with images

As you can see in the above image, there is a validation icon in front of the text. This is unnecessary, but I thought it might be good to catch the eye.

Form validation without images

If there is no icon, it's still clear there is a validation error, but I'm not sure if it is better to have the icons or not.

Improve this question
1
  • If you keep the red color this and the messages appear after submit the form changed so much so that I think the icon is not really necessary.
    – greenforest
    May 16, 2012 at 8:12

5 Answers 5

Reset to default
26

Having an icon is an extra visual cue to the user that something requires their attention.

This might be useful in places where the page is viewed on low contrast device or if the user has some sort of colour blindness, to draw attention to the message that might otherwise blend in with the rest of the information on the page.

If your design makes it clear enough with the addition of just the text then you might be able to leave it out. If it's really important you might want to run tests to see which users find most noticeable.

The icon can also serve as hook to place an explanatory tooltip or link to help pages etc.

Improve this answer
4
  • I think the idea of using the icon as a hook to place a tooltip is a cool idea, but would the content in the validation message be enough? What kind of extra tooltip would you include with the icon?
    – magzalez
    May 16, 2012 at 14:18
  • @magzalez - you might want to explain why the value is required (age restricted content etc.). However, I do admit it's not often needed.
    – ChrisF
    May 16, 2012 at 14:20
  • No, no, it's an excellent point. Really, how often are thins "needed" or required? Most of the time we're trying to go above and beyond, right?
    – magzalez
    May 16, 2012 at 14:39
  • "if the user has some sort of colour blindness" This. I find it hard to see the difference between red and black text unless I'm explicitly looking for it. I often miss the point when people send me documents with important bits of text in red. The icons in the example would help me a lot.
    – Burhan Ali
    May 17, 2012 at 22:24
12

A List Apart actually has a great article: Inline Validation in Web Forms where the best performing inline validation method actually always displayed icons after validation; a green circle with a check for success, and a red circle with an exclamation point for an error, plus red text for errors.

This method allows the icon to give immediate feedback for success and failure, and just by skimming the column of icons you can see your errors (the only ones with text). The success icon gives some added confirmation that the field was filled in and checked out.

When compared to our control version, the inline validation form with the best performance showed compelling improvements across all the data we measured. Specifically, we saw:

a 22% increase in success rates,
a 22% decrease in errors made,
a 31% increase in satisfaction rating,
a 42% decrease in completion times, and
a 47% decrease in the number of eye fixations.

Here's a Video Demo of their inline form validation that performed best in tests.

Note for a form with a large number of optional (or only optional) inputs, showing successful validation may not be helpful.

Improve this answer
8

Due to "Change Blindness" it is useful to have that icon.

Improve this answer
1
  • 1
    Here's a Wikipedia article about the concept of change blindess: en.wikipedia.org/wiki/Change_blindness. It is defined as, "in visual perception...the inability to detect changes in objects or scenes being viewed."
    – magzalez
    May 16, 2012 at 14:10
1

Their are chances that people do not read in hurry about the error messages. therefore, icon helps to grab their attention quicker, especially in validations where the all error messages appear in a single line on top. Your example shows multi step of error display in which case it might not be necessary.

Apart from that i do not think it would effect UI in any way.

Improve this answer
1

While designing the UI for a system, I had the similar problem but ultimately I decided to go with the Icons. Some people are color blind and believe it or not but they really wouldn't notice it without icons until they are doing it with great concentration. Even if they are not colorblind, many people really don't want to spend their time on filling out forms. So they simply scroll down hit submit and then when it didn't submit they get frustrated and start looking for errors. Using Icons would bring to their notice the error they made as soon as they fill it out (Live Validation) or save the time for searching for them after hitting submit.

Improve this answer

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.