6

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:

Diagram of the form layout

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.

2

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:

HMRC Tax Return form


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.

  • hi thanks for your references pic, can you send me the link of this form? thanks a lot! – Vsn Jul 7 '17 at 3:08
  • @Vsn It's the HM Revenue & Customs tax return form at hmrc.gov.uk, but you won't be able to access it unless you're a UK taxpayer. Searching HMRC online tax return might come up with some examples however. – Joel Tebbett Jul 7 '17 at 6:32
0

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.

enter image description here

  • 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

  • i want the users finish the form now, but in my form there are some field that critical like upload document im doing research that because of my form has upload document some user felt hesitant first to complete this form. Thats why im thinking about complete later -> so they will comeback to this form – Vsn Jul 7 '17 at 3:05

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.