Today I’d like to reintroduce and improve double click in web based applications.

Double Click

On the desktop double click always meant edit. If you double click on a file, you open the application that edits that file. If you double click on a button in Dreamweaver, you get the properties for that button. A single click on the desktop was always selection. You can select one or more things and do stuff to them (select 3 photos in iPhoto and choose Export, for example).

On the web we lost double click – to follow a link we single click on it.  So now a single click means (on web applications) what double click used to. This made things a little tricky when it came to selection, which is why we’ve relied on the checkbox for selection for so long, but I’m not here to talk about problems with selection today.

For anyone who has helped a person learn to use a computer, you’ll know that the double click model is confusing to learn. I regularly see nervous users who single click on an item and wait for it to open, or who double click on the OK button in Word to make a dialog close. The whole notion of whether to double click or not seems to be tough to grasp.

So what I want to do is to reintroduce double click and improve on it, too.

The Problem

Let’s say you’ve designed a table. Each row in the table is a survey (you’re designing SurveyMonkey). For each survey you’ve got several actions: Design, Collect, Analyze, Clear, and Delete.

Multiple Actions for an Object in SurveyMonkey

What you have here is multiple actions on each survey. This can happen outside of tables, too, of course: anywhere that you have an object in the UI that has multiple commands associated with it.

I’ve seen several variations on this design: icons get replaced with links or buttons – sometimes they’re on the left, sometimes on the right. Often the object (the name of the survey, for example) has a link on it which would mean “Edit” or, in this case, “Design”. None of these solutions really please me. When the number of commands gets large, the table gets eaten up by actions. I’ve worked on tables with 15 actions per row – what then?

Some folks bury these commands in a context (right click) menu, but then they have users who never right click – it’s a hidden gesture. The whole reasoning behind context menus is that they’re supposed to reproduce commands that are accessible in other places. You don’t want to use a context menu as the only way to perform an action.

Aside Question: Why not just put the actions in a toolbar and allow the user to select rows in the table then choose a toolbar item? In most cases, you can only do these actions to one survey at a time  so that’s really design overkill. (For example, you can’t Design more than one survey at a time and while you can Delete more than one survey at a time it’s probably so uncommon that asking the user to click more than one time isn’t a big deal).

The Idea – Double Click Menu

Instead, let’s bring back Double Click. Here’s how it would work. Each Survey would be a link. Our users know links. Links are things you click on, even if you’re not sure what will happen next – it’s the only thing they can click on.

Users click on links

When you click on the link a “menu” shows up, directly under the mouse. The most common command for that object (usually some variation of Edit – in our case it would Design Survey) would be directly under the mouse. In other words, he’s already positioned to choose the first action. If the user clicks immediately again, he gets that action. If he doesn’t, he can choose an action from the menu.

A menu appears under the mouse, making the second click a double click

What I like:

• Users already click links, so we don’t have to invent any new symbolism.
• It brings a Double Click gesture back, but in a way that everyone can understand.
• It leaves us room to provide clearer commands (notice I was able to say “Clear Results” rather than the vague “Clear”).
• We have lots of room for growth – menus can contain many commands.
• We can get rid of context menus entirely, which are often hard to find.

What I don’t like:

• Single click doesn’t actually do any action anymore. Clearly this isn’t something to use everywhere.
• It can interfere with single click selection. This probably means that you’ll want to use checkbox based selection for these items.
• Needs a bit more work to make sure it’s accessible to all users. But I think that’s entirely possible.

Note: I discarded the idea of a toolbar for the SurveyMonkey example, above, but of course there are lots of times when a table should have selection and a toolbar above it. Happily, the Double Click Menu can be integrated with that as well. The Double Click Menu allows the user to perform actions on one item at a time, whereas the toolbar allows the user to operate on several different objects at once. The only issue to resolve is how to select – but that’s for another post.

What do you think? Have you seen this anywhere? Are there other things you like or don’t like?