Mobile app version of vmapp.org
Login or Join
Ravi4787994

: How to document a double click? I am writing documentation for a software program. To open a document, it must be double clicked. Considering readers skimming through the screenshots only and

@Ravi4787994

Posted in: #Icon #InterfaceDesign #Symbolism

I am writing documentation for a software program. To open a document, it must be double clicked.

Considering readers skimming through the screenshots only and not reading the text, how to design the double click action so that it is understood intuitively?

If possible, this should be inline with a single click, which I also need to indicate.

So far I came up with a pixel arrow and a single circle vs. double circle. Is that clear enough, also if the reader sees one of them only? If yes, why is it good enough? If not, what could be enhanced and why?



The green color used here is one of the CI/CD colors for highlighting.

Update

Thanks for the feedback so far. Based on the answers and comments, I have compiled a number of options and collected a bit of (subjective) feedback. Since I need to consider people printing the documentation, I also need to look at the black and white version. Proposal no. 5 with the additional x was IMHO best received.

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Ravi4787994

4 Comments

Sorted by latest first Latest Oldest Best

 

@Ravi4787994

How about a text layer on the screenshot, next to document icon, that says "double-click"?

10% popularity Vote Up Vote Down


 

@Pierce403

The problem is that the mouse cursor itself isn't an action. The action that you're trying to indicate is pushing the physical button on the mouse.

For keyboard actions, it's common practice to use an icon that looks like the physical key, such as Esc or F9.

To show this for the mouse, you can use a small icon resembling the mouse, and highlight the button to be clicked. You can then use a 1x or 2x as you were to differentiate single and double clicks. This also allows you to show left vs right clicks, scroll wheel usage, etc.

10% popularity Vote Up Vote Down


 

@RJPawlick971

This is the exact way that Luke Wroblewski indicated single tap and double tap with his gesture icons:



These have become de-facto standards in UX wireframes, but can't say if they'd be intuitive to your users of your software.

The catch is that a double-click, itself, isn't an intuitive action to begin with. It's a learned interaction. That said, those that learn the difference between single and double clicks would likely infer from your two icons the different actions.

As Jooja emphasizes below, a key factor in understanding the difference between the two icons is that you see both icons. That may not always be the case. As such, I'd suggest adding a secondary modifier to the double click icon to indicate that it is 2 clicks. Example:

10% popularity Vote Up Vote Down


 

@Moriarity648

It's a difficult task you have here. I don't think I've ever seen an icon for double click. I can think of a few options:


A white cursor overlapping a cursor of a different colour.
A cursor with a '2' inside it.
A cursor hovering over the number '2'.
A combination of 1 and 3.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme