Mobile forms - Where to put the save and cancel buttons?

Question

We are making a responsive website. There is a form on the site and I am not sure what type of save and cancel buttons to use where. I have found several patterns as you can see in the picture with the following variables: - Position of buttons (top/bottom, horizontal/vertical) - Autosave/Save button - Type of top buttons (text/icons)

Which solution is best practice?

Users usually fill out the form top to bottom (in this case) which would support buttons at the bottom, but convention might rather speak for the top buttons. Or do the top buttons rather belong to (native) app navigation and not to mobile site navigation? The battle for screen estate would speak for horizontal button positioning (cancel next to save), but supporting left handed people would speak for the vertical positioning. Maybe the cancel button can be even left out and the cross at the top or back button would cover this function sufficiently?

Answer 1

I think this article answers your question very well:
Why Users Miss Form Buttons Placed in the Action Bar

As they fill out the form, their eyes move from the top of the page to the bottom.
When they complete it, their eyes are at the bottom of the page. The absence of a submit button leaves them confused and uncertain of how to complete the form.

(Also pointed out in this answer, which states that we read in a Z-pattern)

Another important factor is that by missing the "save" button in the top right, the user might forget to save:

After users select their settings, they tend to tap the back button because they don’t realize they have to save. The save button is the primary action of the task, but it’s hidden as a check icon in the corner.

---

Another point of concern might be that notifications might cover an important CTA, as pointed out in Why iOS notifications are ruining my marriage:

---

So all in all I'd say placing these buttons on the bottom has a lot more advantages and gives users safety, at the expense of a little more screen space.

Answer 2

Luke Wroblewski's books on mobile and web form design are 10 years old now, but still worth a read: https://www.lukew.com/ff/.

I agree with the answer above, that big, clear buttons at the bottom of the page will do better than controls placed in the header.

Can you have both? Duplicate the controls in the header and at the bottom of the page?

The reason I ask is that I see more single-screen questions/forms now and header controls are immediately visible for those.