23

I need to teach my users to use issuu.com's interface -- click once to zoom in.

If they double click, it zooms in then out again. I can't change issuu's component so want to add something on my web page to tell the user.

The problem is, how do you explain that with an image? Any ideas?

  • 3
    Why not fix the functionality? There could be a delay before the 'zoom out' function works--say, a second. Or you could use a different button for zoom in and out. – Alex Feinman Sep 9 '11 at 17:15
  • @ytk: You could accept an answer among the ones below, if anything worked for you. – Rajat Gupta Nov 12 '13 at 5:45
48

I believe there is tendency to double click only when you use the default mouse pointer of type arrow. If it is a hand cursor or a zoom-in cursor users very well know it as a single click tool.

  • 6
    Indeed, the zoom cursor will explain that click once is zoom – Henrik Ekblom Sep 2 '11 at 7:38
  • 14
    Just note that the "hand" cursor is declared in css as cursor:pointer;. Do not use cursor:hand;, as this is not standard, and supported by only some browsers. – awe Sep 2 '11 at 8:22
  • 6
    In addition to this, why not also detect double clicks and handle them properly? – Michael Haren Sep 2 '11 at 15:54
  • issuu actually has hand cursor, but empirical results show that users double-click anyway. I wrote to Issuu.com asking them to handle the double-click as one click. Since in the real world nobody would actually want to zoom in and out in quick succession. – ytk Sep 16 '11 at 5:45
5

To me an icon is meant to be double clicked (due to heavy windows use I would guess). If you want something to indicate action in a single click you should be using a button. The key features of a button are that it appears raised and depresses or makes a sound when you click it each time.

If the users can see or hear the button action on the first click they will be far less likely to double click in the future.

  • I agree that having a button would make users click once. But in this case it's not a button or a specific target, it's an e-book where you can click on anywhere on the page to zoom in. – ytk Sep 16 '11 at 5:47
4

ytk. just an idea is to work out icons like these....

enter image description here

  • 3
    This made me laugh lol :)). Looks like a spaceship trying to get away from the explosion of the death star... – Cristy Sep 14 '11 at 16:33
2

You can't change this design, but you might be able to use javascript injection to modify it for your own users. For example, you could provide your users with a bookmarklet (cross-browser) or a greasemonkey (firefox) script. Or you might be able to do your own injection by embedding issuu in an iframe.

Good luck!

PS. I've observed many users who either don't understand the difference between single and double-click, or don't have conscious control over whether they do one or the other. So, as a general design principle I would say to avoid double-clicks completely in your own designs.

0

What you need is an icon of a mouse with a # (or something representing a number) on the left mouse button. Similar to the double click icon at this page: http://icons-for-technical-writers.luckyicon.com/en/preview-icons/.

If using a number is not an option, then try to use ripples (circles) to represent the number of clicks; 1 small circle inside 1 larger circle to represent a double click and 1 large circle to represent a single click.

I think the issue here is that single and double click icons will only work when next to each other as it adds the necessary meaning.

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