Search code examples
user-interfacedouble-clickuser-friendly

How to teach users not to double click in webapps?


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.


Solution

  • 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.