When I first learned to use a computer, my teacher told me to save documents early and often. She warned me of the day when I would be typing an important paper and my computer would crash, causing me to lose all of my work. So, I habituated: every sentence or so, I'd press the keyboard shortcut to issue a Save command.

Well, old habits die hard. Despite the increased reliability of text-based programs, auto-saving and operating system stability, I still hammer out Command-S periodically to "protect" my work.

But what happens when I try this in a browser-based application like WordPress? It is a common scenario for me: I'm typing out a draft of my post and reach the end of a complete thought; subconsciously, my fingers press Command-S. Then, I encounter a problem: the browser isn't aware that I'm trying to save my work; it thinks that I'm trying to execute a "Save Page As..." command, and I see this:

To make matters even worse, I involuntarily hit the Return key and save a copy of the page to my local drive. Double doh!

Now, imagine that you're the developer or customer support rep who receives this bug report. A common response is to think, "it's the user's fault!" Clearly, the designers had a blogger's best interest in mind when they implemented auto-save and provided a Save Draft button. How could they have anticipated this problem? It seems unreasonable that developers should have to program for every use case...

True. I don't disagree with that statement: programmers cannot foresee every way in which their application will be used. But, this is what separates good UX design from great: an extraordinary attention to detail when accounting for human error.

For example, Google recognized this type of habituation when they created their programs, Google Docs and Gmail. In both applications, if you are drafting content and press Command-S/Control-S, the program will intercept the Save event and execute an auto-save command instead. It anticipates that your intention to save content, not a web page, and creates a forgiving interaction.

And, it makes sense, right? Google is trying to convince users to abandon the traditional desktop programs — Microsoft Office and Outlook — where users have become habituated to Command-S functionality. The designers had the foresight to understand users would try and use the browser much in the same way they had used their desktop app, and accounted for any "errors" they might make. Great design!

Demo

Rather than have you visit Gmail or Docs, I've setup a small example here. To see it in action, start typing in either text area, then press your keyboard save command (Command-S for Mac, Control-S for Windows and Linux) :

The Code

Intercepting key events is easy. If you have jQuery installed, you can use the keydown function:

$("#element-id").keydown( function(e) {
    if(e.which == 83 && e.metaKey) // Do Something
});

Note: The example above listens for keydown events tied to the "element-id" object, and responds to Command-S/Control-S keycodes. Other keycodes can be found here.

Discuss and Contribute

I'd love to hear of other examples that you consider good design, those that embody small, humane attentions to detail.

As for me, drawing on inspiration from John Resig's wonderful article on a Web Developer's Responsibility, I am going to submit "Command-S/Control-S event capture" as a feature request to the WordPress bug tracking system (along with a patch). WordPress is a phenomenal product — one that I use every day — and I have been remiss to get involved sooner.