Website Optimization Essential: Web Form Design (Pt. 2)

Required Form Fields

Before we dive into the details of required form fields, we would like to invite you to read our Web Form Design Part 1 if you missed it. It’ll teach you a thing or two about labels and how they influence completion time. Now, required form fields are most useful when there are lots of fields but very few are required. They enable users to quickly scan the form to see what fields need to be filled in. The opposite of this is referred to as optional fields, or fields that aren’t required. It’s useful to note optional fields when there are very few optional fields in the form. Remember, there really isn’t a need to note required or optional fields if all of your fields are required. Here’s are some examples of what the two look like:

Best Practice - Try to avoid optional fields unless most of the fields are required. If most of the fields are optional, then indicate required fields. The “required” text is best, but the asterisk (*) often works. Lastly, you should associate these indicators with the labels of the form.

Form Field Length

The lengths of your fields provide valuable affordances for users. You should ensure that form field lengths will provide enough space for inputs; random field lengths may add visual noise to a form. Here are some great examples:

--

Best Practice - When possible, use field length as an affordance; otherwise, consider a consistent length that provides enough room for inputs.

Help and Tips in Forms

Sometimes you will find that your forms might be confusing to some, especially if the process is a little longer than usual. Using help and tips in your forms will help users when:

• Asking for unfamiliar data.
• They question the data that is being processed.
• There are recommended ways of providing data.
• Certain data requests are optional.

You should only use help and tips when absolutely necessary because they can quickly overwhelm a form if overused. In these cases, you may want to consider a dynamic solution like:

• Automatic inline exposure.
• User activated inline exposure.
• User activated section exposure.

Example of Help Text:

Example of Lots of Help/Tips:

Example of Dynamic Help/Tips: