How to mark form fields as *Required or (optional)

Posted by on May 31, 2012 in thoughts, usability | No Comments

Undoubtedly this is an old question and one that I thought I’d answered many years ago (for myself anyway): how do you design form labels so that your visitor understands which fields are required and which are optional?

It used to be fairly universal that an asterisk (not an Asterix as many people want to call it!) marked fields as mandatory (sometimes the label text is also made bold, and possibly even coloured red). However this question was raised again recently in a discussion following a bout of user reviews. Throughout our user reviews, the majority of users correctly identified fields marked this way.

However, we’ve recently been recommending a different approach. Instead of marking out the required fields with an asterisk to denote a mandatory field, we’ve turned this on its head and now we suggest marking only those fields that aren’t required – as optional.

Hasn’t this recognisable pattern been around for long enough that we shouldn’t mess with it? The “Consistency and standards” heuristic states:

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Couldn’t the “required asterisk” be considered as a platform convention?

My thinking goes like this:

  • The users usually comes to a form expecting to fill things out – it’s implicit in the nature of a form
  • We should only include fields the user has to complete (why are you even showing your users fields that don’t have to be filled out?)
  • If you have to add optional fields, it’s more helpful to label them as optional because it reduces the amount of stuff the user feels they have to do
  • Seeing lots of asterisks is distracting and leads to messy layout

UX Movement agrees:

Users will also tend to search for all the red asterisks on a form to make sure they have filled out all the required fields before submission. The red asterisks make users more fearful about making errors, which can affect your form completion rate. While filling out forms isn’t an activity to get excited about, users should at least be able to fill out a form without stress or confusion. Red asterisks put users on edge before they even begin.

Doesn’t sound so great, does it?

As Luke Wroblewski writes:

Literally including the phrase “optional” after a label is much clearer than any visual symbol you could use to mean the same thing. Someone may always wonder ‘what does this asterisk mean?’ and have to go hunting for a legend that explains things.

For further reading, see Web Form Design: Filling in the Blanks – it’s a great resource for all things <form>.

So that’s how to do it: include only the fields you really need and mark the optional ones “(optional)”. Also make sure your error messages are clear – but that’s for another post.

Form layout showing how to mark required and optional fields

Mark optional fields as such

Update: Rian van der Merwe has written about this and a few other great usability no-no’s on his blog.

I’d love to hear how you approach this issue, let me know in the comments.

Leave a Reply

*