Animated Autosaving icon is very distracting

[iandunn]

The Problem

When I'm writing a post, the autosave runs every 10 seconds, and every time it does, I see the icon changing in my peripheral vision, which snaps me out of my focus on writing, which makes me feel frustrated.

It's like having someone wave their hand in front of your face every 10 seconds while you're trying to concentrate.

It's made worse by the fact that the icon goes through 3 visual states before returning to normal:

1. Save draft > Autosaving
2. Autosaving > Saved
3. Saved > Save Draft

Another thing that makes it worse is that the Preview and Publish buttons are greyed-out during the transition.

And then it happens all over again just a few seconds later.

My Preferred Solution

Ideally, I don't want there to be any animation at all. It's going to be distracting no matter what, and gets in the way of the most important thing: writing.

Maybe instead of defaulting to having the information always showing, it could be shown only when the user moves the mouse near the save button, or takes some other kind of action which indicates that they're not focusing on writing at the moment.

The Preview / Publish buttons could be disable without any visual changes, and in the rare case that the user moves their mouse over top of them during an autosave, a tooltip could immediately appear letting them know they need to wait until the autosave is done.

A Compromise

If removing the animation entirely isn't acceptable, then it should at least be very inconspicuous. The user doesn't need to have their attention constantly drawn to the fact that the autosave is happening / has happened. The only time they need to know the current state is when they've made the conscious decision to stop writing and look at the save area to get that information.

• The animation could fade between the states, and do so slowly, rather than abruptly changing in real-time.
• The icons/text could blend into the background more; maybe by tweaking their color and opacity.
• The visual difference between the 3 states could also be minimized, so that they're as close as they can possibly be, pixel-for-pixel. e.g., All of the states could use the exact same icon, rather than 3 different ones, and the icons could be in the exact same place, rather than shifting around.
• The Preview/Publish buttons could be more opaque, but that might be difficult while keeping it obvious that they're disabled.

While making those changes would be better than nothing, my gut instinct is that I would still get constantly distracted by the visual changes while writing, making it difficult to get into a flow state most of the time.

Related Issues

• Auto-Save distracting in Full Screen/Spotlight/Unified Toolbar mode #9767 (I don't think this is a duplicate based on Cloud Icons as saving status in Gutenberg #9455 (comment))
• Cloud Icons as saving status in Gutenberg #9455
• Auto-saves are too eager to do their thing #7218

[GlennMartin1]

I agree. Note how Google Docs autosave works. Clear and unobtrusive.

[iandunn]

Yeah, that is much better. They don't use any icons, and only have 2 states: All changes have been saved, and Saving.... The text color is also lighter than the normal text color, to blend into the background more.

They seem to trigger an autosave immediately when you start typing, rather than once every 10 seconds. That feels better, since it's connected to an action I've just started, rather than happening in the middle of a thought.

Another nice thing is that, if you're continuously typing, it just always stays at Saving..., and doesn't switch back to All changes saved until you've stopped typing for a bit.

[karmatosed]

#10552 has some iterations in it and for phase 1 let's go with those. We can always iterate beyond the first phase.