11

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?

Single click vs. double click

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.

Single click vs. double click - more options

  • Regarding "opinion based": please provide answers with authorative/normative reasons, e.g. cite "Don't make me think", "Designing with the mind in mind" or "Universal Design principles". Do not just put an image there and say "Try this" – Thomas Weller Sep 23 '15 at 19:51
  • In that they are both distinct, I'd say that it's clear they mean different things. The catch is that people that know how to double click, likely don't need to read the manual, but those that wouldn't know how to double-click in the first place, likely wouldn't know what a double-click icon would be. – DA01 Sep 23 '15 at 19:58
  • @DA01: Good point. Some things are getting harder in a "touch" world... – Thomas Weller Sep 23 '15 at 20:00
  • 2
    In quite a few pc games, they use mouse icon and color in the left or right mouse button depending on which one you should click. Maybe you could do something similar, with 2x inside the mouse for double click: for example. – Joonas Sep 23 '15 at 22:58
  • 1
    Another option: How about a key at the beginning of the documentation? This icon means this, this icon means that... – DA01 Sep 24 '15 at 17:44
9

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

enter image description here

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:

enter image description here

  • 2
    Only if they can see the icons side by side. Theres no way of knowing the second icon is double tap unless you have seen the other icon. So now your guessing. 2x in icon would be more explicit. – joojaa Sep 24 '15 at 0:59
  • @joojaa agreed. Sans context of the other icon, this would be difficult to discern. Might make the most sense to simply label the icon for doube taps with a 2x. I'll update the answer. – DA01 Sep 24 '15 at 1:15
  • Of course, someone just tech-savvy enough to recognise the double circle as meaning double-click (but not enough to properly understand what that entails) might see the one on the right and click four times… – Janus Bahs Jacquet Sep 24 '15 at 1:25
  • @JanusBahsJacquet Right. One can just not win. Some things like full row selection in many text editors require a trippleclick. So quadruple click might be meaningful, in some case. – joojaa Sep 24 '15 at 1:35
  • 1
    @JanusBahsJacquet ha! True...might be best to keep them both single circles. That said, anyone 'savvy' enough to understand double click also doesn't bother reading instructions on how to open files. – DA01 Sep 24 '15 at 3:40
4

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.

double click icon

2

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:

  1. A white cursor overlapping a cursor of a different colour.

  2. A cursor with a '2' inside it.

  3. A cursor hovering over the number '2'.

  4. A combination of 1 and 3.

  • 2
    My initial idea is not far off from yours: a "x2" next to a cursor would possibly be the most intuitive to me. – JohnB Sep 23 '15 at 20:55
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.