1

I've seen a lot of tips on good error states, but I haven't seen much on best practices for when the error state field in on focus. Here is an example of a sign up form with multiple errors (CapitalOne Credit Wise). If a user tabs to or clicks on one of the error fields, the blue on focus state seems to appear behind the red error state. I would imagine that this is hard to detect for some types of visual impairments.

Does anyone know of research or best practices regarding the on focus state of an error field?

CapitalOne Credit Wise Sign Up Form

1

I don't know specific research about how to visualize active input field element in an error state. The academic literature about web form filling is not that much according to my knowledge. Specific cases like this are not researched much. However, when there are more than 4 input forms I suggest highlighting the active field by coloring its background. This way the errors in all forms are displayed but you can easily distinguish the active form field. See the image:

Highlighting active input field

1

Consider if you really need to style your text input box, which will disrupt and conceal subtile states - like focus.

If you are conservative with the use of colors in your form/page, then a red error-label will be enough to bring the users attention to that something is wrong.

enter image description here

0

Here is the article on smash magazine, you will get better idea. Checkout the below link

https://www.smashingmagazine.com/2009/07/web-form-validation-best-practices-and-tutorials/

2
  • Please don’t add just a link as answer to a question. If the link breaks, the answer you provided will not be useful for future visitors. Provide an answer of your own and use the link as reference. If needed, you can block quote the content from your link. More information is found in our help center, especially How do I write a good answer Jun 14 '16 at 12:28
  • 1
    @BennySkogberg thanks for the info, now onwards I will follow Jun 14 '16 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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