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

Question

Here's my current situation:

^{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?

Answer 1

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

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.

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.

Answer 2

Let's start from the beginning:

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

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

Compare it to this:

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