0

Hei, was thinking: what is better from user perspective:

  1. The form which if not filled with all mandatory fields the "next" button is disabled

or

  1. The form with "next" button enabled, but after clicking it not filled inputs will be red?

Background of the problem: user is filling the form (has "next" button disabled") and aborts filling, after some time he comes back and sees the form in the list with the status "needs more information" and clicks on it, then in my opinion it's better to show him red inputs (so he will find easy all mandatory inputs he didn't fill) and disabled "next" button. But it's kinda different logic, why we are not showing the red inputs while filling the first time (now first time fill is with only disabled "next" button, red fields can't be displayed because user don't have click to action).

1
0

Start by making it absolutely clear which fields are mandatory. The border on the fields might be blue (before turning red), they can be on a different section, their titles can be bolded... See what fits the page best, but in my experience, just the "*" mark is too small to be noticed.

The fields could also benefit from validation on "out of focus". So if a user has it on focus and then leaves it empty or with invalid info, he/she gets the red border, warning or whatever you're gonna use to point it out.

I don't believe there is a clear cut answer on what is always best regarding form confirmation buttons and their relationship with mandatory fields.

My opinion is that pushing a button expecting something to happen and then getting a message, even a nice one, saying "WRONG!" is a bit frustrating. On the other hand, trying to push a button and then noticing the button is there, it says "Do thing" but can't be pushed to do said thing is also not the best.

Maybe you can place a message like "Please fill all required fields to continue" where the disabled button would be. This message then changes to show the confirmation button when all required fields are filled appropriately (ideally with a nice smooth transition).

0

It depends on the complexity of the form.

If the connection between the disabled button and the not valid input fields is clear, go for it. Mostly this is the case in small forms with only a few fields an preferably in the same viewport with the submit button.

But this might not always be the case. In longer forms or forms with complex rules the reason for the inactive button might not be clear. In this case I would prefer a clickable button that shows me the not valid fields.

But! as Arthur mentioned the first thing to do is, to make it clear to the user which fields are mandatory or what input is valid. You could also consider if you rather would like to brake your form down into smaller parts, which makes forms less frustrating to users. A very long form can be overwhelming.

0

Go for enabled button with error / empty field highlights after submitting.

If a user skipped a mandatory field, clicking the submit button will highlight the empty / erroneous field. With a disabled button the user is left wondering what they did wrong.

I personally prefer orange highlights over red as its a little less "you're doing it wrong!".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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