A sign of a good online form might be that a user completes it so quickly and with such ease that he or she may not even notice it. According to an article on UX Planet, designing forms can be reduced to seven main aspects: Structure, Input, Label, Assistance, Action, Validation, and Feedback. Treating each of these aspects with care will result in a form that is intuitive and flawless for users.
The structure is the basic anatomy of the form—how many fields, how they are arranged on the page, and the order in which the fields appear. It’s important to limit the number of fields you use to make the experience as painless as possible for the user. For example, if you never plan on using a customer’s phone number, middle name, title, etc., these fields can be omitted. Many designers advise against multiple columns on a form, as it requires a bit more effort to read left to right than up to down. Lastly, grouping related fields together can help the form feel much easier to complete. You can find free form templates on many websites and can be a useful starting point for design.
For each field can be designated as mandatory or optional, and it is common practice to use an asterisk to denote the mandatory fields. It actually can make the experience easier for a user if you simply do away with the optional fields, removing the clutter of the asterisks from the page. Consider adding functions to input fields like a cursor that will appear in the first field when the page loads, or an auto-tab function that moves the cursor to the next field when the right number of characters have been inputted.
The label is the term used to describe the text adjacent to the input field, or perhaps greyed out inside the field. Labels should be as few words as possible to expedite the reading process. The UX Planet guide uses Amazon as an example—in the early days, Amazon opted for labels like “My name is: ” and “My e-mail address is:” thinking that this would create a more user-friendly interface, but they learned the opposite was true, and they quickly dropped the extra text. In 2006, Matteo Penzo did a study on the placement of labels, and found that the placing labels just above the field reduces the cognitive workload of matching the label to the field the most, while placing it to left-aligned to the left of the field was the least efficient. Right-aligned to the left of the field has results similar to placing the label above the field.
Action refers to the button the user must click to submit or cancel their form. Although this sounds like a straightforward step, this is a great opportunity to encourage completion. Increasing the size, changing the color, using the button function rather than a hyper link, adding 3-D effects, and more all can affect the likelihood that a user will click submit rather than cancel. Be sure to use more specific language than simply “submit”! Consider “purchase” or “create my account” or “Sign me up!”
Feedback refers to the page or message a user will receive after a successful completion of the form. Depending on the form, it’s important to show, first, visually, that they have in fact, clicked the button. This can be as simple as having the button change colors after being clicked, and the text shifting to “Processing.” Then, a confirmation page, or a message saying a confirmation has been sent to your e-mail address is appropriate.
Assistance refers to any additional text or function intended to help the user understand what must be inputted into the field. Usually this takes the form of an example to the right of the input field. For example, after a name field it might say “John Doe” and after an address field it might say “123 S. Main St.” Often, to avoid unnecessary text to burden the user’s eyes, there will simply be a little question mark next to a field, that, once the user hovers over it, will provide more details on how to fill out the field. These steps can be helpful for forms that may require complicated or precise input values.
Validation refers to any communication to the user whether they have successfully completed a particular field—some use little green and red checkmarks, some actually set an error message for each field explaining what was left out or missing or formatted incorrectly, and some require that a field be completed correctly before allowing the user to click on the next field.