Gesture customization mockups for Firefox

In my internship project on the Firefox team I’ve been working on the browser support for [multi-]touch interactions. If you’re using a tablet computer with support for touch input in Windows 7, you can already interact with Firefox using basic touch actions and gestures, such as panning the webpages, drag ‘n ‘drop things around, scrolling menus and listboxes, and pinching in/out for zoom.

Looking further, we will want to support customization of these gestures, both in the sense of what gestures you can use and what each gesture actually do. For that, I’ve created some UI mockups to see what are the directions we can follow and how we can allow customization of both gestures and actions with a simple UI.

The following screens shows two possibilities for the main customization window. On the left side we have a list of the available gestures for the user. The big icons should be a graphic representation of each gesture, and the small ones icons for the assigned actions. On the right side we have two different views for the list of possible actions. Note that both designs feature easy scrolling and large target areas which are fundamental for touch interactions, where the input is less precise and the screen is partially covered by the user’s hand.

Main View - 1

Main View - 2

Also, it should be interesting to allow the user to practice the gestures and to create new custom gestures. For both of these scenarios, we could use a “gesture canvas”, which would be a big blank area where the user will be free to interact. A subtle grid background provides a better affordance indicating how to interact with the canvas.

Gesture Canvas

When a gesture is being made, a trail displays the current gesture path and the initial touch point for that gesture. This graphic representation should match the icons for gestures on the left. If in practice mode, a light green or red background can quickly fade indicating a success or an error on that gesture. This same fading background can be used on the gesture creation process to indicate if there’s some conflicting gesture already defined.

Gesture Trail

Gesture success

(Some more details if you’re interested)

These are rough first versions of these mockups. I’ll be working on some more iterations soon, so all comments and suggestions are more than welcome.