Web Form Optimisation & Best Practice (Part 2/4): Mandatory Fields & Form Validation

Validation

In part one of the web form optimisation series we looked at field types and how to use them, but how do we ensure users know what’s expected of them?

In this article we’ll explore how validation, microcopy and mandatory fields can do just that.

1. Validation

A large source of form-filling frustration emerges when submitting incorrect information. When form validation does not make it clear what the user has done wrong it can become irritating to search back through the form and find the mistake. There are two very simple ways of presenting form errors that will vastly improve user experience.

validation-1

The first method is to show instructions that appear after the submit button has been pressed, describing which fields are incorrectly filled or empty and what action needs to be taken. To supplement this, the relevant fields in the form should also be clearly highlighted to make them easier to find.

Alternatively, you can use instantaneous in-line form validation. This type of validation lets the user know if they have correctly or incorrectly filled out each field as they move down the form, meaning that when they submit the form there are no surprises. A good example of this can be seen on the Autoglass website.

validation-2

On long forms, it’s worth using both types of validation to allow users to easily find any fields they may have missed with the in-line validation.

2. In-line Hints and Tips

We’ve talked about how validation can indicate when a user has done something wrong, allowing them to easily find and correct their mistake, one thing to also consider is how you can prevent mistakes before they happen.

As we mentioned in part one of the series Standard Form Elements, it’s important to ensure that the user knows exactly what is expected of them, to avoid frustration and in turn lost conversions.

One way of doing this is to use data entry instructions alongside relevant form fields. A great example of this type of microcopy is MailChimp’s password creation field:

hints-1

By clearly laying out the password requirements, users know what they need to include and are less likely to be surprised by error messaging. This should save users time and frustration.

Another more basic example could be to include some comfort messaging alongside fields. Users are often reluctant to input phone numbers into forms; therefore, adding a simple message describing what the phone number will be used for, such as ‘Your phone number will only be used if we have a question about your order’ is generally a good idea. Comfort messaging can help alleviate the concerns of more security conscious users and make them more likely to fill out fields and complete your form.

Writing well-constructed copy for your form can play an important role. The cardinal rules for good in-line hints (and validation copy) are to:

  1. Be clear and concise. Instructions need to be easy to understand and quick to scan.
  2. Use positive and friendly messaging where possible. This is especially relevant for form validation, as users can feel defeated by cold error messaging.

For more tips on using and writing microcopy see Formisimo’s article on Inspiring Microcopy You Should Steal For Your Form.

3. Mandatory Fields

Mandatory fields are a hot topic of debate amongst the UX design community. One thing everyone seems to agree on is that optional fields should be kept to a minimum. In the name of keeping your form as short as possible (and therefore as little effort to fill in as possible), the general consensus is that one should question whether any optional field is actually necessary and if it’s not, remove it.

The main cause for debate, however, seems to mainly centre around how optional or mandatory fields should be marked.

You will probably have seen fields accompanied by an asterisk at some point, as this seems to have become a semi-traditional way of marking required fields. However, many UX professionals would argue that it’s more useful to mark optional fields instead.

Marking optional fields using the word ‘optional’ in brackets should reduce clutter from the form as there are likely to be fewer optional fields than mandatory. Another great way of separating optional fields (as well as labelling them ‘optional’) can be to show the field label in a lighter font colour or less bold than the mandatory fields. This adds another visual cue that allows users to very quickly separate field types and save valuable time.

mandatory-1

Another plus of not using asterisks is that you will no longer require a legend stating that ‘fields marked with a * are mandatory’, which will give you marginally more space on the page.

The asterisk has started to become a widely recognised symbol for mandatory fields, so it could be argued that this is now part of a visual language that is widely understood by users. However, it’s important to question visual conventions every now and then; just because something is widely used doesn’t necessarily mean it’s best practice and I think this is a prime example of that.

These are just a few ways you can help your users to fill out your forms; you can find additional reading in the links below.

Keep your eyes peeled for part three in the series where we will be discussing best practice for mobile forms.

Additional reading:

conversionxl.com/form-validation

formulate.com.au/blog/required-versus-optional-fields-new-standard

leemunroe.com/required-fields

formisimo.com/blog/inspiring-microcopy-in-forms-you-should-steal