What type of click should I use in my web app?

Question

Background: We are developing a web application that includes charts. Currently one can left-click on a chart point to zoom/drill-down into that section of the data. We are adding some other functionality that allows users to add meta data to data points. I know users will be exclusively using Mozilla, though I shy away from anything that limits to a single browser. No js libraries please.

Question: What type of "click should I use for adding metadata to an element that already has a left-click (hyper-link)?

Some alternatives I've brainstormed:

• capture oncontext menu of right-click (this is abhorent to me)
• double-click
• ctrl-click
• make left-click open a context-ish menu that has the existing left-click as well as new functionality

Are there any conventions for these? What would you find most intuitive?

Answer 1

Try to meet the users expectations. What do they expect to happen when they single-click, double-click, etc... i.e. How do other applications handle that action?

Answer 2

Rather than having a single click zoom in, why not use a double click instead? Personally, I find that to be more intuitive when viewing something not to mention it being a fairly common standard.

Answer 3

Put some kind of affordance (maybe a small icon) next to the link that responds to a single click. Else, go with a right click.

Answer 4

I would change your idea from a type of click to a specific mode in the chart.

The problem with a special type of click is that there is no affordance for the capability that you want to provide. There is no apparent thing in the user interface that says, "The user is able to add meta-data to data points." Users would only be able to learn about this through trial-and-error or training. Or, perhaps, a note on your app that says, "Ctrl-click to add meta-data." But that is not elegant.

A better approach might be to have a mode button. I'm picturing a toolbar. Think about Microsoft Word, where selecting the Highlight tool turns your pointer into a highlighter. In highlight mode, you can click and drag to highlight text. You can then switch to other modes, like the default text mode. Perhaps you should have an "Add Metadata" mode.

In general for UI design, if you're trying to do something that seems non-standard, think about how existing products have solved the problem. How does Microsoft Excel let you add information to a data point in a chart, for example? Maybe it doesn't. But are there other products that do?

Answer 5

How about mouse gestures?

Answer 6

My vote is the "make left-click open a context-ish menu that has the existing left-click as well as new functionality". That needs the least amount of documentation to explain to users how to use. And for a web app usually users expect and read zero documentation.