Philip Haine's articles on Product Vision, Innovation and Design

4 Ways to Improve Saving Documents

Even UI designs as old as the Save dialog and the window titlebars have room for improvement.

Here are some ways to improve the interaction design of GUI titlebars and saving documents, a 25 year old design problem.

1. Directly rename a document from the titlebar

You just realized that the document you are working on is really about something else.  The original title was wrong, and now you need to rename it.  Go.

In the old days (ie. today), you had to locate the document in the Finder and rename it there.  It’s a good idea to close the document first, because some apps complain when you move or rename them while open.  So you locate the original document, close it back in the source app, rename it in the Finder, then re-open it.  It’s about seven steps including all the switching between the Finder and the app.  What a drag!

Here’s a new way:

1. Activate the titlebar (click & pause or double-click it)


2. It lighlights


3. Rename it

3. Click elsewhere to deselect and commit the change

Ahhh.  That’s better.


2. Move a document by dragging its mini-icon

The Mac OS is nice enough to let me drag a mini-icon of a saved document from its titlebar.  Press and hold on the little icon, then start dragging to create an alias.  To make a copy instead of an alias. press shift or Cmd or Option (I STILL have to experiment) to get a “+” sign.

Today, you can make an alias (left) or a copy (right) by dragging from the titlebar icon

Today, you can make an alias (left) or a copy (right) by dragging from the titlebar icon

However, say you had quickly saved the file in some random place just to save it.  You were in a rush, or you didn’t want to lose your train of thought, or you were trying to quit the app, or you weren’t sure where to put it.  But now it’s time to put it in the right spot.  You will have to forget that dragging goodness; you need to dig out the document in the Finder and drag the icon to its new home the old fashioned way.

Two observations: First, why shouldn’t you be able to move a document using its titlebar mini-icon?  Second, those modifier keys have been with us since the 80′s.  They’re hard to discover and remember and a pain for the throngs of PC migrants to learn.  How about a more overt UI?

How about this: provide an in-place menu at the destination of the drag, with options to copy, move, or make an alias:

1. Drag out from the titlebar, possibly with a modifier key or using the right mouse button.

1. Drag out from the titlebar, possibly with a modifier key or using the right mouse button.

2. Select what you would like to do with the explicit menu

2. Select what you would like to do with the explicit menu

This menu could be pie menu or a regular vertical menu.  It could open with a modifier key or when dragging with the right mouse button (a good idea that is in Windows).  Either way, it would permit moving and would be easier to learn.


3. Allow saving of untitled documents by dragging the icons.

Curiously, untitled documents don’t have a titlebar icon to drag:

Unsaved documents dont have a mini-icon

Unsaved documents don't have a mini-icon

This is surprising since this is when I need it the most.  I have my project folder open, I have my document folder open.  I need to put the document into the folder.  Alas, no dragging allowed. I have to go through the darned File/Save dialog even though the objects I need are right in front of me.

Why not put the mini-icon in the title bar as usual, let the user drag it to the Finder, and prompt for its name?  It would be a lot faster and more direct.

You could even tie this in with Exposé, to minimize the amount of advance window shuffling required:  Start dragging, then invoke Exposé to splay out the Finder windows, then drop into the appropriate Finder window. Provide a name, and you’re done.  Much faster than futzing with that File/Save dialog.

4. Make the File->Save dialog Finder-aware

I haven’t tried to work out the exact rules, but all I know is that when I want to save an unsaved document, or when I want to do a Save As of an existing document, the File->Save dialog rarely guesses the right folder to save to.

Can we make the File->Save dialog a bit smarter?

  • When doing a Save As, default to the folder of the original file.
  • When doing a Save for the first time, default to the frontmost Finder window.

(I know there are utilities to help with them but last I checked they were quirky, ugly, and excessive.)

Saving files is an old and fundamental GUI problem, but we can still teach the dog some new tricks.

If you know someone who can do something about these, please pass this link along.  The permanent link for this post is: http://stealthisidea.com/articles/gui-titlebar-tweaks


Related posts:

—–

Philip Haine is a product vision specialist and interactive product designer.  He founded Obvious Design, LLC in San Francisco in 1997.

Posted by Philip Haine on Friday, September 26th, 2008 at 4:35 pm.
See similar articles in: Commentary, Designs to Steal.

One Response to “4 Ways to Improve Saving Documents”

  1. davidc wrote on September 27th, 2008 at 1:42 pm :

    This reminds me of one of my ideas for dealing with drag and drop. I came up with it when envisioning a better way to attach files to email messages. As you start to drag a file, all of the various open windows become iconized, much like Expose, making it easy for you to find the right target to drag to. You could also create new drop targets for common locations, like the Trash, My Documents folder, etc if they aren’t currently open.

    Finally, you actually can drag a document on the Entourage icon in your Mac OS X Dock. It will attach to the frontmost outgoing message. Or if there isn’t one, it will create a new one.

Leave a Reply