How to communicate the message that the edit is auto-saved

Question

I have created a web application that the user can change the report filters, the report columns visibility and order.

All these are automatically saved so the user doesn't have to press a 'Save' button or make any other action. The next time she logins everything is as she left them.

My problem is that I have received several mails that people asking me to save the changes because they don't want to setup the report every time(they don't have to since it's autosaved at the first place).

Clearly these people are not confident that the configuration is auto saved.

What do I have to do to communicate the autosave feature of my application?

• Show a spinner next to every autosave element?
• Show a full page spinner? (since the saving doesn't take long it will look like flashing)
• Show a small save icon that fades in and fades out at the top right?
• Or something else?

Answer 1

Just like, google mail, when you are drafting an email, this little word saved fades in and out every few seconds. Because your system will be new to people and not as widely used, at first, as google mail, or stackexchange or medium, you might want to make it visible somewhere maybe in green color so users mind is put at rest, that it is indeed being saved.

Answer 2

This is a Stack Exchange speciality. When an auto-save takes place in an answer box, there's a small change in the bottom left-hand corner:

You could do something similar; put a "settings saved" message or icon next to the filter controls. That would appear to be your Option 3; I think a spinner while the save is going on would either not be noticed, or would not be interpreted as meaning the settings were being saved.

Technically, you may want to delay its appearance if the save is practically instantaneous, so there is a noticeable gap and a definite change of state from "altered and not saved" to "now saved".

Answer 3

If the content is too large to fit on the page, and there is no obvious place to put an autosaved message, you could use a popup notification. Just make sure it isn't too intrusive.

Here is a Javascript library that implements that, with example behavior.

Answer 4

I really love autosave, but the most common issue is that users are all trained the "submit to mainframe" model and the worry or get confused when there is no save/submit button. The second biggest issue is 'unhappy paths': when there are network problems the user may not know and then loses data and their faith in your app.

• guidance: when they first save show a clear but non-blocking message (e.g Toast) letting the user know that the data is autosaved.
• reinforce: show that it is working with an unobtrusive status, e.g. "last saved: 08:56"
• admit failure: when there are problems let the user know what they should do - try really hard to recover.

Answer 5

When user leaves input box (and autosave is fired), let it flash (blink) green.

Show notification in place where you show validation errors.

Upon leaving page (clicking on any link, menu...) display "all settings saved" wait for user confirmation + let user tick "do not show this again" and redirect.

Before entering page (popup), inform user about auto-save feature.