Amber outlined required field

Question

As part of a system I'm currently working on users will need to fill out some large (40+ fields) forms, they will not always fill out all fields but are required to fill out a handful of core fields in order to insert the record. The fields, due to being laid out in category groups, are dotted around.

I was considering a traffic light colour based outline system whereby the fields will be outlined in amber if they're required and live validation will convert the outline to green when it's completed as required. I figured red would be no good as red outlines are used when errors are present in the content.

My questions are:

1) Will the amber outline make the users feel the field is "slightly incorrect" like they've made some mistake?

2) Am I making a mistake not using the familiar red asterisk?

3) Live validation will tell the user that the field has been filled and will turn the border green - shall I have content validation here? Or do this at the end with the rest of the form (on submit) - if I validate these fields on the fly is it bad practice to validate the rest of the fields at the end?

Answer 1

I think HeyHudson presents a good range of valid points. And in addition to this I would like to recommend a presentation by Luke Wroblewski on Form design. He discusses the issues to keep in mind when designing an online form and also which triggers to use to enforce user interaction in the right way. He also gives good pointers on how to provide good feedback when everything is ok contra when something is wrong in the form. Also his presentations are very entertaining as well as you learn best practices from listening/looking at them. All fun all way round!

Answer 2

From an accessibility POV, it's a bad idea to rely solely on colour to convey anything due to issues around types of colour blindness. I think that's why the asterik has become such a convention as it doesn't rely on this. Also, most live validation forms I've come across will put a tick/cross next to the field, again negating the reliance on colour alone.

Answer 3

From personal experience orange is a good color to indicate objects where actions are necessary. You will also see a lot of Call to action buttons which are orange (as long as the it fits the final color design). So yes, orange will be a good color to provoke an action. But be sure to use this color with the same purpose in your entire design.

To answer your second question, you are not making a mistake. Although it is common to show a red asterisk next to the required fields, this was usually the only indication. Now that you have an orange action-provoking color around your input fields I think the asterisk can be left out.

And finally your third question. When I see an input box turning green after giving input I expect it to be verified and succesful. When I press submit and learn that my input was not correct I will be frustrated. Provide live validation or no validation at all. Do not leave the user somewhere in between.