Avoid button confusion by having a single button on the configurator

[holly-cummins]

Resolves #371

We noticed in the workshop, and @insectengine noticed it too, that having two buttons on the configurator is confusing. We want a big button people can push to bypass selection, but we also want people to push the 'take me to my tailored workshop' button if they've made selections. I'd wondered about different button positions or moving buttons, but I think the simplest thing might be to have one button, that just does the right thing.

I was originally going to make the ‘take me to the default’ option disappear once a button had been clicked, but it either caused a layout jump, or left a big blank spot. Then I realised that no one would use the ‘take me to the custom’ workshop unless they’d chosen something, so we could have both buttons in the same place, and only show the relevant one.

Three things are lost doing it this way;

• To get an ‘everything’ workshop people have to manually click each box, and of course that might not even be what we have defined as our default
• There’s also no way for people to get an ‘all os’ workshop once they’ve clicked one radio button. However, both of these can be fixed just by reloading the page. I think the tradeoff is worth it for the improved usability.
• If someone wanted all OSes but no features, they couldn’t do that at all, even with a reload. They could click and unclick a feature box, but it’s a bit of a hack.

If it really bothers us we could add an ‘all’ radio button, but for now I think it would be just clutter.

To draw attention to the fact that the mean of the button has changed, I put a little animation which does a radial fade-out of the outgoing text and a radial fade-in of the incoming text. I also put a little flash on to further smooth the transition and draw attention.

To test this, go to the front page and try clicking on the selection fields.

[github-actions]

🙈 The PR is closed and the preview is expired.

[insectengine]

Actually, I think this is now even more confusing as we don't visually indicate to the user that the configuration is optional below the button. And once they configure below the button to submit is above the selections, which isn't a common practice.

I don't understand why we're compelled to have only one button here. Why can't the "Go to the default workshop" be a large link at the top and "take me to my custom workshop" a button below? It seems like this one button solution is technowizardy just for technowizardy's sake.

If we absolutely must have only one button, then perhaps this can be mitigated by telling the user the configuration is optional.

[insectengine]

Additionally I added more space above the single button because it's currently crammed up against the title bar.

[holly-cummins]

I don't understand why we're compelled to have only one button here. Why can't the "Go to the default workshop" be a large link at the top and "take me to my custom workshop" a button below? It seems like this one button solution is technowizardy just for technowizardy's sake.

We could have more than one button, but with the following requirements:

• Before anything is selected, "take me to the default" should be most prominent
• After something is selected, "take me to the default" should be very hard to find

What we saw in the workshop is that people would make selections, and then click the biggest button. So that would bypass their selections, and was a totally broken experience.

Making "take me to the default" always-small, and not-a-button would solve that problem, but then I think it's not very obvious to people that selections are optional. The configurator adds some friction for people who want to look at the workshop, so I was aiming to reduce that friction by having a large bypass.

I like the "or configure" text, though, I think that makes the expected behaviour clearer.

[insectengine]

I see a couple options.

1. Make to columns with a vertical separator. On the left "Default Workshop Experience" and a large button, on the right the "Configure your Workshop" content and a "go to your custom experience" button. This way they are visually separated, and marked clearly.

2. Have the large "go to default button" and have the configuration dimmed/disabled but have a switch to "Customize workshop experience". Then, they select the switcher and the configuration becomes active (but the default is dimmed). Beside the "Go to Custom Experince" button could have a cancel option that will reverse the switch.

[holly-cummins]

I see a couple options.

1. Make to columns with a vertical separator. On the left "Default Workshop Experience" and a large button, on the right the "Configure your Workshop" content and a "go to your custom experience" button. This way they are visually separated, and marked clearly.

I like the two columns, since that will be friendly to the laptop screen (see below). Do you think it then also works to disable/dim the 'default workshop experience' button as soon as something is selected? The button is basically useless as soon as someone's selected something, so I want to reduce (a) the ability for people to choose it by accident and then get the wrong workshop and (b) the visual attention the 'wrong' button takes on the screen.

2. Have the large "go to default button" and have the configuration dimmed/disabled but have a switch to "Customize workshop experience". Then, they select the switcher and the configuration becomes active (but the default is dimmed). Beside the "Go to Custom Experince" button could have a cancel option that will reverse the switch.

Hm, wouldn't this one involve a few extra clicks, because people have to activate the panel before they can use it? That seems like a friction that's not adding all that much.

I like the 'cancel' option might be helpful, though, to avoid the problems I mentioned above with the single button. Or perhaps a 'reset', but same idea.

The other problem I saw in the workshop is that on a laptop screen, if the button is at the bottom of the list, people have to scroll to get to it. That was another reason I moved the button to the top. If people can't see the 'right' button and they can see the 'wrong' button, it's extra-catastrophic, because of course they'll push that one ... but even without that, the scroll is annoying. I could work around the real estate issue by just making all the fonts smaller and shrinking the spacing a bit, to ensure there's no scrolling even on a laptop screen. It's most likely that people will be doing the workshop on a laptop, so that screen size is important.

[holly-cummins]

I spotted a problem for urls like https://quarkiverse-quarkus-workshops-pr-398-preview.surge.sh/super-heroes/index.html?os=mac (where parameters are set on the url), so I've fixed that, and adjusted the spacing as @insectengine suggests. I've held off bigger changes until we decide what we want.

[insectengine]

I see a couple options.

1. Make to columns with a vertical separator. On the left "Default Workshop Experience" and a large button, on the right the "Configure your Workshop" content and a "go to your custom experience" button. This way they are visually separated, and marked clearly.

I like the two columns, since that will be friendly to the laptop screen (see below). Do you think it then also works to disable/dim the 'default workshop experience' button as soon as something is selected? The button is basically useless as soon as someone's selected something, so I want to reduce (a) the ability for people to choose it by accident and then get the wrong workshop and (b) the visual attention the 'wrong' button takes on the screen.

That could work. When the user hits the page, the default button is active and the custom disabled. If they select anyting on the right, then the button's active status switches.

I've roughly laid out how a two column could look (but both buttons are active in my example).

[holly-cummins]

Thanks for visualising it, @insectengine, that really helps. I think what you have looks really good - the two columns make it clear that you're choosing between two paths, and with the switching of the active status should idiot-proof it. Do you think I should add a reset button, or keep it simple until people complain/we spot people getting in trouble in workshops?

I guess this means there's no justification for exciting animations on the buttons. 😭

[agoncal]

This UI is getting better everyday

[insectengine]

Thanks for visualising it, @insectengine, that really helps. I think what you have looks really good - the two columns make it clear that you're choosing between two paths, and with the switching of the active status should idiot-proof it. Do you think I should add a reset button, or keep it simple until people complain/we spot people getting in trouble in workshops?

I guess this means there's no justification for exciting animations on the buttons. 😭

Ok... I see a flaw in our two column/switcher solution. Because the desktop selector is a radio button, there is no way for the user to select default without refreshing the page. Adding a reset button would fix this but it introduces an additional click. The simplist solution would be to just remove the disabling of buttons so they are both active. The user would then always be able to select default no matter the form status, with only one click. With two columns, I don't think users would be confused by two buttons and NEED the active/disable switcher to understand what to do. I'd suggest we go this route and field test it to see if users are confused by the workflow.

[holly-cummins]

Ok, @insectengine's design implemented! All clever enabling and disabling of buttons ripped out (sob). All fancy animations to make people think there's magic happening when they choose configurations ripped out (sob).

My one concession is that I didn't squash my commits, so that if at some point in the future we decide what the workshop really needs is fancy text-melding animations, we can go back to them.