Posted by: felipe | August 5, 2009

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 - 1

Main View - 2

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

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 Trail

Gesture success

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.



  1. You’re aware of – xstroke was a gesture recognition program under X – a rather long time ago.

    I tried it a couple of years ago with a touchpad, and it seemed to more-or-less work quite well.

    A way to enter limited quantities of text with the mouse or touchpad can at times be useful.

    Is it sane to add this functionality to this proposal?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: