12

Allowing a user to submit and find errors is likely optimal compared to the cognitive load of searching a form to see why the button's disabled. However, this could be avoided by providing real-time validation feedback.

So then, which scenario is more user-friendly and prone to less fuss and errors?

  1. Disable submit button until all the fields are filled out and valid. Shoe inline validation in real-time.
  2. Don’t ever disable the submit button and only show validation errors after the user hits submit.

The forms are short in length - usually no more than 6-8 fields.

Improve this question
1
  • 2
    Buttons should never be disabled. It's an anti-pattern.
    – DA01
    Apr 14, 2015 at 18:49

2 Answers 2

Reset to default
26

TL;DR: Don't disable the submit button and wait to present errors until after the user has hit the submit button.

Studies have been conducted showing that users tend to complete forms in full before fixing errors, regardless of error presentation.

One such study looked at how users reacted to different error presentations: Usable error message presentation in the World Wide Web: Do not show errors right away, Interacting with Computers, Volume 19, pages 330-341 (2007)

Six types of error presentation were looked at:

  • Immediate, inline to the fields, showing errors one by one.
  • Immediate, in a dialog, showing errors one by one.
  • After submit, inline to the fields, showing errors one by one.
  • After submit, inline to the fields, showing errors all at once.
  • After submit, in a dialog, showing errors one by one.
  • After submit, in a dialog, showing errors all at once.

What they found is called out in this research article: Working towards Usable Forms on the World Wide Web: Optimizing Date Entry Input Fields

Bargas-Avila et al. [24] compared six different ways of presenting an error message, including inline validation, pop-up windows, and embedded error messages. People made fewer consecutive errors when error messages appeared embedded in the form next to the corresponding input fields or one by one in a pop-up window. This was only the case if the error messages showed up at the end after clicking the send button. If the error messages appeared at the moment the erroneous field was left (inline validation), the participants made significantly more errors completing the form. They simply ignored or, in the case of pop-up windows, even clicked away the appearing error messages without reading them.

To break it down a little more:

  • Users have two modes: completion & revision mode
  • Users will tend to ignore immediate errors when filling out the form
  • The most effective error presentations were:
    1. After submit, inline to the fields, showing errors all at once.
    2. After submit, inline to the fields, showing errors one by one.
    3. After submit, in a dialog, showing errors one by one.

To apply this to your situation:

Don’t ever disable the submit button and only show validation errors after the user hits submit.

... is the correct course of action.

Presenting error immediately inline can, according to the above, distract the user and take them out of the task of completing the form. Allow the user to finish their "completion" mode and then present errors after they hit submit.

Improve this answer
4
  • +1 Great answer. I hadn't seen these articles before but from personal experience I've come to exactly the same conclusion. Except for unusual situations, real time field validation can cause user frustration and distraction and is a regrettable trend today. Form autocompletion, a popular feature with browsers, makes real time validation even worse as users frequently need to go back and adjust autocompleted forms.
    – tohster
    Apr 14, 2015 at 16:11
  • This really deserves to be moved to the duplicated question. About inline validation, I understand that leaving a field one starts ignoring it, but what if it happens at each keypress? Does it make any difference?
    – bigstones
    Apr 16, 2015 at 5:49
  • @bigstones - yes, validating in real time as the user types is worse. Take a phone number for example - the field will declare itself in error until all 10 digits are typed in, you're telling the user they've failed before even giving them the chance to do it right. Add in geographic location where phone number are different lengths and now it just gets more confusing.
    – Nicholas Pappas
    Apr 16, 2015 at 15:57
  • I would like to add that the abstract mentions "77 and 90 participants" and does not state anything about the chosen participants (i.e. are they tech savvy or not, are they completely random, ...). The low amount of participants and the lack of any statement about who they represent does not feel like this is the definitive answer and more research should be done in this regard.
    – Didii
    Jan 10 at 10:57
5

I would use a mix of your options:

Show an inline validation and don't disable the submit button.

If the form is still invalid when clicking submit you could auto scroll to show them (if they've get "out of the screen") and show the errors below the fields until each field is modified. This approach is currently used by Google, Facebook and Twitter.

In case you want to disable the submit button, you MUST at least show a message next to it giving the reason why it's disabled because if you don't it could cause confusion to the users. Anyway I don't recommend it, remember in that case you are supposing the user is thinking (and thinking correctly) "one step ahead", which is a really bad UX design practice.

If you're going just with post submit validation, be sure about the clarity of the labels that describes the input and consider to add a tooltip or some indication to get higher chance of submit success

Also a good after-submit-validation feature would be (taking Twitter sing up page as example) to put the focus on the first field that contains errors to avoid the need of the user to navigate to that field.

Improve this answer

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