How to teach users not to double click in webapps?

Question

How should I train my users not to double click links?

The back-end protects itself against it, but usually these checks lead to ugly error messages (XY already in state completed etc). At some places I remove the button/image when the user clicked it, but for normal links this would look pretty ugly.

Ideas so far:

Just ignore the click (solves problem, but no training)
Show alert
Show overlay
Show overlay with shocking image.. or lolcat (no click double pliiiz)
play sound

Whats your treatment for this disease.

Thanks!

Edit: Note:

For the past two years I implemented the usual solution for this problem (remove buttons, gray out, deactivate, etc.) just not on all links/buttons/etc. But again and again I find subtle, hard-to-track bugs caused by doubleclicks, which I personally, as the developer, never 'trigger', just because I don't double click. I'm at point where I'm thinking about protecting everything, and/or just kinda encourage the users to just click once.

Another side note: in average my users aren't that computer-savy.

Don't take my suggestions too seriously, I'm more interested in the ideas/approaches to this problem.

This may also be of interest: http://ux.stackexchange.com/questions/3855/double-click-on-toggle-buttons — Piskvor left the building, Jun 25 '11 at 13:19
My hope is that you will learn one day, your question is Off Topic on SO :p — Predator, Jun 25 '11 at 13:28
What, exactly, was wrong with the very first idea you've had? — Cody Gray - on strike, Jun 25 '11 at 13:35

score 4 · Answer 1 · answered Jun 25 '11 at 13:15

4

All options you present other than the first one are exceedingly user-hostile. Just ignore the double clicks and in time the users will realise that only one suffices.

answered Jun 25 '11 at 13:15

David Heffernan

601,492
42
1,072
1,490

score 2 · Accepted Answer · answered Jun 25 '11 at 13:17

2

Replacing the image of the button with a grayed-out one (remember to preload it, maybe as a sprite together with the regular button image) as an indicator that the button cannot be clicked more than once is more than enough user education. Of course, you should ignore the second click. Anything else is unnecessarily confusing your users without any benefit.

answered Jun 25 '11 at 13:17

phihag

278,196
72
453
469

I agree that this is a nice and common solution. Would you say that , they eventually 'realize' that the first click already initiated the action, and that the second click was not necessarry? – reto Jun 25 '11 at 13:20
@reto Exactly. The behavior is intuitive without disturbing the user. – phihag Jun 25 '11 at 13:22

score 0 · Answer 3 · answered Jun 25 '11 at 13:16

I would:

change the visible state after first click (some kind of unobtrusive overlay or a "working" spinner, change the CSS property of the cursor to "busy" etc). This way, you're providing some indication to the user that "something is happening".
In addition to that, ignore further clicks on the link until the action completes

How to teach users not to double click in webapps?

3 Answers3