Ultimate Form UX - 7 steps to design forms that users love

While almost every website nowadays has some sort of forms on their site, designing and delivering great form user experience can be challenging even for senior designers and developers. In this article, we’ll go through common online form design fundamentals with references to latest research and standards in the field, helping you to increase your form conversion and create the ultimate form experience for your users.

1 Password field

Toggling visibility instead of repeating

While some sites still tend to ask password multiple times, it is better to just have one password field with an option to toggle visibility. Repeating a password does not only waste a user's valuable time but also makes users less confident. According to NNGroup password masking has proven to be a particularly nasty usability problem on mobile devices, where typos are common. The more uncertain users feel about typing passwords, the more likely they are to copy/paste or use simpler passwords, which decreases the level of security.

Display password requirements clearly

Not displaying the password requirements for the users beforehand can lead into multiple errors and drop offs during the sign up process. As NNGroup puts it, users are essentially being asked to play a game where the rulebook is hidden which is neither fun, nor fair. A better approach is to display the requirements in plain text next to the password field before or during the user enters the field. For sensitive password fields, it is recommended that the state of the requirements will be updated as the user is typing the password.

2 Input Labels

Separate label text and input

While using placeholder text as label text might seem an innocent act of simplifying the UI, using placeholders can do more harm than good. NNGroup’s eye-tracking studies have shown that users’ eyes are drawn to empty fields and therefore users can overlook fields which are using placeholder text.

Another issue with placeholder label text is browsers’ autocomplete feature: while the user fills in the form and happens to use autofill, the user has no way to check the autofilled content was actually filled into the right fields without deleting the content first. By default, using HTML label and input yields better autocomplete results and is more screen reader friendly than using placeholder text as a field label.

Mark required fields

If your form includes required and non required fields, differentiate them from each other visually. Many websites have a common convention to mark required fields with * sign or “required” label and according to Jakob’s law users prefer your site to work the same way for which users are already accustomed. If you consider using some other method to mark required fields, it is recommended to set up user testing in the early phases of the process to see if your target group is comfortable with your design language.

3 Multiple selection

Choose element based on number of options

If you have relatively low amount of options to choose from, use radio buttons or checkboxes rather than dropdowns as they require less cognitive load from the user and are also easier to use on smaller screens.

No one said selection menus need to be boring! You can spice up your UI by adding illustrated tiles and use them together with radio buttons and checkboxes. Text supported with related visual icons or illustrations can make forms more interesting for users and make users more likely to finish the form.

Radio button vs. Checkbox

Use radio buttons, if the user must select only one of the options and use checkboxes if users can select many options. By default, users associate round shape for radio buttons and square shape for checkboxes.

4 Form Validation

Form & field level validation

Instead of validating form on submit only, validate each field after it is filled when the user has the entered value still fresh in memory. This also avoids users scrolling up and down the form. Note that you should still validate the form as a whole too to make sure all required fields are filled.

Untouched vs. touched

By default, form fields are untouched meaning the user has not focused on the fields and the value is empty. When user focuses the field, form field becomes touched, meaning that errors will now be displayed if field data is invalid. Do not display errors on fields user has not touched yet.

onBlur vs. onChange

By default, form fields should be validated when users focus out (onBlur) of the field to avoid visual clutter of error messages while typing. However, in some sensitive fields such as password field, instant feedback can be preferred and therefore validation is usually done on every keystroke (onChange).

Enable submit button

Some forms disable submit buttons which is better than no validation but there are couple of issues with this:

a) Users might not be able to see immediately which fields are invalid and therefore get confused why the button is disabled in the first place.

b) Disabled button can be easily hacked in the UI by enabling the button in browser HTML and if no additional validation is done on the form level, users can end up sending invalid data to database

These can make users confused thinking the whole form is broken, which will cause drop-offs. Better option is to keep the submit button always enabled and do validation on field level, as well as on form level. Some form libraries like VeeValidate for Vue.js even allow you to scroll into the first invalid field so that user’s will directly see if they have not touched some of the fields for example and therefore the error message on field level was not displayed before submission.

5 Form Structure

Long Forms into Steps

If you have a longer form with content that is not tightly related together, it is recommended to split the form into sections. This reduces user's cognitive load and they can focus only on a section at the time which makes the form look shorter than fitting all fields into one page.

Spacing

Spacing is a powerful tool to make users subconsciously group content together. According to Gestalt principle's Law of Proximity elements that are close to each other are perceived to be related when compared with elements that are separate from each other. This applies for example white spacing between the field labels and fields as well as groups of fields.

Field length

For fields that have a specific expectedd lengths, you can use field length as an indication how long the value should be. A Baymard Institute usability study found that if a field is too long or too short, users start to wonder if they have understood the label correctly. This applies especially to fields with unusual data or a technical label like CVV (Card Verification Code).

Avoid Typing

Typing especially on mobile devices can be tedious and therefore if there is a meaningful way to avoid typing, you should prefer that. For example when selecting a range, you can use sliders instead of typing the values. However, note that this works best for fewer options or rough filters. If your users should select a specific values, it might be a good idea to combine the input fields with a slider together.

Descriptive CTA

Prefer using descriptive call-to-action (CTA) buttons such as “Sign up”, “Join for free” or “Buy now” instead of generic “Submit”. This informs users clearly what will happen when the form is being submitted as well as works as a great opportunity to encourage users to finish the form submission.

6 Form Accessibility

Color blindness

Colour blindness affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. The most common form of colour blindness is known as red/green colour blindness and most colour blind people have one type of this. Below you can see generated images from Coblis Color Blindess Simulator which shows how important it is not to just rely on colors when designing user interfaces.

Better approach is to support color feedback with icons and text to make sure the message can be understood also by people with color vision deficiencies and consider creating alternative Accessible palettes using tools as Adobe Color.

Contrast

Having high contrast between foreground and background is essential not only for people with vision deficiencies but also for everyone who is using your form on a sunnny day on a reflecting mobile screen for instance. You can check color contrast easily online using for example WebAIM Contrast Checker or Material Design's Color Tool.

Accessible structure and language

For field labels Use the HTML <label> and aria-label attribute to identify each form control. For page titles use descriptive headers that clearly describe the page content.

According to W3 Web Accessibility Initiative Using simple language, asking only necessary questions and keeping the structure clean can help a lot people with next disabilities:

• People with cognitive disabilities can better understand the form and how to complete it.

• People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they have to complete.

• People using screen readers can identify and understand form controls more easily because they are associated with labels other structural elements.

7 Legal Requirements

Many forms include information related to compliance such as signing up for a mailing list or agreeing with terms and conditions. The legal requirements can vary based on the industry and location. If you want to play it safe, as a rule of thumb you should leave the agreement checkbox unchecked by default, even if it would be a required field. This makes sure the user has to actively agree the terms and can avoid potential legal issues in future.

If your business is based in the European Union (EU), or you process the personal data of individuals in the EU, the General Data Protection Regulation (GDPR) must be taken into account when collecting user data. This also means you have to explain how you plan to use the user's personal data. You have to also check that the popups you are using are GDPR compliant. The best way to ensure your forms fulfill the compliance requirements is to collaborate with the legal department or consultant. To get started, many form providers such as Mailchimp have created GDPR compliant fields and form examples to get you started with.