Gesture Interaction for Maps

Brief
I was a Gesture Interaction Prototyping Intern with the Digital Planning team in Urban Redevelopment Authority. I researched, prototyped and integrated gesture technologies into their internal web map platform.

Year
2016

Tools
Myo Armband, Leap Motion
HTML, CSS, JavaScript, Leaflet

More Details
Both Myo Armband and Leap Motion were researched, designed and prototyped for gesture interactions. They are vastly different input devices and demanded different approaches for input control of the ePlanner digital map platform.

Myo Armband: Myography & IMU
Input design with the Myo Armband was ‘switch’ based. Each hand pose works like a button and each motion gesture works like a switch. I mapped each hand interaction to an input, and programmed additional interactions from raw data. User tests were conducted to identify the most intuitive approach, such as direction of response (zoom in or out, pan with or inverse), and gesture-input correlation.

• clench fist and move arm = grab map and pan map

• open palm and move arm right/left = zoom in/out of map

• flick wrist right/left = open/close menu

Leap Motion: IR Camera
Input design with Leap Motion is vastly different from the Myo Armband. Myo Armband is freely mobile, while with Leap Motion, input is tied to a bounding space in front of the camera. It is not necessarily intuitive to the user where the boundaries are. Hence, a UI design is incorporated to assist this.

• assistant UI with a cursor in the center of a ring

• lower palm onto camera = ring becomes visible, indicating user is within tracking area

• move palm horizontally = move cursor, cursor ‘pulls’ map along, panning the map
  The further the cursor from the ring center, the quicker the drag speed. While the cursor remains in the ring, the drag amount is negligible. This provides speed control and prevents accidental dragging.

• face palm sideways and move palm right/left = zoom in/out

• flick palm down/up = open/close menu
  

Work sketches and images will be included later. For more details, please contact me at mail@alanng.me.