1

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?

2
  • I'm pretty sure you place it after the word that is referring to a footnote, and before the footnote itself (this* references *this). But this is more a grammar question that can also depend on the language. It's not a star but an "asterisk" btw, you'll probably find an answer when you search the web for that.
    – jazZRo
    Jan 5 '21 at 14:15
  • Yeah, sorry, I meant asterisk.
    – noirboi
    Jan 6 '21 at 17:04
3

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:

enter image description here

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:

enter image description here

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

enter image description here

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.

1
  • Thanks for your answer. No, the guy I argued with prefers to have it aligned to the left, and let's say one of the fields with an asterisk on the left and it completely breaks the line and makes me furious. :)
    – noirboi
    Jan 6 '21 at 17:12
1

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.

1

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/)

2
  • 1
    I'd argue that gov.uk needs to 'get with the program'.
    – PhillipW
    Jan 6 '21 at 15:48
  • Thanks, I'll try to sell this idea to him.
    – noirboi
    Jan 6 '21 at 17:12

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.