How to make the user fill out all required fields when signing up

Question

In the registration form for a website, what is the best way to prevent the user from continuing until all the required fields are filled in? For example should the "submit" button be grayed out until the username, password etc. be filled in? By the way, beside the field where the user chooses a password, as they type it indicates the acceptance: "too short" "good", "passwords don't match" etc. (I know some are against making the user confirm their password but I've made my mind on this).

Answer 1

I'm a fan of putting a red asterisk next to required fields, with a popup explanation when the asterisk is hovered.

Outlining fields in red if a user focuses and then blurs from that field without entering a valid entry is also useful.

Answer 2

Greying out the submit button would confuse the user in my opinion. Follow the standards and make it easy for the user. Just a small asterisk next to required fields or an outline is enough to let the user know these are required fields. A good design pattern is to provide instant feedback as soon as the user fills out a field:

http://alittlecode.com/files/jQuery-Validate-Demo/

Answer 3

If you have both required and optional fields, it must be obvious to the user which ones are what.

A simple tag or badge with "required" or "req" would probably do the trick. Beth's suggestion of an asterisk would work as well, though it's more subtle.

You could also make the required field's stroke a different color as well. Perhaps, put an exclamation point icon next to the field?

Whatever you decide to do, it should be consistent and feedback should be provided immediately if the user has made a mistake without submitting first.

I wouldn't gray out the submit button unless you have these indicators in place. Otherwise, the user wouldn't know what fields are required.

Answer 4

Although I actually support the idea of disabling the submit button until the form is 'submittable', that behaviour in itself does not indicate the field(s) with issues.

The asterisk is a good indicator on which fields are required, but does not tell if a field is in error, nor the kind of error.

So, in short:

1. Use an indicator on which fields are mandatory
2. Use instant feedback to tell if a field input is wrong (illogical, out-of-bounds etc).
3. Remember that some fields can have logical relationships that need to be taken care of (i.e. if A = X then B cannot be Y) and find a way to give proper feedback in those instances.
4. Disable the submit button until the form is OK to submit. Then disable it again (or change it in some other way) when submitted to give a visual feedback on the action.
5. Whatever you choose - be consistent.