2

Here's my current situation:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It's a typical wizard that follows this Path to Completion advice. However, regardless of how I organize the labels and inputs, the path of completion would hint that "Previous" is in fact the most common and/or recommended button to click when done filling out the form.

How to avoid that "Path to Completion" results in "Previous" becoming the next logical action?

I've thought of a few ways to do this, but none of them are really satisfactory:

  • Reverse the order of the two buttons. This doesn't feel "natural", not for predominantly LTR audiences anyways. To make this "solution" somewhat better the "Previous" button could be turned into a regular link, but I dislike that for my situation because (even though "Next" is the obvious default) the "Previous" action will be chosen quite often.
  • Place the "Previous" button below the "Next" button. Same objection as the previous point.
  • Align the "Next" button left with the input fields. This is aestethically not very pleasing, because the "Previous" button would be "hanging" right-aligned with labels.

Finally, I've also checked this answer, specifically the Path to Completion advice, but it doesn't say much about my current question.

Any suggestions? Or should I just stick with my own example?

PS. My situation is for a web application, though I'd think that this doesn't matter too much?

  • What about putting a back button in the upper left corner like most web browsers/file browsers/mobile apps do ? – user42730 Jan 23 '15 at 13:40
  • @AndréDaniel It would certainly be an option, not sure if I'd prefer it though: users will probably not find "Previous" easily enough when they need it. – Jeroen Jan 23 '15 at 16:35
3
  • Not all form actions are equal (Reset, Cancel, & Go Back are secondary actions: rarely need to be used (if at all), Save, Continue, & Submit are primary actions: directly responsible for form completion).
  • The visual presentation of actions should match their importance.
  • Avoid secondary actions if possible. Otherwise, ensure a clear visual distinction between primary & secondary actions.

Based on these guidelines from the answer you also linked to I would use the regular link instead of "Previous" button. Even though you dislike it.

form with path to completion action as primary action

Returning to previous step is secondary action so it looks like one. I also changed the wording, so there is a lesser expectation for the possibility to go back.

I get the notion from your question that it is necessary for users to be able to return to previous step but you don't really want them to. What you could do is to hide (make even less visible) the path to the previous step. In that case make all the previous steps available only as links on the path presented.

form with less visible previous step on wizard path

But if you still like to use two buttons per page, here is a article from UX Movement on guiding users by color contrasting buttons: How Button Color Contrast Guides Users to Action.

2

Let's start from the beginning:

If you want to attach to the path to completion advice, you should do something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Compare it to this:

enter image description here

Improvements:

  • Labels aligned with inputs => Less visual fixations, just 1 visual direction, less horizontal space, but more vertical space.
  • "<-" back arrow symbol to improve scanning.

Some additional read: Why Users Fill Out Forms Faster with Top Aligned Labels

  • 1
    Thank you for taking the time to answer. I do realize there's also the issue of top aligned labels, but I see that as a seperate choice / issue (I may later update my question to better reflect that if I have time). My question was mainly about the placement of the Prev/Next buttons. On that point you seem to agree with @locationunknown's earlier answer though, and I'm now indeed inclined to take that advice. Tyvm! – Jeroen Jan 23 '15 at 9:47
  • You're welcome. I think that if the wizard/form has this size (just 2 fields) and there are just two possible actions, this would be one of the best possible approaches. Probably the advice would be different if you'd had more buttons or more data in the fields. – Alejandro Veltri Jan 23 '15 at 12:57
  • With the back arrow symbol on the <- Previous Step link, it kind of looks like it's an arrow pointing at the Next button. It makes me wonder "Does pressing the Next button return me to the previous step?" – Dan Henderson Aug 24 '15 at 21:01

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.