Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Should we add red asterisk before or after the label of required fields, i.e., to the left or the right of the field name? My boss prefers to add the asterisk before the labels, but I like to add them at the end. Which is more user-friendly?

Job creation form

share|improve this question
5  
Would you believe neither? Check out my answer to this question... ux.stackexchange.com/questions/840/… –  Steve Wortham Dec 1 '11 at 1:07
add comment

4 Answers

up vote 6 down vote accepted

I've never actually conducted any research, but I don't imagine it will matter so long as it's consistent, and the opposite side to that you dock your labels to. If you align field labels to the right and right-align your asterisks, you'll create an odd-looking ragged effect.

Apart from that, I'm not convinced it matters. Some might suggest otherwise by claiming it's better to read the asterisk first, but I'm not convinced that users' eyes will read text in order, rather than locking to points of interest (which seems a more accurate representation of how human reading actually works).

share|improve this answer
add comment

It depends a bit on which side you align your labels to. Reading into the eye-tracking research, I would suggest placing the markers along the line of fixation ... which for right-aligned labels would put them after the labels.

However, you don't want the field required markers to bump the labels such that you get a ragged edge, like this:

labels aligned right, but jagged

That said, you could instead do the following, which is neater:

labels aligned right, but asterisk in it's own vertical column

For left aligned labels I would place them to the right of the labels .. but aligned to the fields themselves. This way the user can easily scan through the form looking for any required fields they haven't completed yet:

labels left aligned, asterisks to the immediate left of the fields instead

share|improve this answer
    
These arrangements are very easy to accomplish in code. You could use <img> elements (with @title="required" for accessibility bonus), or a CSS background (and just the padding for optional fields), or go old school with <table> (please don't). –  Erics Apr 1 '12 at 11:07
add comment

I believe the most visible and easy-to-scan position for an asterisk or other indicator of a required field is to the right of the field, rather than the label.

share|improve this answer
1  
But here is some other input that should be helpful: leemunroe.com/required-fields –  tajmo Nov 30 '11 at 21:06
add comment

Using red or just an asterisk is not as effective as bolding required fields.

Better practice for 508 compliance (not relying on color), and an asterisk alone is hard to see on a screen.

share|improve this answer
    
Agree with not relying on color, but using Bold alone is not clear enough, go ahead and use an icon / asterisk too. –  RaeLehman Apr 2 '12 at 15:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.