* Is this a required field?
When you’re designing a form most of you will mark required fields with an asterisk (*). Then you’ll add something like “* Required fields” to the top of the form. But surely we now live in a world where everyone already knows this. Do we really need to include a legend indicating what the asterisk means?
Do we need to explain what it means?
A legend is a key that tells the user what certain symbols or words mean (I’m not talking about the <legend> element here). In most cases a form legend will look something like so:
* Required field
When you design a website there is typically at least one type of form (contact) and possibly many others (sign up, checkout etc.). Sometimes I do include a legend and sometimes I don’t – but do we need to?
What do the big boys do?
eBay
eBay indicates their required fields with * and includes a legend at the top “* Indicates required field”.
Yahoo
Yahoo puts “(Optional)” beside the only field on their sign up form that is optional (out of 18 fields). This means the form doesn’t get cluttered with asterisks. Good thinking as the label speaks for itself.
LinkedIn interestingly has a legend at the bottom (below the submit button) indicating what * means, even though all fields are required.
BBC
The BBC complaint form marks required fields with * and includes a legend at the top.
Required fields only
Now you could argue the point that only required information should be asked for on forms. I’m a firm believer in the least amount of fields possible, and particularly for sign up forms this is true. Although for contact forms or checkout forms there will always be information that is optional e.g. web address, address line 2 etc.
It depends
I made the decision not to include a legend on my own contact page. My thoughts here are that:
- Most people using my site will know what the asterisk means
- If someone really doesn’t know what it means, they’re probably not the type of person I want to work with anyway
Depending on who your website is aimed at, you may or may not have to include a legend. New users or older generation users may not know what the asterisk means, so make the decision based on your target user.
Over to you
This is a very small thing and probably something as web designers we take for granted, but it can make a big difference as generally it involves your conversion page (signups, enquiries) so you don’t want to lose any users.
Similarly to my blog post about signup forms requiring confirmation passwords, I’m interested in your perspective on this.
Do you still need to explain what an asterisk means on a form? Do you use some other method of indicating required fields?
Related articles
24 Appreciated Comments
Have a comment? Tweet @leemunroe and I'll be glad to respond.
On the , Federica Sibella said:
Hello, nice article, very intriguing. I think that if you use the * sign you should add a legend, because this is what most of the people expect in general, not only on the web. If you read an ad, for example, and you encounter a * you tend to look for the tiny line on the bottom explaining the meaning of the *. On the other side, you can choose to avoid the * and use words like “required” (like you do!) or “optional” (like others do). I think all choices can be good as soon as the meaning is clear :)
On the , City Insurance said:
I am a big believer in removing optional fields altogether from initial signups and leaving them for later. This way you maximise conversion and the user can complete other optional fields at their leisure. Not everyone has time to fill in their favourite pet or weekend hobby so why include it for everyone on day 1?
On the , Andy said:
It is an interesting question. Personally Its difficult for me to understand that there are people out there that don’t know that a * indicates a required field. Help out the rest of us, don’t include a legend and then the masses (well those who don’t know about the required field *) will learn how to fill out forms through trial and error..lets face it, they will probably be fairly used to getting things wrong and having to retype things a few times anyway.. eventually resulting in no need to add the legend ever again. Get rid :)
On the , Lee Harding said:
I always assumed that the majority (if not all!) web users knew that the asterisk (*) indicated a required field. Until in a recent project we didn’t provide a legend. In our feedback forum we actually recieved a comment complaning that there was no indication what the * symbols on our registration form meant – this is from a user who given their job position should be generally used to filling in web forms and know what the (*) symbol means! So I think some kind of legend should be used just be safe!
I do like the Yahoo (optional) approach, but I think this would only generally work well in short forms.
On the , Mark McCorkell said:
This is indeed one of those little things that some people can take for granted. I present my contact for like Name: (required) and Email: (required) and that should be concise enough to let users know what they do/don’t need to fill out.
I find it interesting watching how my mum uses the internet, and my dad, because you get some insight into how non-tech minded people experience things – it’s actually a good way to test things!
Putting something as simple as (required) at the end of a field can prevent them seeing a validation error message. It really does depend on your particular users though, like you said… but better safe than sorry, eh? :P
On the , Natalia Ventre said:
The explanation may be redundant, but it’s an accesibility issue.
I understand that you prefer to work with Internet savvy people, but as a designer, your own contact form is an opportunity to showcase how you work, regarding forms I woud stick to best practices.
On the , Darren Taylor said:
I think your use of the term legend is confusing considering the legend tag which should be used for AA compliance with forms. Personally I’d say that the asterisk info is an instruction and is necessary. Additionally I’d recommend using an image of an asterisk with alt text such as “required field” as some screen reader users have their software set to ignore asterisks.
On the , Dave Armstrong said:
I’ve always been big on accessibility, so I’d most likely be inclined to add a legend, and one that is marked up as such. An asterisk on a form is a very visual thing. You can see at a glance that some fields have it and others don’t. This asks the question what’s different about these fields.
Someone using a screen reader might hear “First Name Asterisk”. If they don’t have a legend, and a legend that is read to the user before they come across the required fields (read: LinkedIn fail) then this is likely to confuse.
I like the idea of not having optional fields at all and leaving the user to fill in optional information at their leisure, but just looking at this comment form, there are plenty of places where that just doesn’t work.
On the , Lee said:
Thanks for the comments so far. Swinging both ways at the moment, some for, some against, some using (required). Really interesting to see people’s thoughts on this as it’s something I’ve never really thought about.
@Darren: Thanks for pointing that out, the legend terminology is a bit confusing. Have reworded some of the text at the beginning.
On the , Darren Taylor said:
Lee, have a look at the COI’s guidance, I think this a good reference point – http://bit.ly/ax3XOl
On the , Dave said:
If every site did away with the legend for required fields, where would new users learn the convention that * meant required?
By not including a legend on your site, your dependant on your user having used other sites (needs to be more than one to establish the convention) first. That’s a big assumption!
On the , Janko said:
I don’t see an asterisk as a solution, with or without legend. Sure, it depends on target audience, but I prefer marking optional fields. Since there should be minimum of optional inputs it is less cluttering to mark only those fields. I use that approach on my comment form, for example.
Check out this article on cxpartners: http://www.cxpartners.co.uk/cxinsights/web_forms_design_guidelines_an_eyetracking_study.htm (guidelines 5)
On the , Matthew Heidenreich said:
very interesting read. I feel it really depends on the form and what you are trying to accomplish. Take this comment form for instance. It is common knowledge that if you want to leave a comment you need your name and email. So I feel there is necessarily a reason to put the asterisk showing this. Though I also don’t think it hurts to put it in there either. Guess it’s really just who you are and what you prefer.
On the , Darren said:
A ‘*’ could mean many things:
- Required field
- Must be 6 characters long
- Must be 18 or over
- Only on weekdays
Sure, in the context of the question, it can probably be worked out, but why make the visitor do more brain work than is necessary? As Steve Krug would say, “Don’t make me think!”. Make life for the visitor as easy as possible. If that means putting a legend in tehn I think one should do so – it’s not like it’s much effort after all!
On the , David said:
I think markers rule out any confusion as not all website forms see the same fields as their important fields.
I think website forms in general though need a re-think. It is a real hassle to have to enter in the same information over and over again on different sites. Maybe some kind of site that would allow you to create one master template of your typically required details (similar to the way that http://www.gravatar.com works with your email address.). Then the rest of the details the form requires auto fill into the appropriate fields. This would need to be secure however, if things like credit card details were going to be held, so not sure how exactly that would work.
On the , Darren said:
@David:
Google Toolbar already does this.
On the , Lee said:
Thanks for all the comments, lots of good advice.
I think in our world it is obvious, but some of you make a good point that even if we see it as required, it’s good practice to always use a foolproof technique, which involves using a key/legend.
However, after reading through your comments I think the best solution is highlighting optional fields with the word ‘optional’ or required fields with ‘required’, which makes things less cluttered and also makes it clear.
On the , Michael Kozakewich said:
When literally everyone has been online and has a good deal of working experience at dealing with forms, and when you’re considered an idiot for not knowing something so simple, then we could drop them.
As it stands, a great many users are just taking their first steps on the internet, and many more haven’t used enough forms to understand the common social patterns inherent in them.
Personally, I’d like a change to how designers usually lay out forms. Instead of throwing everything at them, try to group all the required fields first, and then label the second below as optional. Or, give them a check-box asking them if they’d like to fill out optional data now or later, so they don’t even need to see it until they want to.
On the , rezyde said:
the yahoo design looks much cleaner as opposed to the others.
On the , Rachel said:
Using asterisks on forms without a corresponding instruction doesn’t make any sense. An asterisk does not mean a field is required, it simply means that there is a footer note. Using asterisks as instructions on their own changes their meaning.
This got me thinking about something I had experimented with before. Perhaps the correct use of the asterisk would be to set it as an anchor pointing to the corresponding footnote as you would if you were using footnotes within a Word documents. The link text could remain as an asterisk but then a title tag could be added stating that it is a required field.
On the , http://twitter.com/eazol said:
You also need to choose a Username, which will be become your identity on eBay, and a password, preferably one that you do not use on other internet sites.
On the , cliff said:
I can go either way with the legend. What I have noticed in the lab (I’m a usability engineer), though, is that “optional” tends to get overlooked. Part of that depends on treatment, of course. And I’ve seen it above, below, at the end, and after the label (like the one in this blog). I’v also seen it in smaller font, in a different color, and in parens. Interestingly, what I have never heard is anyone complain about too many asterisks (which is why, I assume, people use “optional”).
On the , Jerry said:
Most screen readers with the default verbosity settings will not read out the asterisk so the user won’t know what’s required whether you have a legend or not. Either make every field required and indicate so at the top of the form or include the actual word ‘required’ after each field, or your form will be inaccessible to screen readers.