Review usage of "optional" vs "required" in forms

[yaili]

Following the discussion on this issue we thought it would be good to investigate the usability and accessibility concerns around indicating optional vs required fields in forms.

Vanilla and ubuntu.com has been indicating optional, whereas MAAS has recently agreed to do the opposite.

[matthewpaulthomas]

This issue overlaps with design for…

• Labels: If a required/optional indicator is not part of the label, there needs to be some other way of making the indicator sound as if it is associated with the control. (Simply Accessible provides an example of how absolute positioning could visually separate the indicator from the label while keeping it within the <label> element. However, it assumes that all required fields — and all other required controls — are the same width.)

• Captions: If the required/optional indicator is part of the caption, does this mean every required/optional field must have a caption? …and every required/optional checkbox? That would take up a lot more space.

• Error states: If “(Required)” was always spelled out, the unfilled error state could involve simply highlighting that already-present text, rather than adding more text.

• Readability: There’s disagreement about the recognizability of field-required symbols, such as red asterisks. And even if they’re recognizable to sighted users, they may be less so to someone using a screenreader. Fortunately, controls can also have the required attribute which is understood by screenreaders.

• Validation: The required HTML attribute has two other benefits. First, it lets the browser do some of the on-submit validation for you (“Please fill out this field.”). Second, it can be used as a CSS selector: input[required], textarea[required] {outline: solid blue; outline-width: 0 0 0 3px}. Doing the opposite — styling controls lacking the attribute as optional — would be risky because it would require authors to remember to use the required attribute for every single required control.

[kwm14]

It's been over a year since this issue was reported, our brochure sites and applications have evolved since then so I want to do another audit to see what we're doing 😄 identify a style to add to Vanilla so that we're consistent across our products 👍

Ubuntu website

• Currently using asterix (*) on form labels

Juju GUI

• Currently using (optional) on form labels
• Using #666 grey to differentiate from form label

MAAS application

• Currently using a mix of (optional) and (required) on placeholder text and form label
• MAAS is a good example as it uses 90% forms throughout the app

[kwm14]

Review

As you can see from examples in our applications and sites we're quite inconsistent with variations of use:

• 'Asterix' added to end of form label
• 'Required' added to end of form label
• 'Optional' added to end of placeholder text inside form

We have 3 solutions so it's up to us to decide which is the better one to implement and will work for all use-cases. I will look at other example sites/applications to see other options in the field 👍

[matthewpaulthomas]

• Currently using asterix (*) on form labels

• 'Asterix' added to end of form label

It does increase the attractiveness of the form, but making an Asterix recognisable takes up a lot of space:

Meanwhile, in October, Baymard rewrote their article on this topic: “E-Commerce Checkouts Need to Mark Both Required and Optional Fields Explicitly (Only 14% Do So)”. The highlights:

• In their test of “60 top e-commerce sites”, on the “37% of sites [that] mark only optional fields”, “32% of users during testing had a validation error because they did not complete a required field.”
• “Users looking elsewhere in the form to deduce for themselves what a nonmarked field might mean will only have relatively few optional fields to help them detect the pattern for how fields are marked.”
• It’s harder to infer the reverse error, but on the “42% of sites [that] mark only required fields”, “the completion rate of an optional phone number field was almost identical to sites where it was required”, and “a smaller group of subjects completely mistook optional fields as being required”.
• “By explicitly denoting both optional and required fields, users aren’t forced to infer anything and don’t have to look backwards at prior form fields — but can instead stay focused on just the one form field they are filling out.”
• “During testing it was also verified that using an asterisk was sufficient to indicate required fields when used on steps where the optional fields were marked as ‘Optional’ after or close to the field label.”

Now, that research was just on e-commerce checkouts, and we have few of those. Maybe we don’t need a pattern for this — maybe it’s form-specific — but if we do, it’s only necessary beyond some threshold. We’d never need it for a search form, for example, or a sign-in form, or a single-field subscription form.

[kwm14]

It does increase the attractiveness of the form, but making an Asterix recognisable takes up a lot of space:

Haha @matthewpaulthomas love it! We can propose this upstream to Vanilla 😉

• In their test of “60 top e-commerce sites”, on the “37% of sites [that] mark only optional fields”, “32% of users during testing had a validation error because they did not complete a required field.”

That's an interesting highlight

• “By explicitly denoting both optional and required fields, users aren’t forced to infer anything and don’t have to look backwards at prior form fields — but can instead stay focused on just the one form field they are filling out.”

Another interesting highlight especially using optional and required fields, for MAAS these are both needed dependant on your configuration.

Maybe we don’t need a pattern for this — maybe it’s form-specific

I agree with you here too and it makes me question which style to move forward with:

• An asterisk is more obvious, but not to everyone, there are always some who do not understand
• Less visual noise on your form makes it more readable and therefore faster to complete

[kwm14]

Examples

Looking at styling of required/optional in forms on other sites/applications.

Ant Design

• coloured asterix
• positioned at the beginning of the form label

Material Design

• asterix added to end of form label
• required help text under form field

Mozilla

• required help text in-between form label and field

Salesforce

• coloured asterix
• required triggered as an error notification

Sky

• coloured asterix
• positioned at the end of the form label

[kwm14]

Next steps

• We've reviewed what is currently implemented across our sites/applications
• Discussed options
• Investigated usage styles in the field
• Next steps to create a demo proposal so we can see some options in action/situ