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.

Affordance

Gmail introduces the feature with a well designed help tip:

And by visually indicating the messages can be moved by displaying a drag handle on each row:

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.

Drop Zone

Although Gmail did a nice job introducing the feature, they didn’t implement the standard cursors for drop zones:

Typically, the cursor should provide feedback when hovering over different zones, showing the user where the object can or can’t be dropped:

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.

Last week I needed to find a robust Ajax Event Calendar, similar to iCal or Google Calendar. After hours of searching, I realized this was more difficult than it should have been.

It appears a number of Ajax event calendars were prototyped in 2005-2007 but never matured. Many of those links are broken or useless today. And, when you search for Ajax calendar, most of the results are actually date pickers- not full blown scheduling components.

Here are the good event/scheduling calendars I found:

1. zcal by ZK

download here

2. Databound Calendar in the GWT Showcase

3. Monket Calendar

4. Calendar by EditSite.net

I would modify the interaction in this calendar to open the event scheduling and editing in the same screen as the calendar (in a dialog or slide in panel). It is cumbersome to have to navigate back and forth to the calendar screen.

5.dhtmlxScheduler

I also wanted to mention a calendar available for download called MooMonth, obviously in connection with MooTools. If someone would pick it up and finish adding the event scheduling capabilities, this would be a very nice event calendar.