Simulating tremor (from e.g. Parkinson's Disea

Question

I'm working for a foundation that raises awareness for accessibility in the internet. For a presentation, we want to offer a small workshop that simulates different disabilities/impairments to people. This is done via a website created especially for this presentation.

One of the demonstrated impairments is having a tremor, which means experiencing shaky, difficult-to-control hand movements. With this impairment, it's very difficult to move the mouse cursor exactly and to press the mouse button while the mouse is over a link. Both some old people and people with disease, e.g. Parkinson's, can suffer from tremor.

Now I'd like to somehow move the mouse cursor in an unpredictable way, so that it's very hard for people to click on a small button. Because JavaScript doesn't allow moving the mouse cursor directly, I'm looking for other ways to achieve this. I came up with the following ideas:

• Using a mouse driver / utility that simulates the mouse shaking.
• Hide the mouse cursor via CSS, place a GIF animation of a shaking mouse cursor at the place of the original cursor (with JavaScript), and then make the target link clickable only every few seconds for a second or so. This would at least give the feeling as if one always clicks at the wrong moment.

While the first idea would be pretty cool, I couldn't find a tool like this, whether for Mac nor for Windows. And I don't have any skills in programming such a thing myself.

The second idea seems a bit clumsy, but it would achieve the desired effect, I think.

Does anybody have another idea?

Answer 1

You can't expect anyone to be able to hold their hands perfectly steady, so one thing you can consider is,

1. Explain to users what you're doing and,
2. Make the clickable elements on the demo page much smaller than normal.
3. Increasing the mouse sensitivity on the example system to the maximum.

My reasoning is (caveat, I am not an expert in ux or medicine) by making the click-able elements smaller, you creates a similar problem for most people that a person afflicted with Parkinson's disease would face with an everyday web site.

Answer 2

Here is a windows version of my xdotool script that uses AutoIt. This was my first ever AutoIt script, and it took only a couple of minutes to write, so I'm sure it can be improved. Just save with the extension .au3 and run it with AutoIt (Run Script x86).

HotKeySet("{HOME}", "GStart")
HotKeySet("{PAUSE}", "Gpause")
HotKeySet("{ESC}", "Gexit")

While 1
    Sleep(100)
WEnd

Func Gstart()
While 1
    sleep(100)
    $pos = MouseGetPos()
    $x = $pos[0] + 10 - Random(0, 20, 1)
    $y = $pos[1] + 10 - Random(0, 20, 1)
    MouseMove($x,$y)
Wend
Endfunc


Func Gpause()
While 1
   sleep(100)
Wend
Endfunc

Func Gexit()
    MsgBox(0, "exit box", "Script exited")
    Exit 0
EndFunc

Controls

• Home : Start simulation.
• pause : Pause simulation.
• Esc : Exit simulation.

Or use my compiled version from here.

Answer 3

The low-level parts of simulating the tremor are well answered by now. I will add something focusing on the kind of tremor to simulate:

Most answers implement a mouse cursor that is moving on a random path with some fixed maximal step width in X and Y direction.

This should work well enough for the use case of making it hard to hit a specific area like a button.

For the more general issue of simulating UI problems caused by a tremor from Parkinson's disease, it would be at least interesting to actually simulate the hand movements of this kind of tremor.
I suspect the random walk may not be a very good approximation.

It may be hard to get hold of real hand trace data of tremor movement of course, but there are certainly papers about analyzing this kind of tremor:

The paper Parametric Representation of Hand Movement in Parkinson’s Disease is about how to best plot 3D hand movement traces.
The paper is paywalled, but the preview on the top right, labeled "Look Inside >" on the book image, shows some interesting plots of different representations of hand trace data.

Answer 4

I did this as a joke once, on the Puppy Linux Forum and got the comment that:

People with Parkinson's won't think it's funny !!!

Cure here is simply cntrl-C, luckily.

Here is the shell script which requires xdotool

#!/bin/sh
while :; do
   xdotool mousemove_relative -- -$(($RANDOM % 10)) $(($RANDOM % 10))
   xdotool mousemove_relative -- $(($RANDOM % 10)) -$(($RANDOM % 10))
   sleep ${1:-.1} #adjust this as necessary for effect
done

Name as parkinson_sim and run with optional argument for the time between tremors which can be 0.001 to 999.0.

parkinson_sim [time_between_tremors_in_seconds] #default is 0.1

I made the mistake of clicking on it myself instead of running it from the command line and quickly discovered how frustrating it must be. It took me several tries to get a terminal window open to kill it.

Answer 5

As you were thinking about doing it with a custom mouse driver I suppose a small program running on the PC would do either? If this is the case, here is a small snippet for C#, which infinitely moves the cursor randomly withing a range of plus minus 5px around the current cursor position. After each displacement the program waits 50 ms to 100 ms (not accurate!). The shakiness can be configured by adapting the values for the displacement and the pauses. I ran this in a console application and - depending on the values - it gave me quite a hard time stopping the program.

Random rand = new Random();

while(true)
{
    Cursor.Position = new Point() { X = Cursor.Position.X + rand.Next(11)-5, Y = Cursor.Position.Y + rand.Next(11)-5 };
    Thread.Sleep(rand.Next(50) + 50);
}

Answer 6

• In your DIV, CSS-hide the cursor using cursor:none;
• Create a .png Cursor image and move it (left, top) with jQ on mousemove
• Randomize the .png margin-left and margin-top using a setTimeout (to make the re-positioning smooth use CSS3 transition or do it with jQ .animate()).

Note: The script cannot know if the hand is still on the mouse ;)

function rand(min, max) {return Math.random() * (max - min) + min;}

var $cursor = $('div img');

$('div').mousemove(function(e) {  // Make .png follow the mouse coordinates
  $cursor.css({
    left: e.pageX,
    top:e.pageY
  });
}).hover(function(e){
  $cursor.toggle(); // Show .png cursor as we enter the DIV
});

(function tremor(){ // Add tremor to .png image
  $cursor.css({
      marginLeft: rand(-15,15), // arm tremor
      marginTop:  rand(-30,30)  // hand contractions
  });
  setTimeout(tremor, rand(50,100));
}());

div{
  position:absolute;
  background:#eee;
  height:100%;
  width:100%;
  cursor:none;
}

div img{
  display:none;
  position:absolute;
  transition: margin 0.2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://i.stack.imgur.com/KwMGA.png"></div>