Want to see some more of Naz’s beautiful designs? Checkout the Weightshift portfolio.

Balsamiq’s Mockups is a great tool for designers/developers who lack good drawing skills, but still want to pencil-out their ideas (*blushes*). Additionally, it provides all the convenient features of application–drag, drop and undo–for those who could otherwise take pen to paper.

Link

Although many books define the purpose of typography as enhancing the readability of the written word, one of design’s most humane functions is, in actuality, to help readers avoid reading.

-Ellen Lupton, Thinking with Type

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.

So what the hell have I been doing that’s so important to neglect this here blog?

I Quit My Job
Somewhere around May 1st, I left my cushy job as a real estate web developer and plunged head first into the abyss known as freelance work. The first couple of months were spent working out my home and coffee shops with my web pal, Sandy Weisz of Methodtree. Recently Sandy, myself, Andrew Huff of Gapers Block, and four of the most brilliants youngsters I know of (known to the world as Humanized) acquired an office space. Though we are all independent worker bees, we’ve quietly dubbed ourselves ASAJASA, deriving from the first letters of our names and our fondness for acronyms/palindromes. Want to know what it’s like to work with us? Check out the photos and video here.

Projects, projects, projects
In addition to filling my week with billable client work, I’ve attempted to carve out time for my personal, non-billable projects. These have included, but are not limited to: Tappity, Twitter Timer, Retweet, and Just Some, Inc. (my official company name).

Trying My Hand at Design
Lastly, and probably the most daunting of all these items is my attempt to become a better designer. Until now, I have always relied on the creative genius of my friends and colleagues (mostly Jeff Skinner), and have stuck with what I do best: programming. However, as I quickly learned with the start of my freelance work, most clients want the total package, soup-to-nuts, and so on and so forth — something which required me to come out of my design shell.

That said, I’m proud to announce the redesign of this site, srobbin.com. With that announcement also comes a pledge that I shall never let this lapse in content transpire as long as it has in the past few months.

On a lighter, and non-salesy note, should you know of anyone who is in need of a website or complex web application, I’m open for business. Please feel free to contact me at scott [at] justsome dot com.

Until next time….