42

We have a few different forms as part of a web-based medical application. These forms have quite a few fields - 10-20 depending on the form. Each has at least 5 or so required fields. We currently disable the save button until those required fields are all completed.

We've been debating whether it's a better user experience to make the submit button enabled by default and then display an error message (and highlight missing required fields) if the submit button is clicked before all required fields are filled out.

Any research or sound opinions on what might be better? We're leaning towards the latter approach since our forms are pretty long -- allowing them to submit then find errors might be more efficient than the cognitive load of searching through the form to see why the button isn't enabled.

1
  • Lots of good answers here - on the same wavelength I was thinking. Also a little more detail - this is used by administrative users who will be filling these out fairly often. So we don't need the level of hints that might be a appropriate for someone only using the form once. But that's just for our particular app.
    – Voodoo
    Aug 9, 2011 at 18:01

6 Answers 6

32

If the button is merely disabled, users will

  1. Think the application is broken,
  2. Not immediately realize which fields are unfilled and
  3. Not realize the fields are unfilled until the very end, which is annoying

So, I'd suggest telling your colleagues exactly what you told us, which is that

allowing them to submit then find errors might be more efficient than the cognitive load of searching through the form to see why the button isn't enabled.

1
  • Good points. As I added to my original question, our audience is people who are administrators and will use this regularly, so I think #1 isn't too likely. However, #2 and #3 are good points, particularly since it's a pretty complex form.
    – Voodoo
    Aug 9, 2011 at 18:02
12

If the submit button is disabled, you definitely have to tell the user why this is so.

So why not display a short message telling the cause for the disabled button when this is the case?

This short message could be shown under the form - maybe in red or highlighted in another way. And then this approach provides the better user experience in my opinion.

Probably you have to implement the other approach anyway, for users without javascript or so ...

5
  • 4
    +1 but I'd highlight the "offending" fields as well. For example with an extra colored border or a clearly visible exclamation or question mark to one side. Aug 9, 2011 at 6:44
  • 1
    +1 Totally agree. I would like to add that it is crucial to have a good message in this scenario. The message box should tell the user what is wrong, why it is wrong, and how to solve it. Aug 9, 2011 at 8:25
  • As @Marjan says: Visualize the required the fields directly. You can also use a discrete visualization at first (eg. the (*) mark), and then use a clearer visualization (eg. a bold, red border frame) if the user tries to submit an uncompleted form. This should not replace the error message, but be used in addition to the error message. Aug 9, 2011 at 8:43
  • Agreed. We'd use multiple visual hints. At the very least - a red * by required fields. If required fields are empty on submit, there would be an alert-style message, along with those fields being highlighted. Probably a message at the top of the form as well listing which fields are missing/invalid.
    – Voodoo
    Aug 9, 2011 at 18:07
  • Thanks, you guys are right: I forgot the highlighting of the box with wrong data which is very important.
    – caw
    Aug 16, 2011 at 0:28
3

The added value in leaving the "Submit" button enabled is that the user doesn't care what's required. i click submit and i want to be done with it.

We go out of our way to indicate when something is not yet valid:

enter image description here

They can still click OK, but if there's a problem, we quickly and easily direct their attention to the invalid item. We even put keyboard focus there, so they can get on with important stuff:

enter image description here

Through my own (and i've observed other users) use of the software, i don't care about what's required. And i've learned that the software will only let me save if everything's done. And the software will even focus the items i have to care about.

So my procedure in the software has become:

  1. F5
  2. if screen still open, then type in what it wants
  3. goto 1
2
  • Wouldn't it be nice to have an interface that starts you at step 2 instead? Aug 10, 2011 at 17:31
  • @Alex Feinman: It does (start you were you need to be)
    – Ian Boyd
    Aug 10, 2011 at 19:54
2

The best practice on form submit is to disable the submit button (and indicate some kind of busy state) to avoid duplicate submission. I wouldn't do anything which might confuse that issue, which I think disabling the button for any other reason would.

I see where you are coming from, but really, if you are disabling the button for a reason, then the user has to work out that reason. The disabled button is an indirect indicator of requirements. Far better to indicate those requirements directly and avoid the extra step - it will reduce the number of completed forms.

You might also want to consider whether to validate the fields inline (with validation after completing the field), so that the issue is avoided somewhat. It also helps when the forms are long and the submit has a potential to highlight a lot of errors. You're already presumably doing some kind of validation in order to detect whether to enable the submit button, so it cant be a great leap to doing inline validation? Keep the success indicator prominent, permanent and outside the form field.

Read more about the subject of inline validation on the A List Apart site, there's some useful info there including consideration of whether inline validation is appropriate for a given form. For example, it is more useful on more difficult questions, but the inconsistency of having it on some but not all questions is debatable.

(Consider A/B testing to check these changes improve your results)

1
  • Thanks for the link. We already to a fair amount of inline validation (a certain ID field has to be a minimum number of characters, for example). Inline validation is really helpful and I do it on a number of forms. These are long enough that I'm not sure I want to have the usual green check for "ok" on every single element.
    – Voodoo
    Aug 9, 2011 at 17:59
0

The problems (IMO) with disabling the submit button - and, I presume, using javascript-like to validate and display messages - are twofold. Firstly, the user needs to rescan the entire page to identify what is invalid, and realise that they must have put something wrong. This is a high cognitive load, and/or some quite difficult displaying of appropriate messages.

However, secondly, more complex validation ( i.e. across multiple fields ), and if you do as-you-type validation, the user will see error messages flashing in and out, or messages showing on fields they are not currently entering.

I would prefer to see a button that enables you to "progress" - so submit the changes, validate your input, and move on. That feels like what I want to do. Disabling a button indicates that this is not a viable action, that is, that submitting the form ( validating and moving on ) is not something I should expect to do. Sometimes, when clearly indicated, disabling the button for REQUIRED input is OK, but not for INVALID input.

All, IMHO, of course!!!

0
  1. Highlight incomplete fields. Use an innocuous method, e.g. a light gray background, so you are not yelling at the user for something they are about to do.
  2. If users enter illegal data, highlight that in a different way (red tint background?) to indicate that something is really wrong there.
  3. Disable the submit button until the form is valid, but have a summary of what needs to happen for it to be valid right on or near the button. ("Name and three other fields are blank", or something more clever than that.)

... Note I said "valid", not "complete". There's a nice section in About Face 3 on incomplete forms. The advice there is that if you can make use of the form in an incomplete state, do so, and find another way to acquire the rest of the information. This only works if you have people periodically reviewing the forms and adding required information, however--which may not match your users' context of use.

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.