Best solution to inform and enable users to save changes on a page

Question

I'm working on a micro site which includes a profile section wit diverse pages. The pages allow the user to change their profile settings - e.g. update or complete personal details they provided during registration.

My issue is, that the form is quite extensive. And I've been thinking about different solutions how to let a user know that he has to actively save the changes he made and how to enable him to do it.

I have outlined and briefly visualized my approaches here - happy to get your feedback especially on the more advanced solutions. you may have an alternate approach.

In the basic approach (1) it's most likely that is will not be displayed within the visible area. So, the "Save" / "Cancel" buttons below the form are out of sight when a user makes a change on top of the form.

(2) The page will always warn the user that he forgot to save his changes, when he navigates away from the page without saving. however, I'd prefer to have a more subtle hint, that the user has to save changes he made.

(3/4) That's why I thought about a notification, telling the user that he has unsaved changes.

In (3) not in the visible area, so this wouldn't solve the problem. In (4) a box which fades in after a user made a change and fades out again. The box would always appear in the visible area - x pixels below the top browser frame.

(5) Another version of the box would even take away the save / cancel buttons on the page. So they will be available only after a user has made changes. The notification would appear (in this case not fade out again) and directly enable the user to save or dismiss the changes he made.

Answer 1

I would suggest keeping your save button at the bottom of the form so it is always visible and where the user expects to find it. Then once you have detected a inputs has changed, to highlight that row input row and to add a message to the top of the form. See mockup below:

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

Answer 2

I would put the Save/Discard buttons both first and last, clearly activated or disactivate based on if there actually are changes in the form.

Then I would make use of the browsers' built-in warning box, if leaving or closing the page without saving. This is how Chrome looks when changes are about to be lost in Gmail:

Answer 3

Can you not make it that for the user to leave the page, he MUST select 'Discard changes' or 'Save changes'? This way he will be forced to action and cannot forget not to save his changes.

It may also be useful as you have in Scenario 3 to indicate that changes have been made in order to assist the user in making his decision whether to save or discard.

Answer 4

Other than changing "dismiss" to "discard", I would go with the 5th option. It has familiarity and, unlike the others, keeps the information next to the actions.

Answer 5

If you can pin something to the view (meaning floating with the page scrolling), I would just pin the Save/Discard buttons on the top right, which should be clear enough to the user that the this is a required action.

Answer 6

Save on bottom with prompt if they didn't save and want to leave the page. Prompt has discard changes. I don't believe discard changes button on page is necessary if you are in the "My Account" section for instance. If you are in a checkout form I think a cancel is warranted as you may want to cancel the checkout process but it is kind of its own module and not really part of the site in a way. Cancel is better than discard I believe in that you are canceling a process. If you are in a section of the site I don't believe it's the same as you are not canceling a process. The user needs to be taken somewhere if they cancel. If you cancel a checkout process you can be taken to where you started. If you are in my account I think the only thing discard will do is allow for accidentally erasing your form like a reset or clear button. Same thing applies if you are adding data such as a comment on a social site or adding an email. A save or cancel for that item makes sense but for changing data a save on bottom left of the form works best I think. It's the most familiar design to people. Breaking up pages into logical chunks and having multiple saves on the page can work Web form design by Luke Wroblewski has some data on bottom left being the easiest to find with eye tracking data.

Answer 7

In my opinion versions 3, 4 & 5 don’t solve the problem of user forgetting to save changes. I suppose, that your profile editing form is used rarely (as other similar forms), so every nonstandard solutions will require some recognition (to understand them or even notice).

Messages on versions 3 & 4 can really be unnotice, but even version 5 will require a bit time to understand it — also the user can simply ignore it as something «secondary» and intrusive. Also it may have some technical problems on sensor and mobile devices (where scrolling of pages works not in the way as on desktops).

This intrusiveness of version 5 is the most weak part of the solution — it can really help not to forget changes, but may frustrate users as some blinking banners. The case is «I went here specially to change my profile, why are you talking to me this again and again?».

So, I suppose version 3 will be the most straightforward and clear.

But you may try another case — simply allow to user to go back without saving (maybe with some «gmail-like» hint on the top of page “your profile wasn’t changed”), but when he returns to the form, you may write at the top of it (where it will be noticable) the message «There are some changes you made to the form last time. Insert them?», where Insert is a link/button, that simply pastes saved data back to the form. This case will be as simple, as usual forms, but will help users to return to unsaved state in case of errors — without any additional messages & popups in process of “normal” (i.e. consciousness and error-free) form filling.

Answer 8

Leave the save button in the traditional location. With a webpage that's at the bottom of the form - on other platforms you should look up the best practice.

The form should have some form of auto-save. How that works depends on the use case, but here are some examples:

Local Storage

If you have no concept of a user account - just save to Local Storage in the browser. Specifics vary depending on the browser, but try to keep it less than 50MB and if the user doesn't come back to your website for 7 days it will be deleted in some browsers.

Cloud Storage for the User

If the user has a cloud account, save it on your servers associated with the user and somehow remind the user that they have unsaved data. Email clients often do a great job at this, with a "Drafts" folder that the user can easily use to recover a partially written email.

Cloud Storage for the Team

In a business context, if there's a team of people working on a project it's often appropriate to save drafts in the cloud somewhere everyone on the team can see it. A good example of that is a customer support team, where you might be waiting on details from a customer before the form can be completed. The original employee who partially filled out the form might be busy or at home when the customer provides those details. It should be seamless for another employee to complete the form.

---

Conclusion

The best user experience for saving is to not have a "save" button at all - automatically save as the user completes their work. Often in practice that needs to be saving to a draft, with a "Submit" button.

I would also avoid the term "Save" entirely - what does that mean? What's going to happen to the data when you "Save" it? In your specific example "Update Profile" is an appropriate name for the submit button.

---

PS: The issue with the button being lost below the fold is usually best solved by splitting the page up into multiple forms. That's outside the scope of this question - however it's generally bad to have any commonly used UI below the fold.