: 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
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.
More posts by @Ravi4787994
4 Comments
Sorted by latest first Latest Oldest Best
How about a text layer on the screenshot, next to document icon, that says "double-click"?
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.
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:
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.