1

I'm creating a UI kit and I want to create design standards which are user-friendly. With specific regards to form validation, I've researched Wroblewski who says that errors should have top placement, with a visual contrast. What are the problems with my current design? Please see below for my wireframe and comments:

Thanks![Form Validation for input boxes

Improve this question

2 Answers 2

Reset to default
1

I am not sure I agree with putting the error above the field if your label is on top. Our standard placement is label on top, error/validation message below if there is one, with the red border. I agree that you don't necessarily need any approval message (certainly not below the field - MAYBE a check mark to one side if you feel visual verification is needed beyond the lack of an error state):

enter image description here

Improve this answer
0

I would say:

Go with Wroblewski and put error above. Use of colour (red) to give addition weight to the message good (but still makes it accessible as it is not the only indication of an error).

Think about avoiding placeholder text if you can.

Probably no need to say something is approved? The lack of error may be enough to indicate this.

Probably no need for the addition X on the error. There is enough visual contrast without it (maybe?)

Personally I like the text label above the edit box and the clean grouping (good use of negative space) between the questions.

Improve this answer
4
  • I can think of no good reason to leave placeholder text? Obviously it serves as a guide and shouldn't confuse a user...however placeholder text gives supplementary information.
    – Jonah McLachlan
    Sep 1, 2016 at 10:25
  • Say a user clicks the field and then forgets what they need to put in...placeholder text is a good remainder?
    – Jonah McLachlan
    Sep 1, 2016 at 10:25
  • You may be right. In my experience the need for a placeholder usually indicates something else is wrong. There is also an argument that the inside of the input box is the users territory and putting something in there can cause more harm than good - see nngroup.com/articles/form-design-placeholders
    – Jonny
    Sep 1, 2016 at 10:56
  • That's very true! Thanks for the link. There's so many things to remember. But you're right: s3.amazonaws.com/media.nngroup.com/media/editor/2014/05/03/… This is the best solution. Thanks
    – Jonah McLachlan
    Sep 1, 2016 at 16:04

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.