6

What are the rules around indicating required fields in a flow that has some pages that have all required fields and some that are mixed?

Is it better to denote optional fields in this case?

12

The goal of indicators like this is to inform the user when something is different. So, let the form tell you how you should approach it. In general if most of your form is required, state that up front and then flag Optional fields accordingly. Inversely, if most of your form is optional but a few are required, flag the required fields.

Some Examples

This short post from Luke Wroblewski is from 2008, but it's still applicable today:

On the Interaction Design Association (IxDA) discussion list, Erin Walsh shared some interesting insights on marking Required vs. Optional form fields.

"We recently did prototype testing on several search forms with a mixture of required and optional fields. On the team we were split on the best approach, so we tried to distinct methods: one with optional spelled out, the other with those fields having a different visual indicator. Though the sample size was limited, the "Optional" won hands-down. Remarkably, some participants even commented on how much they liked that it said "optional right there". I know our UI team was not thrilled, but it was extremely advantageous to spell it out rather than use an icon or other visual indicators."

This finding matches the best practices I advocate in Web Form Design:

"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."

(Emphasis mine)

| improve this answer | |
5

As The technologies are changing and evolving we can experiment so many designs to perform the same task rather than use a red star in front of the required field ,

Its a good practice according to the ux point of view not to make the optional and required field messed up , make them separate and let the user fill the necessary information . Most probably we are going to use html5 these days so we can try some amazing stuffs like shown in image to make some room for the other fields and label !

enter image description here

have a nyc day !

| improve this answer | |
1

When it comes to situations like this, consistency is the key. The general indication that there is more information regarding a field (such as required or optional) is the asterisk (*) next to the field, and then at the bottom of the form (or someplace easily visible) explain what the * means.

If you're going to use the * to indicate a required field, you might consider having a red highlight around the input. But from your situation, it sounds like you only have a few places where fields are optional. Depending on your list size, and how many are optional, you might get away with simply putting in smaller text directly below the label, "(optional)" ie.

The Label:The Input Field

The Label:The Input Field

The Label:The Input Field
(optional)

The Label:The Input Field

Or if in this particular case in the flow there are more optional fields than required fields, maybe have the * next to all the optional fields instead of the "(optional)" text.
But one thing is generally universal. Red *'s are for required fields. Black *'s can be used for either, and in most cases (this is by no means a rule, just an observation) blue *'s are optional. But make sure you specify, somewhere the user can easily see, what the *'s represent.

If your list has just a few fields that are optional, I would go ahead and use the "(optional)" text. If there are more than a few, I'd use the *. If all of your items are optional, provide a "Skip" button somewhere that will move you to the next page in your flow.

| improve this answer | |
  • 2
    I would argue that if your form needs a legend, then it isn't very user friendly. I think the asterisk is a poor affordance easily looked over. – Jason May 14 '15 at 20:44
0

I thought you might be interested in Baymards latest research: http://baymard.com/blog/required-optional-form-fields

The summary is that:

  • When benchmarking the top 100 US checkout processes, only 9% of the sites explicitly marked both field types
  • By explicitly denoting both optional and required fields the user isn’t forced to infer anything and can stay focused on just the field they are filling out and are consequently able to progress seamlessly throughout the entire form field by field without any back-and-forth scanning of previous fields.
  • The most common mistake – made by 63% of the top 100 e-commerce checkouts – is to only denote one of the types
  • When testing mobile checkouts, 75% of the test subjects experienced severe form usability issues on sites that failed to mark both required and optional fields clearly.

And their recommendation:

enter image description here

| improve this answer | |
  • Please don't duplicate answers across multiple posts. If the questions can be answered with the same response then the chances are the question itself is a duplicate, so you should flag it as such rather than leaving the same answer in multiple places. – JonW Dec 31 '14 at 10:48
  • I read this research and found it lacking in substance. One thing they failed to test was form conversion and the impacts of required, optional, required & optional. – Jason May 14 '15 at 20:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.