Design basics

In the first section, you learned how to build a basic form. This section is all about best practices. In this module, learn about user experience (UX), and why a well-implemented user interface (UI) can make a big difference.

Creating user-friendly interfaces

Filling out forms can be time-consuming and frustrating. It doesn't have to be. To guarantee a great UX, make sure the UI is intuitive. Ensure you deliver optimal form structure and graphic design (layout, spacing, font size and color), and logical UI (such as label wording and appropriate input types). Let's have a look at how you can improve your form and make it easy to use.

Labels

Do you remember what the <label> element is for? A label describes a form control. A visible and well-written label helps the user understand the purpose of a form control.

Use a label for every form control

Do you want to add a new form control to your form? Start by adding the label for the new field. This way, you don't forget to add it.

Adding labels first also helps you to focus on the form's goals–what data do I need here? Once this is clear, you can focus on helping the user enter data and complete the form.

Label wording

Say that you want to describe an email field. You could do so as follows:

<label for="email">Enter your email address</label>

Or you could describe it like this:

<label for="email">Email address</label>

Which description do you choose?

For our example, the wording 'Email address' is preferred, since short labels are easier to scan, reduce visual clutter, and help users to understand what data is needed faster.

Label position

With CSS, you can position a label on the top, bottom, left, and right of a form control. Where do you place it?

Research shows that best practice is to position the label above the form control, so the user can scan a form quickly and see which label belongs to which form control.

Designing forms

Good form design can significantly reduce form abandonment rates. Help users enter data by using the appropriate element and input type There are various form elements and input types you can choose from. To offer the best UX, use the most suitable element and input type for your use case. If the user should fill in multiple lines of text, use the <textarea> element. Where they need to accept your site's terms and conditions, use <input type="checkbox">.

You should also visually differentiate between different types of form controls. A button should look like a button. An input like an input. Make it easy for users to recognize the purpose of a form control. For example, If something looks like a link, clicking on it should open a new page, and not submit a form.

Help users navigate forms

An extravagant layout can be fun, but may get in the way of completing a form.

In particular, research shows that it's best to use only a single column. Users don't want to spend time searching where the next form control is. By using one column, there is only one direction to follow.

Help users interact with forms

To avoid accidental taps and clicks, and help users interact with your form, make your buttons big enough. The recommended tap target size of a button is at least 48px. You should also add enough spacing between form controls using the margin CSS property to help avoid accidental interactions.

The default size of form controls is too small to be really usable. You should increase the size by using padding and changing the default font-size.

You can define different sizes for different pointing devices, for example, a mouse, using the pointer CSS media feature.

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

Learn more about the pointer CSS media feature.

Show errors where they happen

To make it straightforward for users to find out which form control needs their attention, display error messages next to the form control they refer to. When displaying errors on form submission, make sure to navigate to the first invalid form control.

Make it clear to users what data to enter

Make sure users understand how to enter valid data. Do they need to enter at least eight characters for a password? Tell them.

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

Make it clear to users which fields are required

<label for="name">Name (required)</label>
<input name="name" id="name" required>

If a field is mandatory, make it obvious! The Anatomy of Accessible Forms explains alternatives for indicating required fields. If most fields in a form are required, it may be better to indicate optional fields.

How can you connect error messages to form controls to make them accessible for screen readers? You can learn about this in the next module.

Check your understanding

Test your knowledge of designing forms

Resources

• Create Amazing Forms
• Best Practices For Mobile Form Design
• Baymard Institute: E-Commerce UX Research
• Don't Make Me Think