Marking both required and optional fields in the checkout is a controversial area of form usability.

In 2012 only 9% of sites explicitly marked both fields. In 2016 it was 14%. Preliminary results for 2018 show 39% of sites marking both fields.

This is despite the large-scale Cart & Checkout testing revealing that failing to explicitly mark both required and optional fields leads to unnecessary validation errors, user confusion over which fields they must complete, a slower checkout process, and even abandonments.

In this article from Baymard Institute’s benchmark study:

• Why optional fields are nearly always included in e-commerce checkout forms
• Why generic page-level statements (e.g., “All fields required”) should be avoided
• Why it’s problematic to only indicate optional fields
• Why both required and optional fields should be marked

Note: the findings shared in this article relate to e-commerce checkout forms and long account creation forms. Other forms, in particular short sign-up and contact forms, don’t seem to be affected anywhere nearly as much by the issues described and may therefore employ alternative designs.

Why Optional Fields Are Part of Almost Every Checkout

In the “real world” of e-commerce checkouts optional fields are simply a fact of life — 98% of sites in the benchmark have at least one optional field.

That’s not to say that the amount of form fields can’t be reduced — in fact, the study showed that most sites have nearly twice as as many form fields as they actually need.

The benchmark reveals that the number of form fields in a checkout is correlated with a site’s overall UX performance — the fewer form fields, the more likely a site will have a good overall UX performance (and vice versa).

That said, checkout forms aren’t created in a vacuum. While the best course of action for users may be to severely limit or eliminate optional fields, often business interests are given as much (or even more) say in what fields are included in the checkout.

These can include many optional fields depending on the business context — such as newsletters, address type, company name, delivery instructions, title, “Address line 2”, phone, coupon codes, gift certificates, order gifting, order comments, billing address, site-specific features, loyalty programs, PO numbers, etc.

The rest of this article will assume that the checkout flow is fully simplified, and any optional form fields are there for a very good reason.

Why Generic Page-Level Statements (e.g., “All Fields Required”) Should Be Avoided

Argos has a single generic statement at the top of the page: “Complete all fields unless they say ‘optional’”. Unfortunately, many users during testing overlooked these types of statements and would begin speculating whether some of the required fields were in fact optional. Obvious candidates on this page would be “Title” and “Mobile number”, which could reasonably be optional as not all e-commerce sites require these details.

While nearly all sites have optional fields at some point in checkout, many sites will have particular checkout steps where all fields are required. This frequently occurs, for example, at the Payment step, where often all payment fields must be completed.

In these instances, one may be tempted to simply indicate at the top of the page that “All fields are required”.

However, our testing shows that this doesn’t suffice, as some users inevitably end up overlooking the message.

When users fail to notice such “All fields are required” statements, they often begin to question if perhaps some of the fields are optional even at the “Payment” step during checkout, where they obviously know that some of the fields are required. In particular, users often question payment-validation related inputs such as billing phone, cardholder name, and billing zip code.

Why It’s Problematic to Mark Only Optional Fields

Benchmark reveals that 37% of sites mark only optional fields.

At L.L. Bean, 22% of users during testing tried to proceed without entering their email address for confirmation, as neither this field nor the email field were marked as required.

It may be tempting to reduce the visual noise in a form by only marking optional fields (or vice versa). However, when encountering forms where only the optional fields were marked, 32% of users during testing had a validation error because they did not complete a required field.

As most fields in a form will be required fields, only explicitly marking optional fields has the downside of it being relatively difficult to see which fields are optional.

This is particularly problematic for information that some users will be reluctant to provide, like their phone number or date of birth, as they will simply leave these required fields blank.

Is the phone number field required? When a field is unmarked some users will have to guess to figure out whether an unmarked field is required or optional. This is especially problematic on mobile, where users have little page overview.

In short: not marking required fields as “Required” or with an asterisk has been consistently observed to lead to an increase in form completion time and a high rate of needless validation errors.

What to Do Instead — Mark Both Required and Optional Fields

Not marking both optional and required fields makes it difficult for users to approach each form field as a separate task to either complete or skip. Consequently, users are much more likely to get bogged down in the form and (1) come to a complete stop and go backwards in the form to see what other fields have been marked as, or (2) guess what an unmarked field means and, therefore, encounter validation errors, leave important fields blank, or abandon out of frustration or confusion.

Therefore, rather than only marking optional fields, or only marking required fields (or, even worse, not marking any fields), both required and optional fields should be explicitly marked.

At Microsoft required fields are denoted with asterisks and optional fields with “(Optional)”. It’s extremely clear to users glancing at the form as a whole, as well as at the individual field level, which fields are required and which are optional.

Explicitly marking both required and optional fields provides users the information they need to quickly move through a form. 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.

Users are consequently able to progress more seamlessly through the entire form, field by field, as they don’t have to backtrack and scan previous fields to make sure they haven’t skipped a required field or filled out an optional field they on second thought prefer not to.

Conclusion

Many sites have misconceptions of the amount of knowledge users are bringing to their checkout processes.

While it might seem obvious to site designers that, for example, the phone field isn’t required on their site, but all the other payment fields are, this will by no means be obvious to the average user (because in fact 87% sites do require phone number during checkout).

Users simply have no way to “intuitively know” a particular site’s information requirements beforehand. They need to figure it out on a site-by-site basis for each and every form they fill out. This is why it’s necessary to indicate which fields are required and which aren’t — so users don’t have to deduce it themselves.

The issue is even more pronounced on mobile, where 75% of users during testing experienced severe form usability issues on sites that failed to mark both required and optional fields clearly.

It’s therefore equally if not more important to mark optional and required fields in mobile checkouts.

And yet only 14% explicitly mark both required and optional fields on desktop, and only 6% do on mobile.

E-Commerce Checkouts Need to Mark Both Required and Optional Fields Explicitly (Only 14% Do So)

PS. If you have a simple form with 2-3 fields, you can disregard all of the above. You only need to differentiate clearly when the forms are longer and more complicated.