Vertical Alignment of a Required Asterisk Mark

Question

We have a form with side by side placements of form labels and fields. The labels are left aligned and so are the input controls.

Some of the fields are mandatory and are shown with an asterisk before the field.

My question is pertaining to the placement of the asterisk.

We have following two options in consideration. First where the asterisk is treated as a separate UI element which augments the form labels and hence it is placed slightly outside the form. Second where the asterisk is considered as a part of the label of the form and hence aligned left like any other field.

Here is an example.

Our constraints are that we have to place control and label side by side and that field labels will have to be left aligned.

Any thoughts?

Answer 1

How about placing the asterisks at the right side of the label?

Because the reading order may not matter to users, but the red asterisk will catch users attention before they even read the label which will eventually fulfill its purpose.

Answer 2

NNgroup has good suggestions on web forms usability

Distinguish optional and required fields. First, eliminate as many optional fields as possible (see the first recommendation above). If some fields truly are necessary, but only apply to a subset of users, don’t make users find out through trial and error. Limit the form to only 1 or 2 optional fields, and clearly label them as optional.

from https://www.nngroup.com/articles/web-form-design/

Now, from your 2 options, I would recommend using the 1st because it seems clearer which fields are required since they are easier to distinguish.

I have also added some other alternatives in the following mockup that you might want to consider.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

Some of the fields are mandatory and are shown with an asterisk before the field.

How about this bold solution then: we mark the fields which must be filled by placing a red asterisk, before the field:

This doesn't hinder readability of text, and doesn't look as ambiguous as placing it inside the text field, as if it was a part of already existing text inside which you would need to erase. Aligning at the middle seems neater to me than at the top or bottom.

Answer 4

Two scenarios or options you should consider-

1) Is the asterisk really needed? It depends on the form content, but research and experience suggest that users could be more happy with using explicit helpers like "Optional" or "Required" in the label text (placeholder could also be explored to indicate the same). Some very good discussion here.

2) You could move the asterisk and place it just before the input fields. That would help you avoid the conflict you are having. Some related discussion here.

Answer 5

Adding more to @Amit Jain's response

It would be nice to put optional or required labels besides the control labels and which would in turn help in accessibility of your form to specially abled users when they totally rely on screen readers.