Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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: Here are some of the options:

share|improve this question

4 Answers 4

up vote 5 down vote accepted

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).

mockup

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.

share|improve this answer
    
Thanks for the reply and for the link :) –  Viraj Mar 27 '12 at 17:27
    
@Viraj, you are welcome :) –  Mohammed A. Fadil Mar 28 '12 at 9:44

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Thanks for the solution Jung, I have read Luke W's article. And yes the two secondary actions confused me a little. –  Viraj Mar 27 '12 at 17:29

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.