7

Look at wireframe:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Does it look OK that labels above fields have asterisks? Or should labels be placed left of the fields?

Will it be OK if those required fields won't have asterisks at all?

Should there be a space between word and an asterisk (i.e. "Email*" vs "Email *")?

2
  • Bonus points for referring to them as 'Required Fields' and not 'Mandatory Fields' (Nobody apart from maybe court judges say 'Mandatory' in real life). Just a personal bug-bear of mine!
    – JonW
    Apr 3, 2013 at 13:07
  • What potential problem do you eprceive with the asterisk placement?
    – peterchen
    Apr 3, 2013 at 13:08

4 Answers 4

7

Not only is it OK, it is actually the correct way to do it.

If a field is Required then the label of the field itself should say so.

From the W3C site: H90: Indicating required form controls using label or legend

The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the label element, or the legend for groups of controls associated via fieldset. If a symbol is used, the user is advised of its meaning before the first use.

You should declare at the start of the form that an Asterisk denotes a required field (something like "Fields marked with an * are required) so that anyone reading the form for the first time is aware what those indicators refer to.

More information about this particular W3C criteria are found here: Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

1

You can place the labels on the top or on the left (works for left-right readers since they also read top to bottom).

The thing that you need to keep in mind is the layout of the labels, so the user does not confuse the label to be associated with the input above it rather than the input below it. Aka, follow the Gestalt laws of grouping, mainly the proximity law in this case, but you should always keep these in mind while designing layout :)

enter image description here

Regarding the asterisks, you can have them with with the label or at the end of the field to not attract immediate user attention.

Some alternatives to asterisks are:

  • Only ask for required information
  • Use bold text
  • Highlight the required text labels
0

I don't know if there are studies that demonstrate this, but I think that all information related to the edit field should be in the label because it's where the user gets the information related to the field.

And it just looks clearer to me, too.

0

I have seen a number of different placements for a 'mandatory field' asterisk (which is what I am interpreting this to be).

While I would recommend making it a higher visibility colour (traditionally red), I see no problem with it at the end of the label (subsequently there would also be little problem with it at the start of the label, it is a matter of suiting the style of your site and your personal preference for the design.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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