Success and error message placement and colors

Question

I'm working on a responsive landing page users arrive on after clicking on an online display ad for the spa chain I work for.

Currently I validate the fields on blur. If the input is valid on blur, nothing happens. If the input is invalid, the field changes from a grey outline and white background to a red outline and pink background. An error message also appears right below the input.

On submit, if there are errors, the same validation occurs, but I also list the errors above the form. This list of errors has the same pink background and red outline as my error fields. On a successful submit, a success message appears above the form with a light green background and green outline. Should the errors list be different colors somehow than my errors on the form?

My question is, should the list of errors appear on blur as well as the error below the input? Since I have the error below the input, should I even bother with the list at the top to show errors as well? If I should keep the list of errors, should it even be at the top of the form? Or maybe below it? Between the submit button and form? After the submit? I feel like the shorter the form appears the better the conversion rates.

After a successful submit, I show the success message at the top, and clear a fields. Should the success be at the top or bottom? Should I clear a fields, or should I clear the form completly and not show any fields and just show the success message?

Thanks!

Answer 1

You do not need the list of error and you already know why : since [the user has] the error below the input. Exactly.

You feel right the shorter the form appears the better the conversion rates simply because nobody likes forms and especially not long forms (long meaning lots of input).

That said, the success feedback does not have to be on the page: you can link to a new page that says the user did great and tells her what to do next for instance.

If you feel that it should be on the same page: the feedback has to be close to the button (bottom or right side because of English sens of reading), it might even be the button itself that changes.

If you show the form you DO NOT want to clear the fields since the user might think everything is gone "somewhere".

---

Try to empathize and stop thinking about the conversion rate and try to think as a user. What is this form? Why should I answer those personal questions? Did I answered well? What is happening now? Why this mistake? Is it me or the website that does not work?

And remember it is never the user's fault, only the system and the interface have to be blamed. If the user cannot use it: it does not work.