Required form field communication

Question

I've always communicated required form fields on web applications to users by hanging an asterisk off the end of the control or the label and having a little sentence along the lines of "required fields are flagged with an asterisk(*)" or similar message at the head of the form so that they know what's what before they start filling it in.

Totally uninspiring.

After far too many years of that I'm sick of it, and am looking for something different that's intuitive, and definitely more interesting.

Has anyone come across a method for this which is a bit different, and equally importantly, gets the message across before the user starts to use the form?

EDIT: I'm staying with the asterisks...I tried some of the ideas presented and some looked great, but there is no getting away from the point Michael makes that the asterisk is expected and moreover is universally understood. Further, when you consider accessibility it becomes more of an issue to use CSS etc to deliver the message.

I found this to be a good article which also have some useful instruction on how to ensure that sighted users and those using screen readers get the message correctly when iterating through the fields.

http://simplyaccessible.org/examples/required-form-fields

Answer 1

Have you ever looked at using the FieldValidators within ASP.Net,e.g. RequiredFieldValidator? They can be useful for displaying messages that may be useful assuming you are talking about error messages rather than general information for the user looking at the form.

EDIT to add: If you have control over the form in its entirety, you could split the form into required and optional fields so that the separation helps in getting which parts are you have to fill all of this in, versus the stuff that is optional and nice to have.

Answer 2

A quick solution is to make the labels for required fields bold.

A better solution is to combine that with e.g. a different colored background (and / or border, etc.) for all empty required fields and change that to the background of the non-required fields when something is filled in. Most people will get the message pretty quick.

Apply this background color change mechanism for all invalid fields - preferably combined with a mechanism that displays some error message if the user submits anyway.

This a general GUI pattern for marking errors on forms that you can find in many existing applications.

Added: When all fields are required the rules change.

When all fields are required this should be obvious from the design of the form. E.g. for a login form you should not even use an asterisk to signal that all fields are required. The same goes for most small forms with only required fields: change password, change e-mail address, etc.

When you need an address to send something to someone and people will get that all address fields are required. (My address forms usually contain an optional extra line for address information, but then that depends on where you live.)

If you have a large form with many fields where all fields are required you may have a design / process or marketing error on your hands. I often wonder about forms where I have to enter e.g. two phone numbers. I must really want something before I fill in a form that requires me to type in ten or more text fields.

Answer 3

Uninspiring? Sure. Unfortunately, the use of an asterisk is rapidly becoming a de facto web standard. If you're talking about a single app or site out on wide wide web, changing to something else now is making it harder for your users. Remember, almost always your users spend far more time at someone else's web site than your own.

And frankly, I don't think users are looking for a more interesting way to see required fields --it just doesn't thrill them. They're certainly don't care about making your job more interesting. They rightfully expect you to work so they don't have to. Devote your creativity to something that will actually make life better for your users.

Now if you're making a standard or style guide to apply to an entire class or suite of apps that will be used heavily by your users, then it may make sense to research other possibilities. I would try something that means "look here" or "attend to this," maybe an icon of a hand pointing at the field. And then I'd dynamically fade the icon once the user completes the field, providing feedback to them on their progress. And I'd include a tooltip/title tag saying "Required." And I'd never put that in a style guide unless I had tested it on users and convinced myself that it has considerable human performance advantages over the asterisk. I would never do it just to be different.