The UX of Required Fields

I was recently asked:

I was wondering if you could tell me if there is a “proper” or generally acceptable way to denote required fields on a form.

  1. Label* Field
  2. *Label Field
  3. Label *Field

I don’t think the Form Police will arrest you if you do #2 or #3. However, they will arrest you for #1. The reason has to do with the way people scan text. If you do number 1, then the length of the labels will be variable. You can’t make the asterisks line up if they are aligned left on a ragged edge. So the user can scan vertically down the left of the label of the left of the field on #2 and #3, without dealing with a ragged edge.

Between #2 and #3, I believe #3 is superior. The reason is because the user should see the asterisk, which indicates “required” as close to the thing that actually needs user attention. #2 puts the asterisk all the way to the left. The user would then have to track the line all the way to the right to find the control that needs filling in (text, radio, checkbox, etc). With #3, it is very close to the field. The user can track left or right and use the asterisk to ground their eye.

So, given these factors, I would recommend that you use the #3 for how to demonstrate required fields.

Whatya think?