Our instinctive dislike for forms originates from having to fill out seemingly endless paper forms, many of which require a Master’s degree in Form Content Filling to understand and fill out correctly the first time.
Unfortunately, in the offline world, getting some answer wrong would mean having to fill out the form in full and sending it again, usually days apart.
Online, we have the opportunity to not only resubmit forms countless times, but also as web developers, we can provide people with much more relevant feedback at various stages of using a web form.
Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts. And in some cases, we can make forms that people might even enjoy filling out.
Hints in Web Forms
Validation is frequently used to provide users with a response on what information they should have entered when an error occurs.
By using a number of helpful hints, we can provide much of this information before they even enter their name. By showing more information before a user submits a form, we can reduce the chance of an error happening.
Information available prior to submission can come in three forms:
Labels: These should quickly describe what information should be entered into an input field—this could be their username, password, email, etc.
Required or optional information: an input field should be denoted as required or optional, usually by an asterisk (*) or any cues or text-based hints that tell the form user they can’t leave a field blank.
Help hints: Help hints function to give the user additional tips on how to format their information. For example, a help hint might tell a user what the password requirements are (as shown below).
Alignment of Labels
Of course, all information should be placed in such a way that it is clearly associated to a given input field, but the alignment of a label can actually affect not only a successful submission, but also the speed of completion.
The alignment of a label is typically either left, right or top; there are benefits and disadvantages to each alignment:
Top labels: Positioning a label at the top of input fields improves the association between the label and field, but does tend to give the impression of a longer form.
Right labels: Labels at the right of the input fields reduces the vertical space of the web form, and improves the association between the label and input. However, right labels can reduce the readability and scanability of web forms.
Left labels: Labels at the left of form fields can make for easier reading of the labels, and also makes the web form vertically shorter. However, it tends to affect the association of labels to inputs.
Choosing the alignment of labels in a form can depend on the type of web form you are creating, the available space you have for your web form and which of the disadvantages are of greater concern to you in the given situation.
Labels inside Inputs
Some forms will use placeholders to indicate suitable examples of information within an input field, but in some instances, when screen real estate is at a premium, developers will use labels within the input fields.
This doesn’t pose too many issues on shorter forms, but as the form grows, this becomes an issue. By using the label within the input, it means that once a user enters any data, the label disappears and cannot be referred back to when reviewing the form either before or after submission.
Hints within inputs should be used only where sufficient information still exists to indicate an input’s purpose or requirements after the user has entered their information and the original hint has disappeared.
One potential solution to the downsides of labels within inputs is using the sliding labels technique—proposed by CSSKarma—where the labels move to the side and remains visible when the user focuses and enters text into the fields. However, this technique still doesn’t solve space limitations. Leer más “Best Practices for Hints and Validation in Web Forms”