Inactive form submit button problem

Recently I came across a recommendation from colleagues from Yandex. They audited the advertising of one of my clients and at the same time gave advice on the site. As a UX designer, I was surprised by several of these tips, today I’ll tell you about one:

“We recommend making the form submit button inactive until the user has completed all required fields.”

It should probably look something like this

I immediately want to ask: “Why?”

Let's try to compare the two scenarios.

Scenario one: form submit button is active

The user looks at the form, looks at the button, and begins to fill out the form. Reaches the end, presses the button. And for most users, this is where the scenario ends. The data is sent and the script ends.

Let's move on to the minority who did not fill out all the required fields. They click the button and see an error message. It explains to them that they need to fill out all the required fields in order for the form to be submitted. Plus, users see these same fields; they are also highlighted in the form.

Users immediately understand what exactly happened and what needs to be done next. Filled out, sent, script completed.

Scenario two: the form submit button is inactive

Users look at the form, look at the button – and at this point they begin to divide into groups. Someone immediately realizes that the button is inactive, and asks the question: why is it inactive? And is it really inactive?

Some users click on it to make sure it is inactive. Some people, even without clicking, believe in its inactivity and go looking for information on how to make it active. Part finds the clue and carefully fills out the form. But, as we see, users already at this stage have to think more about what is happening than in the case of the first scenario.

Let's move on. Someone initially didn’t understand that the button was inactive (maybe it had that design?), filled out the form, the button was activated, clicked, and the script completed successfully.

“So, the button doesn’t work? Is the uniform having a day off today? What needs to be done to make it work?

And someone did not pay attention to the button at all, filled out the form, but did not fill out the required fields – and clicks on the inactive button. Nothing happens. There are no error messages. The button is inactive. Here, some users will go looking for instructions and figure it out, while others will simply leave the page.

Let me make a disclaimer right away: everything depends on the context. If it’s some super-important form that absolutely needs to be filled out and submitted, users will struggle with the interface until they figure it out. It will be inconvenient for them, but this will not affect conversions. And if this is just another form of ordering something or making an appointment somewhere where there are many competitive offers, then you can leave.

You can come up with a crutch when, when you click on an inactive button, instructions appear on how to activate it. But then how does this differ from the first scenario, besides the non-obviousness?

Conclusion

On average, I would recommend not using inactive buttons under forms in interfaces. Here are the reasons:

The design of an inactive button does not always allow it to be identified as inactive
An inactive button usually does not provide any clue as to why it is inactive.
We are not afraid that the user will click on the “send” button when not all fields are filled out. Well, it will press and press. All that happens is that he will receive an explanation of what happened and instructions on what to do.

But this is on average. In each specific case, you need to make a decision separately. And, first of all, be able to answer the question: “Why are we doing this?”

—

Useful links:

Article “How I design forms.”

My Telegram channel. About interface design and freelancing.