Autosave my work, please

June 2, 2010

I was in the middle of writing a long text in one online web application (made in Silverlight) when my FireFox crashed (Firefox is doing a great job in restoring your work, but in case of silverlight or desktop apps, you just can’t count on your browser). I lost the most of what I wrote just because the Silverlight application didn’t have one simple function – autosave. This functionality periodically saves user’s work and thus prevents data loss, or at least minimizes it – in case of software crash, only changes that are made after the last save will be lost. Although it seems as if it is quite simple function, there are some issues that need to be considered.

Frequency

Software crash doesn’t have to be the only reason for data loss. Sometimes the internet connection breaks or user simply presses the wrong button – she closes Firefox window instead of one tab. This means that autosave should happen often enough to minimize the effect of unpredictable events. Alan Cooper suggests that, if possible, autosave should be performed after each keystroke or, in other case, when user stops interacting with the interface. When choosing autosave frequency one should always consider application performance and responsiveness, though.

Enable autosave by default

If an application implements autosave, it should be enabled by default. If autosave isn’t enabled, chances are that beginners and perpetual intermediaries will never discover it. I believe I fall into  intermediaries when it comes to Inkscape and I didn’t even know it has autosave. But it has autosave functionality which is disabled by default. And since it crashes quite often, it happens that I lose hours of work. Although I am trigger-happy when it comes to saving, I tend to be carried away with design work and simply forget to save.

Unobtrusiveness

Besides this, autosave should be unobtrusive, which means that it should be performed in background without interrupting user’s work. Here’s an example of how things can go wrong for users when autosave isn’t unobtrusive. I was typing an extremely important email in my webmail client when suddenly a green message box appeared – the same message box which appears after email is successfully sent. I instantly started to look for cancel/discard action and pressed it once I found it. Only seconds after I realized that was an autosave message. But the draft was deleted and I was quite frustrated.

Among many others, Google Docs is another example of obtrusiveness – after each autosave the cursor moves to the top of the text. I am sure this is a bug that will be solved but currently it is obviously more than annoying. Besides this bug, Google docs is a good example of how autosave should be done.

When document isn’t saved there is information about the last save and enabled Save button next to it. After autosave the message changes and Save button become disabled. Also, autosave is being performed after each keystroke which eliminates the need for “Do you want to save changes?” popups.

A problem

However, autosave raises one important question – with each save, all previous versions of the same document become unavailable (undo can sometimes be helpful but not enough). Autosave overwrites the same document over and over again. For instance, user might want to edit some template and just print it without saving it at any moment, but autosave might overwrite the template. Some applications use versioning to fix this issue (by adding timestamp to a file name for example). Some, on the other hand, keeps the history of actions where each action refers to one of the previous document versions. But those solutions tends to be complicated and seems as if there’s no definite solution to this problem.

In any case, if you are not sure about autosave functionality, don’t think anymore and implement it – and keep the common save functionality and unavoidable keyboard support.

I discuss these topics on twitter too. In case you feel nostalgic, my RSS feed is still working.

50 Comments

  • Shawn Adrian (June 2, 2010)

    The app wasn’t QuoteRobot http://quoterobot.com , was it? That’s something we’ve been meaning to add actually as it’s happened to me before. I love how Google docs does it. Great article.

  • Lam Nguyen (June 2, 2010)

    Nice read, bro! Although, we can restore to previous version of the document in case we get lost all what we typed, only one version was backed up – you are right! Unlike other apps using autosave, WP is doing the job really well with the revision feature. I don’t think I can live without that nice feature of WP…

  • Janko (June 2, 2010)

    It wasn’t QuoteRobot ;) Btw, it looks nice!

  • Janko (June 2, 2010)

    Thanks Lam. I am not sure how WP handles it – seems as if it is a kind of versioning?

  • Lam Nguyen (June 2, 2010)

    I’m not sure, I think it saves each version as a post. You make me curious, bro!

  • Ben Carlson (June 2, 2010)

    I believe Firefox has auto saved before, but that’s only if I don’t close out of the session. I’ve accidentally hit back or something that navigates away from a big reply I posted in some forum, then when I hit forward, it’s there again. Maybe it’s the forum software though, but I always thought it was Firefox.

    Interesting discussion about how to handle auto save vs. recalling old versions or over-writing the one and only version that’s there. I think versioning is a good approach, but making it as transparent and easy-to-use to the user is probably one of the harder parts.

  • Kumail Hunaid (June 2, 2010)

    I actually design all my websites in Inkscape, I hardly get any crashes but when I do, there is usually an auto saved version somewhere in the temporary files or in your home folder.

  • Keiron Lowe (June 2, 2010)

    Great post, I never really gave autosave a thought, but I am now thinking about it would be a good idea if you could get autosave in Photoshop.

  • Jef Claes (June 2, 2010)

    Hmm the storage feature of HTML5 might bring an elegant solution to this problem?

  • Janko (June 2, 2010)

    If you navigate to another page and go back browsers should keep your work, but if you close tab/window that’s another story.

  • Janko (June 2, 2010)

    I also use Inkscape for all my work, but it crashes so often in Windows. It was strange to discover that autosave is disabled by default.

  • Janko (June 2, 2010)

    I’m not sure about HTML5 storage, it might be a solution. Looks interesting, in any case.

  • Slobodan (June 3, 2010)

    WP saves it as "revision" but in the same table and format as a post.

  • Alexander Limi (June 3, 2010)

    Firefox should definitely be restoring everything in the event of a crash, and I haven’t had it fail on me yet. Definitely interested in fixing this if we can reproduce it by forcefully crashing the browser on that site.

    Which web application were you using at the time? Feel free to email me if you can’t or won’t mention it here (e. g. If it’s an internal site or secret star up or something).

    There are some edge cases where we don’t restore (one being https sites, which I’m trying to get changed while still keeping it secure), but in general this should never happen.

    Let me know if I can help with tracking down and fixing this.

    — Alexander Limi, Firefox User Experience Team

  • Janko (June 3, 2010)

    Hey Alexander, thank you for the comment!

    I was using client’s business application made in MS Silverlight. This is why it’s important that applications implement autosave – especially apps that can’t rely on FireFox autosave, such as those made in silverlight, desktop apps, etc..

    Firefox is doing a superb job in preserving browser’s state and I agree that it never let me down. Just one of the reasons it’s my browser of choice.

  • Alexander Limi (June 3, 2010)

    Excellent, that’s what we like to hear! 

    I guess I was just confused and assumed that it had to do with Firefox since you called it out by name in the initial paragraph. Do let me know if you have any pet peeves on the UX side that you want us to fix.

  • Janko (June 3, 2010)

    I should’ve been more clear that this doesn’t apply to Firefox

  • Janko (June 3, 2010)

    Nah, it absolutely has nothing to do with Firefox – your comment made me realize that the way I wrote it was a bit confusing so I made it clear it’s the silverlight app that failed.

    I spend so much time with Firefox that I don’t say "browser" anymore, just "Firefox" :)

  • Nishal (June 4, 2010)

    Too Bad Silverlight application doesn’t have "Autosave". I have made it almost compulsory in all silverlight applications where we expect the user to take long time doing work.

    In case you are looking for solution, here’s what we do – periodically save xml files with "Draft" version in user’s Isolated Storage, this way we can recover fully. Those who are unaware, data in isolated storage is serialized across browsers. Meaning if you app gets crashed in Firefox, you can start the same application in Chrome and access to those draft xml files will mean you can pretty much "resume" where user might have left off!

  • inspirationfeed (June 4, 2010)

    I couldn’t agree more!

  • Louis (June 4, 2010)

    Nice write-up, Janko. Definitely an important subject in our online world.

    The truth is, I don’t trust many applications online or otherwise. If I ever have to type up a long email, or some other lengthy piece in a textarea on a web form, I do it first in a plain text file saved on my desktop. Then, when I’m done, I open up the application and paste it in. I never have problems that way, and I don’t have to worry about whether or not something is being autosaved. The only drawback to that is that you never have earlier revisions available, so if you need that functionality, then you might have to do everything inside the application itself.

  • Seánóg Ó Dubhshláine (June 4, 2010)

    I couldn’t agree with this post more! Hopefully some day all web applications web based or not will include an autosave feature by default!

  • Anon (June 4, 2010)

    Etherpad does it right in many ways <3

  • Krzysztof Kotlarski (June 4, 2010)

    IMO storing backups in cookies or posting them back to server isn’t that complicated, and if u ask user if he or she wants to restore them when he or she comes back is quite user friendly.

  • SiteOne (June 4, 2010)

    This may seem a bit old fashioned, but I really don’t trust any online application if I’m doing a lot of writing/coding. I always write something up in Word first locally and then copy and paste. The spell checking is usually better anyway!

  • steve (June 4, 2010)

    "Autosave" is a bad word.

    To "Save" is an explicit, OVERT act, it means finality, it means ACCEPTANCE of what you have.
    This creates the ‘versioning confusion’ the author alluded to above.

    What we should have is ‘Auto hold’ ..’Auto Remember’

    we REMEMBER what you are doing or what you have typed so that we can SAVE IT for you if you want, or DISCARD IT if you dont

  • Osny Netto (June 4, 2010)

    A good example is here: http://jetlogs.org/2007/11/11/auto-saving-with-jquery/
    But it’s possible make better. For example, a button SAVE.

  • Bobby (June 4, 2010)

    I just started using ForeverSave after losing a half a day’s work in illustrator. It’s done wonders by letting me version only the apps I need and manage versioning in one place. But doesn’t handle web apps.
    Autosaves really need be universal system wide. Web apps should really have a standard save api. The browser’s file>save menu is effectively useless. A universal save api would allow external apps (or hopefully the systems’ OS) to tap into it to handle autosaves/versioning globally.

  • Janko (June 4, 2010)

    I disagree. An entity that is automatically saved isn’t in some inter-state between memory and storage – it’s truly saved by the application (either by overwriting the same entity or saving a version of the same entity, and this is where the confusion with versioning came from.) That is why there is no sense for saving it further or discarding it. It’s saved, I can keep working safely.

    "Auto-hold" doesn’t sound like something that would be easy to understand. Hold where? Is it holding me back from saving? If you would see "Remember this document" button what would users think will happen after pressing it? Auto save is the more appropriate metaphor than hold or remember. Auto save means "do the save action that I would normally do, automatically".

  • Janko (June 4, 2010)

    We draw from our previous experiences, when we had issues with using different applications and what we do is to create workarounds. This shouldn’t be this way.

    If you’re dealing with text you can use plain text file. However, if your desktop drawing software, for instance, doesn’t have autosave, you might turn into Ctrl-S freak, like I am :)

  • Janko (June 4, 2010)

    Google, again :)

  • Janko (June 4, 2010)

    I’m quite happy with spellchecker in Firefox, can’t imagine working without is.

  • Janko (June 4, 2010)

    [quote]Autosaves really need be universal system wide[/quote]
    My sentiments exactly

  • steve (June 6, 2010)

    "Janko says: I disagree. An entity that is automatically saved isn’t in some inter-state between memory and storage – it’s truly saved by the application (either by overwriting the same entity or saving a version of the same entity…"

    I suggest that you reconsider your disagreement. You are speaking of the ‘true state’ of the data – Has it been transferred to the user’s hard drive or some other storage or not?
    What is more important is: What is the CONCEPTUAL OR LOGICALLY IMPLIED STATE OF THE DOCUMENT??

    Obviously, I open a document, with the implicit ambition of making a change to the document.
    While editing same, I can explicitly SAVE the document and commit my changes or CANCEL and discard them.
    Also, previous assumption aside, I may be using the document to interrogate various possibilities. This is especially likely with a spreadsheet, where I may plug in multiple values and see the newly calculated change immediately.
    Finally, I may want to PRINT the document (from memory,presumably) AND NOT SAVE THE CHANGES.

    Document "A" on disk –> "M" in memory (SAVE) –>"A.saved" on disk.

    Document "A" on disk –>"M" in Memory ( autosave function creates A.autosave) on disk

    If the user explicitly chooses SAVE (assuming no system crash or other interruption) original file "A" is overwritten, and "A.autosave" is removed.

    If there is a system crash (and autosave had been running previously) the system will alert the user and allow them to use the autosave file and continue from where they left off.

    re:Web apps should really have a standard save api.
    Makes sense. File Save pertains to the html text the browser has just rendered, and not anything remotely concering the work the user is doing!

    But standards may be hard to define. Not all content or user data is the same, some is tied to authentication, temporary credentials granted and so on. What really needs to be done is for the system to make clear what data is in scope and what is not, and if it expires, when!
    If you ever typed a long forum post to discover you have been logged out you will know what I mean! (or same thing when online on some banking sites)

  • Janko (June 6, 2010)

    Steve, it is certainly one of the ways to implement autosave. And I’m fine with that. How exactly would it be done depends on many factors, such as users and their mental models (for instance, how would users understand the state of a document), specific business requirements, content, and other, like those you mentioned.

    So I think there is no ‘right’ way to do this – that is why I mentioned different factors one need to consider when thinking about this functionality. Versioning is just one of the issues.

    What I disagree with are the terms you mentioned – "hold’ and "remember". Maybe those terms would work for some users, I can’t claim otherwise, but what I saw so far is that "auto-save" is the term that describes this functionality in most clear and precise way.

  • Janko (June 6, 2010)

    One more thing – what I mean with "the entity is truly saved and there is no need to save it further or discard it" is a potential way to overcome confirmation dialog boxes, a model that can be seen in Google docs applications.

    I am aware of the fact that it is not applicable to every situation, though.

  • donnie (June 6, 2010)

    I can feel your pain. Before wordpress had an autosave, I would regularly lose blog posts. I don’t really have the problem now, but it was endless frustration. Its sort of like all those great ideas that you have while intoxicated, but can’t remember them the next day.

  • SJL Website Design (June 7, 2010)

    Great post Janko. Like you said, I always get carried away when designing which often means I loose fair bit of work. Autosave is a great function that can save a lot of hassle.

    Thanks for sharing.

  • steve (June 7, 2010)

    "What I disagree with are the terms you mentioned – "hold’ and "remember". Maybe those terms would work for some users, I can’t claim otherwise, but what I saw so far is that "auto-save" is the term that describes this functionality in most clear and precise way."

    There lies the conundrum. Iconography and terminology/verbiage.

    I would suggest that in an ‘auto-save’ world, the very concept or presence of an explicit "Save" button immediately puts you in a situation where you have a ‘Cancel’ button as well, then , logically, you are in a place where saving is an EXPLICIT transactional thing, like a ‘COMMIT’ after a bunch of sql statements.

    If we have a TRUE auto-save or rather, continuously saved environment, then the control buttons would not be ‘SAVE’/CANCEL but rather "Done"/"Revert"
    (where revert could mean reverting to the original state or one of a number of identifiable breakpoints/milestones)

    Obviously, upsetting the ‘status quo’ by turning the finality of ‘saving’ from an explicit act to an automatic implied one, introduces another ambiguity into the user interface.
    Getting rid of the ‘confirmation dialogs’ is something I try to workflow around as much as possible. Always asking "Are you sure?" is like the airport security questions – eventually people answer by rote and dont even consider the question!

  • Adam Holt (June 8, 2010)

    I was using wordPress a few days ago and had almost finished a new post approximately 400 words and my browser crashed. I thought I had lost it but the autosave in WordPress allowed me to restore the post which was most appreciated! Great post , thanks for sharing and love the look of the site.

  • Chelsey(Qirong) Liu (June 10, 2010)

    Nice post. I’m always thinking it’ll be great to autosave work, especially for a huge form requiring long time work. I have a habit of keeping pressing ctrl+s to make sure I won’t lose anything. But I’ve never thought that autosave would be annoying for stuffs used as templates. Great point Janko!

  • Martin Maruša (June 10, 2010)

    Hi,

    this is great article and very true.
    One think that can help building autosave application is a plugin from Zurb:
    http://www.zurb.com/playground/jquery-text-change-custom-event

  • Mongoose (June 13, 2010)

    Love the article, but I don’t think that bug in Google Docs actually exists. Not in Chrome, anyway. I think I would’ve noticed.

  • Janko (June 13, 2010)

    They probably fixed it meanwhile

  • Kevin Tan (June 24, 2010)

    It is so frustrating when unexpected crashes happen after long hours of work. I personally think there should be a reminder to save rather than forcing an autosave to offset those potential undo’s.

  • Brian (June 27, 2010)

    This is very frustrating, and I have lost long texts several times due to this… even with softwares fitted with autosave features (for instance, Office), you can lose a significant part of your work.
    The only way around is to save manually each time you have written something important. This is particularly important when writing in webforms. In this case I always copy my text in the clipboard before submitting or doing anything else: it has saved me many times, for instance when you have been disconnected, or when the javascript crashes, etc.

  • Robert Pendleton (July 27, 2010)

    Speaking of Autosave, it seems that MS Office has done a good job in my viewpoint: it could autosave for several versions every period of time. The time length could be set and number of versions is still free for choice. And it enables the autosave by default. WIth the advent of Google Docs and other online word processing softwares, autosave should be paid attention.
    Nice post!

  • Mari (September 24, 2010)

    I agree with everything you said and I love the autosave functions on some of the applications I use, particularly goggledocs. One of the cons though, is that it saves information before a user actively hits save, which could become a privacy issue in online applications. If a user starts working and decides he’d rather not have his data on the application owner’s server and quits, it might already be too late because the autosave functions already stored it there.

  • yojeek (October 26, 2010)

    cool, i was using inkscape very intensively for about half of year, but didn’t discover autosaving! thank you for the ‘tip’, i think you should inform inkscape developers about that issue.
    by the way, in 0.48 ocassional crashing on windows platform was fixed.

  • avinash (October 27, 2010)

    We are trying to build an autosave feature for an online web form that we are building. However, we have found it difficult to autosave files and images that are uploaded via the form. Are there any reference sites that you can share which has this feature or would you have any thoughts on how this can be done?