0

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 2
    Have you thought about having fixed header? – Kishan Feb 14 '18 at 16:56
  • 1
    Having something sticky, like a header bar, or perhaps just a (floating) button are options that are on the table, but I'm hoping to either see a more comprehensive version or something different here. – dennislees Feb 14 '18 at 17:00
  • Unfortunately, none of the answers seem to be any different. – Kishan Feb 15 '18 at 7:26
  • What is the reason they want to change this? – Levano Feb 15 '18 at 7:51
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.

  • Thanks. We're going to go with a sticky bar at the bottom. – dennislees Feb 16 '18 at 21:02
1

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.

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.