11

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.

enter image description here

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?

  • 1
    This looks like a question of style to me. Check your corporate style guide for help. Alternatively check any other forms on the same product to see what they use. Finally, if all else fails, try asking over on graphicdesign.stackexchange.com – Andrew Martin May 8 '17 at 8:20
  • 1
    Thank you for your comment @AndrewMartin. Actually, I was more interested in knowing how the users will perceive it. I mean, which approach will be more impactful from UX perspective. That is why I have asked it here. – Harshal May 8 '17 at 8:25
  • 3
    In that case you should know that you have already skewed your test by marking one set of asterisks red - If you want a fair test of the alignment, you should make both sets red or both sets black. – Andrew Martin May 8 '17 at 8:28
  • 2
    (Sharing my experience) As a user, I found it very convient when textbox background turns red. It helps me fixing regsitration issues quickly. In that case, I don't have to concentrate more on asteric. Also, chrome and other mordern browser provides auto form fill by which users don't even read all form entries. Keeping colored textbox helps over there. – Zerotoinfinity May 8 '17 at 9:19
  • 7
    Regarding the question title, isn't this about horizontal alignment? The only different in the two options is the horizontal position of the asterisk (and label). – Joshua Taylor May 8 '17 at 13:20
30

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.

enter image description here

  • 3
    But wouldn't be putting the red asterisk outside will be more helpful to the user than inside? – Harshal May 8 '17 at 10:36
  • 1
    @Harshal The issue of alignment would arise as you pointed in your post. – DPS May 8 '17 at 10:48
  • 2
    This looks odd. I wouldn't do this. – JonH May 9 '17 at 0:20
  • @JonH What would you recommend to resolve the alignment issue? – DPS May 9 '17 at 6:12
  • 6
    That seems right. Isn't that the most common way to display asterisks next to the label? – laurent May 9 '17 at 8:28
13

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 4
    Your option 3 is very difficult to see, and your option 4 will interfere with a number of browser extensions such as password managers. – moopet May 8 '17 at 14:21
  • @moopet the idea for the 3rd option is to highlight only the required fields by marking them as bold or different color and marking the optional fields and optional. I would agree for the 4rth option, but I consider it very clear way, since you see the asterisk on the field. – Dimitra Miha May 8 '17 at 14:41
4

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.

2

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.

  • 1
    Co-incidentally @Dimitra Miha above also gives a similar suggestion. I guess we were typing at the same time!! ;) – Amit Jain May 8 '17 at 8:39
0

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.

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.