Principle #1: Make it Direct
In the earlier version of Gmail, the only way to label or organize messages was to select the row or rows, then navigate to the “Move To” combo box or “Label” combo box.
But last week (at least in my Gmail account) Google decided to Make It Direct. Why select a row and look for an action button somewhere- just grab that message and drag it!
The Drag and Drop Object Pattern, in Chapter 2 of our book explains the nuances involved in this pattern such as affordance- ie. letting the user know they can drag something to reorganize the relationship, and clearly indicating the available drop zone.
We did something similar in the new design of Zenoss, an open source systems management application. On Step 3 of Set-Up, the systems administrator can efficiently organize their infrastructure by dragging devices (right) into the proper category (shown on left).
Since this is a set-up screen folks will only use once, we decided to embed the instructions in the screens instead of using a dialog with the tip.
The Ajax framework Ext JS handles this perfectly right out of the box- click to watch the screencast.
Expandable Drop Zone
So does this mean I have to go click to expand to see ‘12 More’ before I can drag any messages into those folders? Nope- Gmail borrowed an slick interaction from the Mac – the Expandable Drop Zone.
Now in Gmail, you can select one or more messages, drag them to an expandable drop zone, and a layer opens dispalying all of the other labels. Bill mentioned to me that a slightly longer delay ‘on drop’ would help provide feedback that the messages actually ended up in the right label.