0

Possible Duplicate:
Button order Save | Save and next | Cancel | Previous

I have a Form widget with Five Step. Steps 2-3-4 having previous and next and cancel button. Step 1 having next and cancel button and step 5 having Previous Save Save and Repeat and Cancel button. I am worried about placement of these buttons on the form widget.

Community
  • 1
sushil bharwani
  • 1,167
  • 2
  • 11
  • 16

1 Answers1

1

As far as possible you want to keep the buttons in the same location on each page. So step 1 could just have two buttons "cancel" and "next" - right justified, and then steps 2, 3 and 4 could have three buttons "previous", "cancel" and "next" - again justified right.

By keeping the locations basically the same the user is less likely to click the wrong action at each stage. For example they can keep their mouse at the same location and click "Next", "Next", ... "Save" and complete the action. By keeping "Cancel" in the same place they will always know where to go to abort the whole process.

Step 5 is a little more problematical because it has the extra "save and repeat" button. To keep the buttons as close to the bottom as possible you'd have to leave space for the "repeat" button thus moving the buttons away from the right hand edge. However, if you keep the buttons as close as possible to the right hand edge you'd have to have the "repeat" button on another line. Neither approach is ideal.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

ChrisF
  • 14,869
  • 2
  • 59
  • 80
  • What is your layout assumption? why step 5 has to be like that? please share your assumption... – sree Jul 03 '12 at 12:08
  • @sree - I'm not 100% happy with step 5 and was thinking of revising it. The goal was to keep the buttons as close to the bottom left as possible. – ChrisF Jul 03 '12 at 12:09
  • Thanks Chris, I was actually reading cjforms slideshare which has created much of the confusion http://www.slideshare.net/cjforms/buttons-on-forms-and-surveys-a-look-at-some-research-2012 – sushil bharwani Jul 03 '12 at 12:14
  • Also here in her theory Save Should appear before Cancel and Next Should appear before Previous. So this becomes more confusing. – sushil bharwani Jul 03 '12 at 12:16
  • @sushilbharwani - my point is that the buttons should be one the same place at each step, the order could be altered, but I think the one I present is more logical. – ChrisF Jul 03 '12 at 12:18
  • @ChrisF tnx, glad u made some changes :) – sree Jul 03 '12 at 12:32
  • @Sushil: You need to read the slides carefully. As far as I understand (without hearing the talk to the slides) she starts with the (known) recommendation to align action buttons with the input fields. Then she moves on to test this with previous and next buttons, leading to the "surprise layout" were next comes before previous and is aligned with input. Then she quotes studies that show users being confused by the order and summarizes that the recommended alignment should not mess up established expectations. – Louise Jul 06 '12 at 09:39
  • @Louise thanks for the explanation. I really appreciate. – sushil bharwani Jul 06 '12 at 12:44