T - The checkbox requirement isn't obvious

[peterbe]

Summary When playing with @Gregoor 's work on putting the subscription form on the Subscription landing page I noticed that the UX isn't great.

The way that React code works is that the blue "Continue" button is disabled until the checkbox is checked. But the visual effect of disabled on the button isn't clear. It's just a lighter color of blue. I'm pressing the button and absolutely nothing happens. It's because that's how <button disabled> works.

I have to figure it out myself that that button is dead until I look up and notice the tiny little checkbox which unlocks the button. I don't argue that the checkbox needs to be checked before you can proceed. But let's see if we can make it all a bit better.

Audience Potential subscribers.

Rationale To maximize success we need to do (almost) everything in our power to make it easy.

Workaround None. As is.

Proposal Here's an idea. If you don't mess with settings disabled on the button (which I did here by removing that attribute). When you click the button, now the browser knows to put that native black tooltip on the checkbox.

Not every browser has this built-in natively. That's fair. We don't need to figure out which browsers do and which don't. In our React code we'll do something like this:

function onSubmitHandler(event) {
    if (!paymentAuthorized) {
        event.preventDefault();
        return;
    }
    ...
}

That makes sure browsers that don't put up the black tooltip don't actually proceed until it's been checked.

Additional context I'm not a UX expert.

[peterbe]

@malqinneh No rush but do you think you can share some expertness or at least your own gut feelings as a user of the webz onto this prior to our next triage.

[malqinneh]

Sure! Tl;dr mock-ups do not disable the button, but clearly indicate the error to the user:

[Gregoor]

Let the record show that I prefer that UX, without the disabled button too but I went with the behavior that was already there. I might pull this into my PR then.

[atopal]

I don't understand. The mockups never had a disabled button as far as I remember. We always had an error case unless I'm completely misremembering.

Disabling buttons is usually not a good idea in any case, it's super frustrating for users, who can't easily tell what to do to activate it.