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.

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.

share|improve this question
    
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 '12 at 8:12

5 Answers 5

up vote 24 down vote accepted

The icon is an extra visual cue.

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 a tooltip.

share|improve this answer
    
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 '12 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 '12 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 '12 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 '12 at 22:24

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer
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 '12 at 14:10

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.