0

I'm making a web app in which users have access to an editor which auto-saves their changes.

I'm looking for a way to provide better feedback than I'm doing now about the auto-saving and possible saving errors.

Currently, I'm display a cloud icon at the top right of the editor:

enter image description here

Once the user starts typing, a "Saving..." message appears

enter image description here

At the end of it, the message "All changes saved!" is briefly shown, then disappears. Hovering on the icon informs the user that all changes are synced to the server.

enter image description here

If an error occurs, a red message is shown:

enter image description here

My main issue with this is the auto save functionality might not be advertised enough for the user to notice it's there at all. As soon as you scroll down, the icon disappears: I haven't been able to find a way to keep it up there that fits well with the overall design.

Also, errors aren't communicated to the user with enough emphasis. Overall, I don't think the feedback it gives user is prominent enough.

I'm looking for a way to make it pop out a little more to let users know that everything is being saved, as well as when unfortunately we weren't able to save their most recent changes.

Thanks in advance for the input.

Improve this question

2 Answers 2

Reset to default
2

I think all you need is a quick, disappearing toast message (like you showed in your question) when the version is being saved, and optionally a "Last saved at [time]" message somewhere less prominent on the page.

Not sure the user needs to know when autosave fails - they can't do anything about it, and it's disruptive enough to pull them away from the task they were concentrating on. If the app isn't autosaving frequently and the user risks losing data by leaving, make sure they can save upon surfing away from the app via a prompt.

Improve this answer
2
  • One problem I see with the toast is the autosaving is happening pretty frequently (for click-based actions, every time a setting changes; for typing, it's debounced but still pretty often), so I wouldn't like to bombard the user with notifications. The idea of notifying failure would maybe be to give the user a change to retry manually. Being it's a webapp, there's not much I can do upon exiting the page, other than showing a confirmation dialog. I love the idea of showing when the last save happened.
    – Samuele B.
    Commented May 30, 2022 at 8:31
  • 1
    You're right, the toast might become annoying, or ignored. Now that I think of it, I usually see toasts when the system is in the process of saving, but it's taking a little bit of time (and might affect what the user is doing). I think I'd still skip error notifications on autosave and only show them when the user is trying to save something and it didn't work.
    – Izquierdo
    Commented May 30, 2022 at 15:05
1

The main problem I see in the example raised in the question is that the auto-saving warning, being an information inherent to the current use of the page content, is located in the upper right corner, a place regularly used for the application settings. I personally don't think I'd look at the top right unless I'm looking for a way to change the color of the text, as an example.

  • My first attempt would be to position everything that is related to the current page or document change at the level of the user's view location: centered on top, like Codepen does, at the end of the writing line, or at the working field bottom-right.

enter image description here

enter image description here

Dribbble

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.