2

When designing a form, should I design with enough space between the elements for potential errors?

So that when displaying error messages, the form elements below the error message do not shift, because there was enough space above to display any messages.

Visual examples: input movement on forms when error message

Thanks!

Improve this question
1

2 Answers 2

Reset to default
2

I would recommend looking at how someone like gov.uk handle errors on their forms. Adam Silver has written a great book on form design.

Here is an example of a great form error pattern that is tried and tested by the team at gov.uk

http://nostyle.herokuapp.com/examples/registration-form

I highly recommend this book: https://www.smashingmagazine.com/2018/10/form-design-patterns-release/

Improve this answer
1
  • 1
    Thanks. I was thinking it was a bad practice to have those movements in forms.
    – Laubr
    Jun 18, 2021 at 12:01
1

There is no need for that space. With a good animation you can signify that a message appears.

This is because messages can have more rows and showing the space will make your design messy.

Improve this answer
1
  • 1
    Do you mean using animation to reveal the error, so that the shift doesn't cause a jarring effect?
    – Izquierdo
    Jun 17, 2021 at 14:59

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