5

Ok so I have two options on a wizard step e.g. Option 1: Go to step A, Option 2: Go to step B.

What is the best input method to use in this situation?

The wizard generally has more complicated steps and utilises a next button. With this in mind, shall I maintain the use of the next button and offer two radio button options and a next button. This method retains the next button layout but mean the user has to select a radio button option and then click next (2 actions).

Or as it is a simple step shall I drop the next button and offer two buttons, each one going to their respective step. This version benefits from keeping the step down to one action.

See mockup below as to the two options I've mentioned (please ignore the styling): enter image description here

6

This really depends on what your users are used to.

I had a similar situation in a recent project which also involved a wizard layout with a next button at the bottom. For a form on one of the wizard steps, the user had to choose one of 4 choices. Once the user chose the option, we were deciding between:

  1. Automatically moving the user to the next step of the wizard, or
  2. Showing the user that the choice was selected and letting him click the 'Next' button in the bottom of the wizard layout.

Intuitively, Option 1 seemed better as it cut down a click for the user. However, there was a nagging suspicion that Option 1 might be confusing to users as this was in the middle of the wizard and they were used to clicking 'Next' to get to the next step.

Eventually, we did some user testing on this and the results obviously showed that Option 2 was more intuitive for the user.

For Option 1, users in the test were clearly confused when they clicked a button (to select one of the choices) and were brought automatically to the next step. The replays showed them being momentarily disoriented when the next page automatically loaded and it took a while for them to figure out what happened. Option 2 users did not have such a problem.

If your users are used to the wizard layout, go with Option 2. If it's the start of the wizard, Option 1 might be the better option. As always, to know for sure, nothing beats some user testing to see how users react to it.

4

Some suggestions.

  1. Wizard pattern suppose to have < Back and Next > buttons.
  2. Radios give clear understanding of options, while buttons don't say it.
  3. Don't count clicks but provide consistent and familiar interface for users. Your aim is to successfully complete the task, not to save mouse.

So use radios (Option 2).

3

There is a significant difference between these two options. Wizard contract is quite straightforward, but the most important aspect for the users is the ability to change his mind, select different option and proceed when he is pretty sure the choice is right.

Option #1 removes that ability, which can be dangerous and make user panic. I would suggest to follow default concept and have to phases:

  1. user does some editing/selection
  2. user navigates to another page when he feels ready

enter image description here

1

The radio buttons and explicit Next button are perceivable, operable, understandable and robust (POUR - WCAG 2.0 principles). This approach will work with screen reader users (even VoiceOver on iOS, and JAWS on Windows). It also aligns with mental models as it is a UI pattern with high familiarity. This UI would be a good default pattern in most situations.

The alternative with large target touch-friendly buttons would be ideal in a touch-screen kiosk provided it is never to be connected to screen-reader / external keyboard.

0

I prefer Option 1 because of the following benefits: 1. User sees a large target to click 2. There is a single click action 3. Its just 2 choices, so user can go ahead and click on the choice to continue 4. User should be able to change his decision after moving out of this page. There should be a way to come back to this page to make that change.

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.