A few weeks ago, we published some research we did into mobile phone number formats. Like our earlier research into zebra striping, we were surprised how much interest these seemingly bland and innocuous topics attracted.
In a way we should perhaps have expected this. When it comes to forms, people are often very passionate about the details, such as whether or not to put colons at the end of field labels .
In this article we’re going to deep dive into another form design detail: mandatory versus optional fields. We’ll be looking at what the two different types of fields are, how they should be indicated, and indeed whether there is a true need for a distinction.
Mandatory fields must be filled in; optional fields are…well…optional!
Mandatory fields are questions that must be answered before the form can be submitted. Mandatory fields are also called “compulsory” or “required” fields.
The opposite of a mandatory field is an optional field. Optional fields are also sometimes called “voluntary” fields.
In electronic forms, particularly those on the web, you will often find a mix of both mandatory and optional fields. (Interestingly, such a distinction is typically not made with paper forms. We’re going to focus on electronic forms in this article.)
Examine the actual data need
Before we jump into how to implement mandatory and optional fields, let's step back a bit and examine what data we actually need.
For every question on your form, you need to think carefully about whether the data is required or just ‘nice to have’.
The temptation for form owners is to declare all questions as mandatory; otherwise, why would you even ask the question? Indeed we encourage form designers to remove a question altogether if the resulting data is not actually going to be used.
However, the situation is not always this black and white. It is useful to distinguish between data that is absolutely imperative — such as a property address when getting a home insurance quote — and other data that would be helpful to the business but is not necessary to successfully complete the task — such as finding out how the form-filler learnt about the home insurance offer in the first place.
In both cases the form owner would like to have the data and therefore include a question on the form. Yet most business owners would agree that they’d rather not lose a potential customer just because they forced them to answer the “how did you hear about us?” question. As such, this question should be optional, while the property address question should be mandatory.
Communicate the field type to prevent errors
Regardless of the mix of mandatory and optional fields on your form, it’s crucial that you communicate to the form-filler what types of fields you have, to prevent errors and minimise workload.
Specifically, knowing beforehand that a field is mandatory prevents validation errors on submit, in the case where some or all of these fields have not been answered. Similarly, knowing that a field is optional allows the form-filler to get through the process faster, should they so choose.
As the previous paragraph points out, the effectiveness of any kind of mandatory or optional field indicator is dependent on the form-filler knowing the type before they begin (helpful for all users, but particularly those using assistive devices). This means including a note at the start of the form, explaining what types of fields the form contains. Depending on the specific mix of field types (more on this below) this can also mean including indicators beside each field or question.
Use established standards to indicate field type
So how should you indicate, on your form, which fields are mandatory and which are optional?
A quick trip around the web will show that there are many ways to mark a field as mandatory (see Figure 1 below).
Anecdotal evidence suggests that the most common indicator is a red asterisk (*), as shown in Figure 2.
Some argue that this is not a good approach, because red is often used to communicate errors. We do not feel this is a sufficient argument for avoiding the red asterisk because the red asterisk seems to have become a de facto standard through frequent use, despite the commonalities with error messaging.
If you use a different kind of indicator, such as an orange flag or exclamation mark on a red background:
- the form-filler has to stop and decipher the icon (assuming they actually see and notice it); and
- there may be more chance of confusion with error messaging, where such indicators are often used.
Why the red asterisk works
The red asterisk is effective because it uses both colour and shape to communicate with the form-filler. In his book Web Form Design, Luke Wroblewski calls this feature double visual emphasis. This double emphasis means the marker really stands out for those form-fillers who do not have colour-deficient vision, yet is still detectable by those who do.
To date, we have not noticed an equivalent de facto standard for indicating optional fields. As such, we suggest using the words “Optional”, perhaps in parentheses.
What you communicate depends on the mix of field types
The mix of mandatory and optional fields in a form fits into one of the four categories shown in the following table. The table also describes what we recommend with respect to indicating field types, for each category.
Place the indicator to assist usability over scanning
Finally, once you have established which fields (if any) should be marked as mandatory or optional, consideration should be given to placement of those markers.
Definitely put the marker before the field
The marker should always come before the actual field, so that the form-filler knows the status of the question before they begin to answer it. Moreover, recent experiments, suggest that form-fillers are unlikely to see the indicator if it is placed at the end of the field.
Consider putting the marker before the field label
There is some debate about whether the marker should be placed at the beginning or the end of the field label. We suggest placing the indicator at the beginning of the field label, so that the form-filler knows whether they will have to answer the question before they even read it.
The counter argument — assuming that the field labels are flush right (see our previous article on alignment) — is that such placement doesn’t support scanning as nicely as putting the indicator at the end of the field label. Placing the marker at the end of the field label — i.e. just before the field itself — is better for scanning because all the markers will be vertically aligned. (Figure 2 above gives an example of field labels that are flush right with the mandatory field indicator coming after the label but before the field.)
Our response to this counter argument is that the primary task of the form-filler is to fill out the form, rather than scan it, and thus it is more important to support this sequential, reading-based movement.
Of course, if the field labels are flush left, the scanning counter argument does not apply, providing further support for placement of the indicator at the beginning of the field label.
Summary of recommendations
To summarise, we recommend:
- Carefully examining the data need to work out which questions should be mandatory, and which should be optional.
- Always including a note at the beginning of the form that explains what the situation is with regards to mandatory versus optional questions, in form-filler language.
- When there is a mix of mandatory and optional fields, putting a marker against whichever field type occurs least.
- Using a red asterisk (*) to indicate mandatory fields and the word “Optional” to indicate optional fields.
- Place the marker before the field itself and, ideally, at the beginning of the field label.
Note that there is plentiful support for indicating mandatory fields in HTML and CSS. In particular, best practice for the HTML underlying the form is to use the “required” attribute.