User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Recently got into a heated discussion with my product manager about the placement of an asterisk * used for required fields in forms. He claims it must be positioned before the word, I say it must be at the end. Text aligned to the left and * on the left breaks this alignment. Google showing me both cases.
What are your thoughts about it and what is the best practice?
Typically I would agree it makes more sense grammatically to be at the end of the text, especially if you have a footnote that denotes the meaning of the asterisk. For example:
However, I would not be so adamant to say that it must be done this way. There are benefits to having the asterisk at the start. Such as that it will be the first thing the user sees when scanning the label text.
If your only concern is the alignment, then it doesn't have to be part of the label text. You could show if in a separate column of it's own so that alignment is preserved. For example:
This second option in fact opens it up for the asterisk to be replaced by an icon if desired. As you can imagine, an icon would most certainly only work by having a dedicated column to the left...
NOTE: I am not for a second suggesting using that icon/colour for a required field. it's just an example. Although perhaps you could use those icons when the user submits the form to alert them to something they have missed.
In summary, I don't think there is a fixed rule to follow. The main thing is to ensure clarity to the user, and as a UX designer, find solutions to potential problems such as the left-align concern (which you are correct to highlight). As I have hopefully demonstrated, both options can be made to work with the right design.
Also, sometimes you just have to accept who gets to make the final decision and do your best to work with that decision even if you don't agree with it.
According to Nielsen Norman, there's a slight benefit to putting it before:
Should the asterisk precede or follow the field label? That is unlikely to make a practical difference, but one reason to put it just before the field description is to help the eyes easily locate which fields are required by scanning just the left-most character of the label.
There are simple CSS methods that can clean up your text-alignment issues, if you do go with placing it before the word.
It might be a better argument to have with your product manager about whether you should be marking fields as required at all.
The reason I say this is that asking for optional information should be avoided where possible as it slows up the user when completing a form, even if they don't enter an optional field it makes them think about whether they should be entering it, what the impact on not entering it would be etc. Ideally you should only be asking for required data (within reason).
GOV.UK goes as far to say
If you ask for optional information, mark the labels of optional fields with ‘(optional)’. Never mark mandatory fields with asterisks. (https://design-system.service.gov.uk/patterns/question-pages/)
