Web form design: is the “required” asterisk design or content?
You’ve seen it on just about every halfway-decent web form out there: “Required fields are marked with a *.” And then, next to required fields, the little, bold, colorful asterisk telling you you’d better put something in this textbox. (Or, in some cases, a bold field name, an outline or background color on the field, etc.)
Yep, you gotta provide your email address.
While building a web form for a client recently, I got into a discussion with other designer friends about the semantic role of those little asterisks: are they part of the form’s essential content, in which case they should be part of the HTML, or part of the form’s usability design, in which case they should be part of the CSS?
One argument is that they’re pure design: the form’s content should merely be the fields and the labels that are essential to understanding what information is being requested. The form will function fine without any required-field indicators, and if a user doesn’t provide a value for one of them, the server-side software will give them an error message. This is the most basic type of functionality, and it’ll work in any web browser, CSS or no. Adding asterisks to indicate which fields are required merely enhances usability, but isn’t necessary to convey the information the form presents.
The counter-argument I was given was that the asterisks are essential content: the form isn’t conveying its full meaning without telling users which fields are required and which are optional. Design aside, it’s necessary from the most basic level to let the end-user know exactly how much information they need to provide.
I’m sure you can tell that I agree with the design argument; I can’t even fully flesh out the content argument, because I don’t completely understand it. However, I’m willing to believe that it’s a valid perspective. Which argument do you agree with, and why? Can you provide a more thorough argument for one side or the other?
6 Comments
Comments are closed.
Just some thoughts:
After reading this post, I notice that you have both highlighted-yellow AND put a (required) notice next to your comment form for Name and Email, but not for Website. Is that really necessary? I think the yellow highlight would be enough for most people to understand that those fields are more important.
I do not think that asterisks or “(required)” notices are part of a form’s essential content. I think that in this case, at ryan.freebern.org, the highlight is enough – your target audience is computer-savvy. On the other hand, ff there was a form on an AARP website, perhaps the asterisk would be more useful, along with the notice “An asterisk indicates required field.”
I haven’t actually done anything with the design of the comment forms on this site. That’s just WordPress’s default style.
You seem to be missing the point. I’m not debating if the asterisk or the word “required” or a highlight is necessary; I’m debating whether the “requiredness” indicator should be present in the form’s content (i.e. the HTML source of the page) or the form’s design (i.e. the CSS that applies visual style to the page). In other words, I’m wondering about the semantic role of the requiredness indicator, in terms of the ideal separation of content and presentation.
Great question and open to much debate! First of all, the “requiredness” information has to be semantically in the HTML (obviously or you could not select on it) regardless of the option you pick. So, you’re really picking between a) the non-human-readable option of putting a “required” class (or something similar) on the label or b) having human-readable text as part of the label that distinguishes it as “required” (which should, with this option, be marked up with its own semantic data). If you consider the first option to be a poshformat then I think it’s a perfectly valid option since, otherwise, it’s markup strictly for the sake of visual presentation which is, generally speaking, a bad idea. However, the second option seems to make more sense since this is information that is of great value to non-visual user agents (and most – well, really, all – user agents won’t understand the semantics of your “required” class). This raises the question, what semantic value (in human terms) does an asterisk have? It may be more semantically correct to put the word “required” in a span and use CSS to replace it with an asterisk (or some other visual treatment).
Looks like the blog ate my poshformat link:
http://microformats.org/wiki/poshformats
Ryan,
Ah. I understand that I didn’t understand.
Bradley: Nice, I’d never heard the term “poshformat” before. That is a useful concept!
It’s not entirely true that the “requiredness” has to be in the markup; as long as all your form fields have unique ids, you could set a style on them purely via CSS.
You’ve made me think some more about this, which is good. It’s a tricky line to draw, deciding where “usability” and “essential information” meet. I think the decision comes down to being able to answer the question “is this item required in order for a user to get the information they need from the site?” And the answer, in this case, is no: the user can still use a form even if the “requiredness” isn’t indicated in a human-readable way; it just might take them a few tries to provide all the information necessary. Adding the indicators makes it easier but doesn’t change the essential information conveyed.