Best way to integrate validation errors and hints into web form

Question

I'm creating a web form and have followed the best practices laid out here and on other UX sites so far.

The one decision I still have to make is regarding the display of error messages and input hints. This will need to work on mobiles (width 320px) as well as desktops/laptops/tablets etc.

Error messages are displayed alongside/beneath the input field as are hints. Again I've already decided that if an error is displayed, it will override any hint because hints are purely related to the nature of the content which is being entered.

However I have the opportunity to reserve space for the error/hint (beneath the input), which will lead to a slightly longer form, or move the form down as and when an error occurs. As validation is done both on submit and on input change using javascript, exiting an input field will cause the form to adjust.

Of course, if I decide to reserve space as opposed to creating space dynamically then errors will need supressing to fit within the given space but this is do-able in this case.

It is this movement that I'm concerned about - fixed or dynamic form length, or am I just worrying about something that doesn't need worrying about?

Thanks in advance.

Answer 1

Forms are always tricky. You don't want them to be too long, because users hate long forms. In a e-commerce checkout procedure a long registration form can scare of 40% of your users (personal example). You also want the form to be clear enough to prevent frustration with your users. And most of all, you want the users to fly through your form in as little as time as possible.

Here are some pointers that I learned to be good practice:

Clear and visible labels
Make sure it's always clear to the user what they have to fill in. There is a trend where input fields only have the placeholder to tell the user what they have to fill in. The problem is that placeholders disappear when the input field gets active. When users get distracted they might forget what they have to fill in (I know I get that sometimes). So make sure to use labels. People have gotten creative with labels that look like placeholders and shift place when the input gets active.

Placeholders
Placeholders can be very effective however when used in combination with labels. In your case their great for showing hints. Give an example of the input like [email protected] for email addresses or 03-13-2014 for dates (using mm-dd-yyyy is bad UX since a lot of non tech savvy people won't understand this).

Errors
Give clear errors at the right place. It seems you're already doing this correctly: you're showing the error messages beneath the input fields the error occurred at.
Make the errors visible. You could change the border of the input field to red. Make it shake briefly or attract attention in an other way with a red color.
Make the error messages understandable. Using "An error has occured" is a dead sin (not literally of course). "Your password is too short, it has to be at least 8 characters long" is an example of a good error message.
The placement of this error message depends on the room you have available. It might fit between two inputs without moving the other inputs down. It can be on the right side or even the left.

Validation
Validating input when the input changes, before users click submit, like you already do is great. Users hate it when they click submit and have to find out they got something wrong and have to scroll up again. Validating short after the input or during the input will help the user fill in the form correctly, faster.