4 ms·

I can’t use a website with flashing anything, and especially so when I’m writing. Then I realized the CMS I make was doing this with a “saving draft / draft sav

by nnf 3y ago

I can’t use a website with flashing anything, and especially so when I’m writing. Then I realized the CMS I make was doing this with a “saving draft / draft saved” notice above the content area and couldn’t believe I’d done this very thing without realizing how annoying it was. I still wanted to display the info, so I tried a few different techniques and ended up settling on a slow (~2-second) fade in and fade out. The result, at least for me and the people I’ve asked to try it out, is that goes completely unnoticed unless you’re looking for it, which is what I wanted initially but hadn’t taken the time to try it myself beyond ensuring the notice appeared and disappeared at the appropriate times.

pbhjpbhj 3y ago
How about permanent text with "last saved: " and the time saving completed. Updated text is usually less jarring.
- deleted 3y ago
  [deleted]
strogonoff 3y ago
Design is about communication. Watch out for cases where what you want to communicate as a designer is not the same as what you should communicate. I believe almost every “Saving…” indicator is an instance of that discrepancy. They were appropriate back when on-the-fly saving was a fresh UX revolution, but today they’re nothing but self serving: us weathered designers, who grew up when the floppy disk icon actually represented the real thing, bragging about how cool our app is—it saves your draft on the fly! No need to press buttons, can you imagine? Nowadays, as devices are constantly connected, latency is low, and constant saving has become the dominant and intuitive behavior, what the user needs to know is not that stuff’s constantly being saved; what the user needs to know is the extraordinary situation where you fail to save it. This, if I may be so bold, is what you should be communicating—and if you ask me how, I might suggest a single, completely unchanging line of text informing the user that their draft is being constantly saved (though ask yourself if even that is required; it might not be if you are dealing with digital natives) and an obvious, flow-interrupting error state when that doesn’t work as intended.
- RobotToaster 3y ago
  I'd disagree personally, but only because I recently found out the hard way that a wordpress plugin I use doesn't have autosave. It's not as universal as one would think.
  - strogonoff 3y ago
    I assume the reason you found out the hard way is that you in fact intuitively expected it to work that way.
- nnf 3y ago
  I mostly agree that the app should only be communicating when exceptional things happen (like failing to save the draft), and my solution of an unnoticeable (but discoverable) status message is meant to give confidence to the users who aren’t very technical and consciously wonder if their work is being saved, which describes much of my target market. The messaging also differentiates these areas from the parts of the app where there’s no concept of a draft and so where auto saving doesn’t happen.
- Georgelemental 3y ago
  How about the case where the network is slow, so the save operation hasn't failed yet, but it will be interrupted before completing if the user closes the webpage?
  - strogonoff 3y ago
    You can’t avoid that with the indicator either. Closing windows by accident or due to a crash happens. Consider using window.onclose and saving to local storage to avoid data loss. That said, you could use a separate mode for users with bad network. That mode may require more changing and distracting UI elements. I am not prepared to say whether it is a good solution though.
ordu 3y ago
Maybe instead of saying "saved" to users of your app you need to say them "NOT SAVED" in big red letters? Draft saved regularly is an expected behavior, it is futile to notify people about it. If they wouldn't annoyed by it, they would stop noticing it, it is how human mind works, it doesn't notice predictable patterns. From the other hand if draft was not saved, it is a rare case when something went wrong, and users want to know about it.

by nnf 3y ago

pbhjpbhj 3y ago

How about permanent text with "last saved: " and the time saving completed. Updated text is usually less jarring.

deleted 3y ago
[deleted]

strogonoff 3y ago

Design is about communication. Watch out for cases where what you want to communicate as a designer is not the same as what you should communicate. I believe almost every “Saving…” indicator is an instance of that discrepancy. They were appropriate back when on-the-fly saving was a fresh UX revolution, but today they’re nothing but self serving: us weathered designers, who grew up when the floppy disk icon actually represented the real thing, bragging about how cool our app is—it saves your draft on the fly! No need to press buttons, can you imagine? Nowadays, as devices are constantly connected, latency is low, and constant saving has become the dominant and intuitive behavior, what the user needs to know is not that stuff’s constantly being saved; what the user needs to know is the extraordinary situation where you fail to save it. This, if I may be so bold, is what you should be communicating—and if you ask me how, I might suggest a single, completely unchanging line of text informing the user that their draft is being constantly saved (though ask yourself if even that is required; it might not be if you are dealing with digital natives) and an obvious, flow-interrupting error state when that doesn’t work as intended.

RobotToaster 3y ago
I'd disagree personally, but only because I recently found out the hard way that a wordpress plugin I use doesn't have autosave. It's not as universal as one would think.
- strogonoff 3y ago
  I assume the reason you found out the hard way is that you in fact intuitively expected it to work that way.
nnf 3y ago
I mostly agree that the app should only be communicating when exceptional things happen (like failing to save the draft), and my solution of an unnoticeable (but discoverable) status message is meant to give confidence to the users who aren’t very technical and consciously wonder if their work is being saved, which describes much of my target market. The messaging also differentiates these areas from the parts of the app where there’s no concept of a draft and so where auto saving doesn’t happen.
Georgelemental 3y ago
How about the case where the network is slow, so the save operation hasn't failed yet, but it will be interrupted before completing if the user closes the webpage?
- strogonoff 3y ago
  You can’t avoid that with the indicator either. Closing windows by accident or due to a crash happens. Consider using window.onclose and saving to local storage to avoid data loss. That said, you could use a separate mode for users with bad network. That mode may require more changing and distracting UI elements. I am not prepared to say whether it is a good solution though.

ordu 3y ago

Maybe instead of saying "saved" to users of your app you need to say them "NOT SAVED" in big red letters? Draft saved regularly is an expected behavior, it is futile to notify people about it. If they wouldn't annoyed by it, they would stop noticing it, it is how human mind works, it doesn't notice predictable patterns. From the other hand if draft was not saved, it is a rare case when something went wrong, and users want to know about it.