Positioning Back, Cancel and Next in a full screen wizard

Question

Hi I have a full screen wizard that like many wizards has the back, cancel and next buttons. What is the optimum way of positioning these buttons on the screen?

Are there any studies that have looked into this.

These are some of the options, but feel free to tell me if all of them are wrong:

Answer 1

This is a good article about the wizard pattern http://ui-patterns.com/patterns/Wizard

The best is your third option, to have Next and Back buttons at the bottom right, because the user will commonly use them, he will mainly use the Next button, and he will use the Back button if he forgot something or want to check something. The Cancel button should be at the bottom left because it's intended as the exception (i.e. the user wants to cancel the process).

^{download bmml source – Wireframes created with Balsamiq Mockups}

It's very important to have the cancel button; imagine that you have a wizard with multiple steps, and you don't have the cancel button, and want to go back to where you started, then you have to click all the way back through clicking the Back buttons several times, which is horrible experience for the user.

Answer 2

I would avoid the label Back and replace it by Previous to avoid confusion with the Back button. This is especially true, when the wizard pages do not correspond with the browsing history.

And because Cancel is not very clear for Web pages, I recommend that you rename it like Cancel and Back to abc

As for the layout, I'd prefer your 3rd option where page navigation is colocated and the cancel link a bit out of focus.

Answer 3

Here's an article that you've probably at some point regarding button positioning where you have primary and secondary actions. http://www.lukew.com/ff/entry.asp?571

I think your example warrants a slightly different approach because it's a multi-page wizard and has 2 secondary buttons.

So something like this might work.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

I assume that your example is a web application that runs in a browser as oppose to a desktop application. If this is true the confusion of laying out the buttons could come from not really understanding what is going to happen upon a click of a button.

This being said, "Cancel" in a web application is relatively hard to comprehend as the users are often unsure what is going to happen after "Cancel" is clicked. We have done quite a few user test and more than 95% of users weren't clear on what is going to happen after "Cancel" is clicked.

In regards to "Back" and "Next" buttons. Those work better when there's an indicator of where the user is currently within the process.

As a personal suggestion if a form is not excessively large I would recommend to have it on a single page with clear visual indicators of sections. Think clear sub titles and lines could work well.

^{download bmml source – Wireframes created with Balsamiq Mockups}