Wizard accessibility considerations

[andoyle]

Hey folks, I'm researching a wizard pattern and I've a few questions around accessibility to help me move forward. This may require an office hours but wanted to get my thoughts down here first.

Button placement

When using a wizard to fill out a form, it makes sense to have the primary button left aligned for keyboard users but is it confusing to have "Next" on the left and "Previous" on the right for mouse or screen reader users? On the flip side, does it become confusing for keyboard users placing the buttons the other way around?

To fix or not to fix buttons

On a setup wizard, typically the buttons are fixed at the bottom, leaving the main body to contain various functionalities and interactions. Some considerations here:

• On large screens the buttons are very far apart,
• it's heavily designed for mouse users,
• how do keyboard and screen reader users navigate complicated flows,
• main body content can become covered by the fixed buttons.

On the flip side, does it become confusing if buttons aren't fixed and move around up/down, and then how do we handle the width between them.

Interactions

I've seen setup wizards with LOTs of interactions, such as using a side modal + modal on top of the side modal to interact with the main content. Should the wizard pattern care about all these cases or just focus on the wrapper?

The three wizards I've identified are:

1. Forms 2. Setup 3. Checkout.

Each slightly different to the next. Should the wizard try to cater for all three cases in one design or have a version for each? The reason I ask is that a user could in some cases interact with three different versions on a regular enough basis or together in a particular flow. Would changing the pattern then cause unnecessary strain on the user?

I feel there are tradeoffs in all these points. Thanks in advance 🧙

[serifluous]

Hey @andoyle !

Button placement

We don't do a great job of writing this on the doc site, but for directional actions, especially in a multi-step flow, it can make sense to have the primary button right-aligned. The layout can still make this odd, though, especially since the primary button can end up so far away from the form. For any user, I think you could make the case that either having "Next" on the left is "better" because it's the primary action, or having "Previous" on the left is safer because it won't accidentally submit the form.

Fixed buttons

Our team generally hasn't been a fan of fixing actions to the bottom of the window. It's a little too easy for customers to save/submit things that they can't see out of view. Once it becomes a pattern, it also gets stretched to apply to a ton of use cases where it doesn't work that well for (like the legacy control bar in Console on very short forms).

I'd say most wizard cases can be handled without fixed buttons, and in the (imo) rare cases that really need it, the product team can build something custom.

Interactions

It's mostly up to what you want to keep in scope. If the pattern as you have works well enough so that the Side Modal content could be moved into a full page/wrapper, then it's probably fine. For the use case you're showing specifically, I'd recommend checking with someone on Segment design to see if what you have with the wizard pattern so far is good enough for them to migrate that flow to eventually. If not, you can either address it or document that you've left it out of scope.

3 Wizards

It's hard to say what would cause unnecessary strain on the user without research. But! I bet there's been enough research done on Twilio on one-off wizard flows, that you might be able to crowdsource some insights.

It could be interesting to explore both paths: 1 going super-specific on each use case, and 1 that tries to fit all use cases into one design. And then making a call on whether the super-specific variants are actually meaningfully better than the generic one—especially if they can all end up in one single flow.

Happy to talk about this in an office hours! And/or if you want to share a Figma link to the latest work you have, we can collaborate in there.

[andoyle]

Thanks @serifluous this helps 👍

I totally agree with the fixed buttons too. I'll share a Figma with you sooooon 🙃