How to present 'Save All' button on long configuration screen?

Question

We have a large (long) screen with a lot of account configuration controls. Currently each change is automatically saved as soon as it is made, but Engineering wants to change this (for apparently good reasons) so that the changes are accumulated throughout a session and saved in a single save event at the end.

My idea is to have a 'Save All Changes' button appear as soon as the first changes is made. There is a what I call a utility section in the top right of the screen, where several high level actions and stats are made available via cards. This would make a logical location for such a button.

My problem is that if a user scrolls down the page and starts making changes below the fold (as they are quite likely to do) they won't notice the button appear.

If they try to navigate away they'll see a warning that there are unsaved changes on the page, but I'd obviously prefer to help them avoid this.

How can I provide a way of saving all changes on a long screen like this, in a way that is clear and obvious.

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

Answer 1

I suggest putting the save function at the bottom of the form, rather than the top. This gives the user a clear path to exit. If the form is long and you want the user to be able to save without getting all the way to the end, give them a sticky bottom bar that contains any save/submit actions.

Otherwise, you might consider breaking the form into more manageable chunks and providing a stepper that saves each chunk before moving on.

Answer 2

I think we have two options here. Either we can fix the utility area at the top and let content scroll through underneath it, or we can also have a floating small widget at the bottom informing user to save it. I think rather than keeping save somewhere in the centre, it might work better on right corner next to radio, it will be more easy to hit the save. Usually when users scroll through the form, they expect action buttons at the bottom and not at the top. That is something you need to figure out. If user needs to save only after going through all the entries and it’s mandatory then put it at the very end of the form, otherwise keeping it the bottom of your screen will also work.