Placement for next, prev and complete form later actions

Question

We have a seven step form that the user must take, in every step there is condition that affects the next step.

This is a government project, so the form has many fields and it takes a while to complete it, so we decided to add a "Complete form later" action in the form - when the user clicks it, it will pop up that all their information has been saved and "Please complete your form later".

But I am confused about the placement.

I'm thinking something like this:

My form is left aligned and label of the top field.

I want to clearly indicate the primary action, which is Next, but they can complete the form later.

Any recommendation will help me a lot.

Answer 1

TL;DR:

• Add another Complete Later at the bottom and move your Back and Next buttons together.

Add another Complete Later button at the bottom

I've often found that a user will scroll to the bottom of the form before deciding whether they have the time to complete it or not.

For this reason, adding another Complete Later button at the bottom of the page will benefit the user.

Most UK government sites do this:

---

Visibility

But you should also keep the Complete Later button at the top too, to increase visibility.

As Don Norman notes in The Design of Everyday Things:

In each state of the system, the user must readily see and be able to do the allowable actions. The visibility acts as a suggestion reminding the user of the possibilities.

For the same reason, you might also consider placing your Back and Next buttons beside each other.

This way the user has to search a smaller area to be able to see the allowable actions.

---

Natural Mapping vs Visibility

You could argue that having the Back and Next buttons at either side is superior as it adheres to natural mapping.

But this is at the cost of visibility, and natural mapping becomes irrelevant if the mapping isn't visible :)

But as always, user testing is the only way to get a definite answer as to which is better.

Answer 2

I like it. You got a lot of things going for you. Some of which I can provide external sources of research for. Others only are based on my own view.

The thing with the 'complete later' button is; how important is it to you? Do you want your users to finish the form now, or do you want them to finish it later? Hierarchy-wise, the button you want to be clicked should be highest (in your case, have a blue fill). The secondary button has a blue border (based on your image).

Think of what the primary action of your form is. I believe it is to complete it now. Complete later is an extra feature if the primary feature can't be completed right now.

• The back button to the left, next button to the right.

When looking at the Gutenberg diagram it is a logical position to put the next button at the end of your flow (bottom right). Again, only if you want your users to click on next rather than complete later.

• Left aligned form with labels to the top of the field.

Placing a label right over its input field permitted users to capture both elements with a single eye movement. Also, if a label indicated data that was very familiar to users—for example, their first name or family name—users did not fixate on the label separately to read it. They were able to view both the label and the input field in the same foveal area; thus eliminating the need for additional fixations and saccades.

Source: Label Placement in Forms

• Clear indication of current position with the top navigation.

• Single column layout

Present fields in a single column layout. Multiple columns interrupt the vertical momentum of moving down the form. Rather than requiring users to visually reorient themselves, keep them in the flow by sticking to a single column with a separate row for each field. (Exceptions to this rule: short and/or logically related fields such as City, State, and Zip Code can be presented on the same row.)

Source: Website Forms Usability