3

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).

Improve this question

4 Answers 4

Reset to default
5

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.
Improve this answer
2
  • 1
    Good summary. However, there are plenty of ways to communicate that the form is not filled properly! You don't need to use disabled or error style, but could perhaps have the submit button orange with an explaining label, like "Almost done!". Grayed out elements and red warning texts aren't always the most uplifting or welcoming experience for the user.
    – Alexander Wallin
    Jan 31, 2013 at 14:12
  • Thanks, that's a very valid argument. Actually, I still think it should be disabled - although 'disabled' don't necessarily mean 'grayed out'. Disabled in my mind is a function (or rather non-function). How you visualize that is another matter. Still, a good point. :-)
    – CB Du Rietz
    Jan 31, 2013 at 17:27
0

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.

Improve this answer
0

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/

Improve this answer
1
  • 1
    A disagree that greying out the submit button until there is valid input is confusing. I think it is very helpful. However the greying out should not be the only measure, as others have also pointed out.
    – André
    Jan 31, 2013 at 9:05
0

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.

Improve this answer

Your Answer

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

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