14

Has anyone seen in Material Design how to present a required field? At the moment it seems the guideline is either to hide the submit button until required fields are populated or else throw an error on submit.

I have seen an example where "required" was written in brackets beside the field, and also an example where "not required" was written, but this is a bit underwhelming.

Does one just go with the good old red asterisk in the label? (In this case, it is prompt text and would be turned into the label when the field is populated.)

18

How you choose to mark fields as required is not a part of material design.

You've already noticed that some applications choose to use the validation error "This field is required" after the fact while others choose to do it another way.

  • Regardless of how you choose to indicate required fields be sure to give some sort of immediate feedback to the user when they have entered valid information.

  • If you only have one or two required fields then using a red asterisk is perfectly acceptable, however, using a more explicit (required) text as part of the field name is more clear assuming you have the space for it.

  • If you only have one or two optional fields then you can add the word (optional) in parenthesis as part of the field label though it really isn't necessary especially in the optional case.

  • If you have no control over changing the inputs on the forms and need a single consistent pattern then I would say putting (required) next to all but one input is better than putting (optional) next to all but one input.


Consider only asking for required information

Progressive disclosure tells us that it's better to only gather mandatory information up front and then allow users the option of adding additional (optional) information later.

As a designer I treat every input field as a barrier to entry. In other words, if it doesn't have to be there then why am I asking for it in the first place? Pretty much all inputs should be required except in rare cases where having the option adds value to the user even though the job can be done without it. (for example, description or additional info fields)

  • hey DaveAlger. Thanks for the response. You make good points also, and I should have been clearer that I am using MD for a very form orientated enterprise app, and as such I am not designing each form per se, but more trying to provide a best practice style guide. I agree a well designed form should only ask relevant information, but I cant ensure they will always be well designed. – Stephen Arnold Mar 12 '15 at 9:26
  • Yeah I hear ya. We try and come up with the best solution not the ideal constraints. -- I've added a bullet point to cover your situation. – DaveAlger Mar 12 '15 at 12:42
  • Wouldn't it better to get rid of the asterisk at all, especially with a few (“one or two”) form fields as some people still have issues understanding it's meaning and therefore leaving the fields without indicator or adding a secondary information like “Required” is preferable? – Volker E. Jan 6 '17 at 22:53
14

I'm not sure when this section was added, but currently, the specs do have a short section about required fields:

To indicate that a field is required, display an asterisk (*) next to the field. At the bottom of the form, include a note explaining that an asterisk indicates a required field.

10

Material design is silent on required fields. However, the Material Design documentation shows this interaction example for a required field:

enter image description here

Additional suggestions:

  • I am not a fan of the asterisk because it doesn't communicate 'required' clearly and can cause anxiety or frustration with users, especially if no tooltip or legend is provided.

  • Material design uses colors to communicate field status (focused, disabled, erroneous, etc) so color is not a great way to distinguish a required field because it may overload the onscreen palette.

  • Material design makes extensive use of clear placeholders (as in the examples above), so the logical way to denote a required field is to use First name (required) in the placeholder text. That places the requirement next to the field description, and doesn't rely on any ambiguous signifiers or colors.

  • Thanks for taking the time to reply tohster. I agree with your comments. I should have given some context around the fact we are using it for an enterprise application which is very form heavy, so having (required) on every required field in the application seems a bit visually overpowering, and given the users will be using it every day, excessive. However I want to use MD components and patterns out of the box where possible so was wondering if I was missing something. – Stephen Arnold Mar 12 '15 at 9:19
  • They seemed to have updated the documentation and the asterisk is – quite to my surprise– in material.io/guidelines/components/… Following Luke Wroblowski's recommendation on replacing the asterisk with written indication (“Required” vs “Optional”) sounds like positively impacting affordance. lukew.com/ff/entry.asp?725 – Volker E. Jan 6 '17 at 23:02
1

It surprises me that Material Design's solution to a required field is a slap-on-the-wrist after failing to fill it in rather than letting the user know ahead of time. It reminds me of those sites that yell at you after you choose an ill-formed password without telling you ahead of time which highly specific format is required: anger-inducing, as well as time-wasting.

I, like Stephen, am working with a form-driven site, in my case for an insurance company, and a given page can easily have 20+ fields. (Ever gone through a home quote?) Some fields are not required. I'd love to get rid of them, but they are part of a business requirement.

Putting "(required)" at the end of the hint text each required field makes the form appear absolutely littered by them. I ended up preceding the hint text of required fields with the asterisk, and keeping the asterisk around after the hint text goes away upon entry. Looks decent, and - more importantly - tests well.

Also, if a specific format is required for entry, I do what MD does after the user makes a mistake (pictured in the thread above), but I also display the same message upon focus, using the focus color for the text instead of red. Works out nicely.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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