Gutenberg: Consider reducing visual nudges and flashes like autosaving

Created on 13 May 2019  路  7Comments  路  Source: WordPress/gutenberg

This came up in the accessibility audit webinar. One person from the usability tests experienced issues with this causing a lot of cognitive load and impacting their experience. What could we do to ease that for everyone?

Accessibility (a11y) Needs Decision Needs Design Feedback

Most helpful comment

Can we maybe get around all of these concerns if we just use the word "Saving..." without any flash or animation?

If we find that we still need a way to indicate that a process is happening, maybe the ellipsis "..." from "Saving..." can appear and disappear one by one, like a wave?

2019-10-10 17-36-52 2019-10-10 17_37_36

There's more examples of minimal text-based spinners here: https://maxbeier.github.io/text-spinners/

All 7 comments

@youknowriad I wonder if your snackbar explorations could help this? One thing that strikes me is what balance can we find between knowing it's 'saving' and it flashing all the time. For those who are anxious knowing it's happening is assuring, however, if it is informing in a strong manner that's not at all assuring.

Am I correct in assuming context to be the pulsating "Saving" indicator?

save

Yes, that is correct.

That "Saving..." indicator is _very_ flashy. I could see how it might prove distracting. Does it only show up when a user clicks on the "Save draft" button, or does it self-initiate as well?

Do we need an indicator here at all? Do we have evidence that this indicator provides value to users? Could we try scaling it back to just showing the "saved" indicator, without the flashy animation? Does this animation respect users' prefers-reduced-motion settings?

My understanding here is that there are two different use cases:

  • User initiates a save by pressing the "Save draft" button
  • Auto-save triggers (I'm guessing this is on a time interval?)

In the former case, some kind of indication that something is happening is called for. Is it required for the latter case as well? Perhaps we need two slightly different flows to account for different user needs in either of those use cases.

Can we maybe get around all of these concerns if we just use the word "Saving..." without any flash or animation?

If we find that we still need a way to indicate that a process is happening, maybe the ellipsis "..." from "Saving..." can appear and disappear one by one, like a wave?

2019-10-10 17-36-52 2019-10-10 17_37_36

There's more examples of minimal text-based spinners here: https://maxbeier.github.io/text-spinners/

I love the idea of pulsing or a wave.

It appears the Saving indicator is much slower now... and saving occurs so fast that it's hardly noticeable.

save

I'm going to close this out for now.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nylen picture nylen  路  3Comments

aaronjorbin picture aaronjorbin  路  3Comments

aduth picture aduth  路  3Comments

ellatrix picture ellatrix  路  3Comments

mhenrylucero picture mhenrylucero  路  3Comments