Placement of buttons for Previous, Next, and Save Draft actions

Question

I am designing a five-step form. The user can exit the form and return to it later. So I have a Previous, Next, and Save Draft action.

What is the ideal placement of the buttons/elements?

I want them to be left-aligned below the form fields, and I want to clearly indicate the primary action: Next.

So far I've come up with this:

Any thoughts or solutions are appreciated.

Answer 1

Left-aligned buttons below the fields would provide a clear path to completion. Luke Wroblewski discusses clear path to completion in his book "Web Form Design" (PDF that contains some of the images).

Here is an example from the book on how alignment can make the path of completion clearer:

Similar to the example above, you may consider having "Next" be the only primary action, and having "Previous" and "Save Draft" as secondary actions (links).

Although you did not ask about this directly in your question and you may already plan on implementing this technique, I would also recommend using this in your form:

This would clearly indicate to the user which step they are on and how many steps are left. They would also be able to click any step in the form, rather than having to click the previous action multiple times to return to a single step.

Answer 2

Button alignment

Left aligned buttons do have several advantages:

• fits forms structured with left or top aligned labels
• no guessing where to position the button on a wide screen
• works well on mobile

Button prioritization

• assuming most users complete the entire process in one session Next is the primary action and should be highlighted as such
• Previous is secondary, i.e. should be grey (or even a link)

Save draft

• Can be a nice and convenient feature if the form is very long or there's a reason why users would want to save
• Save also requires some thought: how do users save, what is displayed during saving the input and what is shown as a confirmation? Can they save again? How do they access a saved form afterwards?
• If you can afford it I'd suggest to consider auto-saving the form (see composing emails in Gmail as an example)

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

Answer 3

The design approach you have taken is good, but a few things to consider:

The step by step approach could be for

1. Just organizing - here Previous works well

2. One step affects the next one. Does that mean the user loses - This makes Previous a potentially dangerous function, in the sense that user might lose some data.

   In this case I would not want to give Previous as much prominence and might even not have it. Instead I would show a list of the 5 steps and make them clickable. The completed steps would show tick mark. This way you can have visual indications on the those labels to show that backing up to step 2 from step 4 could affect step 3 and 4 data.

Second thing to consider is what should happen when one clicks Save as Draft, would the user exit the wizard or remain in the form itself. For example if the Save as Draft is there as the user is entering a lot of data and should not lose it while they are working on it, then the user remains on the form. If it is because the user may complete the process over a period of time, then they'll likely exit the form. In the first case, you should consider autosave as that ensures data is not lost and then you do not need the button.

Answer 4

If you are stepping someone through a process I would have the next button act as a save in the background. You will have to store the data for them to go back to anyways.

Unless they are writing bulk copy and might want to save the draft before moving to the next step. Is this the case?

Answer 5

Regarding button placement, if Save Draft (whatever you decide to call it) is going to exit the workflow, maybe you should place it further from the others - it would be disruptive if someone accidentally jerked their mouse a few pixels to the right before clicking, and got kicked out of the wizard (even though they will not lose data).

I expect sites to save the entered data (except for passwords) in later pages if I want to revisit a Previous tab, presumably this will be the case here (else you don't care enough about users to let them save midway ;)

Next can be repurposed as Finish for the last step. Also, for the first step if Previous is hidden, you may prefer to keep Next button in the same relative location instead of moving it around.

As you considered changing the title for Save Draft in comments on the other answers, a couple of alternate suggestions:

• Save and Exit : only if this is a seperate popup that will be closed automatically
• Complete Later : Implicit that you will save the info as workflow is suspended

Answer 6

I always recommend adopting mind-map approach.

Considering right-hand users - Previous / BACK is always to the left and Next is always to the right, and most importantly Save / Draft/.. etc., are context based actions, hence should be in the toolbar area of the screen (top, bottom - I prefer bottom).

NOTE: In addition when YOU ARE NOT USING TABS you should provide the train-component to show current position / navigation.

Find the image below carrying the depiction of my explanation in more details.

Answer 7

There are serious usability flaws in the placement of your buttons that none of these answers address.

Your Next and Previous buttons are too close together. Users can click one when they mean the other on accident. You should use directional mapping and place the next button to the right. This is what users expect and are used to when they paginate and it helps prevent clicking mistakes.

Your previous button looks disabled. Not sure if it's disabled in the image, but a non-disabled previous button should have more color contrast so that it looks active.

Your Save Draft link sticks out like a sore thumb. It looks like you ran out of ideas where to put it so you haphazardly slapped it on at the end.

Clicking the Next button should take users to the next page, but also automatically save the user's progress without forcing the user to manually click Save Draft. You can let the user know this occurs by displaying a "Your information has been saved" notification whenever the user presses Next.

It's not necessary to offer a Save Draft button if you have the above in place. You could motivate users to get to the next page before they leave the form.

But if each of your form pages have many fields, a user might need to leave in the middle of the form before clicking Next. In this case, you can offer a Save Draft button. It should be a neutral button placed next to the Next button.

Here's an article on buttons that every designer should read: http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/