1

If I am designing a form, how do I incorporate error messages during live inline validation?

Should I leave enough white space between input fields from the beginning to accommodate such error messages and not move any elements or is it ok to put original elements closer together, but move some for example a little bit down the page to "insert" error messages when they are needed?

Improve this question

2 Answers 2

Reset to default
1

I agree with @Pectoralis, leave enough white space.

Also, if youre not already doing so, maybe look at making the error UI prominent enough for users to notice it. Some examples; outline the field in red, put an '!' icon at the start of the message, look at the colour of the message itself, place it in a faint lightly coloured box, place a message above a disabled submit/OK button indicating errors, things like those. This will make it alot more noticeable and reduce errors or missed fields.

Improve this answer
0

Generally there are two ways to show data validation in a form.

  • Within the input box itself:

enter image description here

  • Directly below the input box (or to the side if you have the room): enter image description here

The idea is to provide instant feedback to the user so they don't get to the end of your form then have to scroll back up to find their mistakes, instead, they are notified right away and they can make the correction.

Improve this answer
3
  • 1
    I am not sure what your answer has to do with my question. I asked whether I should leave white space in the form vs moving elements according to showing error messages, not about the idea that stands behind the error messages in the first place.
    – Ola Osinska
    May 15, 2018 at 9:46
  • 1
    I've answered by helping you understand why you should leave some space rather than a 'yes' as that's a bit blunt and not particularly helpful for anyone else reading this thread.
    – sclarke
    May 15, 2018 at 9:48
  • 1
    Agreed, @sclarke has only given you additional food for thought, context and rationale behind his answer to the question stated in the first line of your post which in turn helps cover the second part. Anyone can answer yes or no, but you need to know WHY they gave that answer. If anything else so you can defend your actions if questioned, you have the rationale to back it up.
    – UIO
    May 15, 2018 at 10:26

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.