The red asterisk ( * ) indicating required fields has been around our digital interfaces so long, it’s one of those things you take for granted, like the anachronistic floppy disk for “save”, or the magnifying glass for “search”. It’s easy to forget that somewhere along the line, it was a choice that someone made.
The alternative to indicating required fields is indicating optional fields. This is commonly indicated by explicitly writing out (optional) for every optional field. Like the asterisk, the (optional) marker has also been around forever as a pattern in web forms; it is similarly ubiquitous.
The arguments for marking only optional fields with (optional) are that:
- Spelling out the text (optional) makes it more clear for users what they need (or don’t need) to do.
- Marking required fields may actually subconsciously influence users to skip optional fields.
- You don’t need a legend describing what (optional) means.
- There’s less red, which makes for a subjectively calmer form experience.
- Marking fields (optional) will be cleaner when most fields are required.
- It forces the designer to consider: do I really need to provide so many extra options?
So, with that in mind, here’s the design proposal for Required Form Fields in PatternFly:
Our recommendation is to mark only optional fields, using the word “optional” (see Design A1 below for how this looks). If a majority of the fields are optional, then you may mark required fields instead (Design B1), but just be aware that if you use both approaches across different forms, it makes for inconsistency in your designs.
If all fields are required, this can be indicated implicitly by disabling the Primary (Submit) action until all fields are filled out (Design A2).
Conversely, if all fields are optional, you have the choice to remove the optional markers, and indicate the fact that the fields are optional implicitly by always enabling the Primary (Submit) action (Design A3).
Mark only optional fields. Use this approach by default.
When all fields are required, indicate this implicitly by disabling the Primary (submit) button.
Design A3 (Edge Case)
When all fields are optional, you may drop the optional markers and indicate optionality implicitly by always enabling the Primary (submit) button.
Design B1 (Alternative approach)
Mark required fields. You may use this approach when a majority of the form fields are optional.
Thoughts, comments, concerns? You have the option to comment on this post.