Firefox/Projects/Multitouch Polish/Customization Mockups

This is a summary with some of the consideration and ideas that were brought up on a whiteboard session with Alex and Felipe discussing possible gesture customization UIs.

• all the screenshots posted here are from real XUL mockups

• action icons will be changed for icons representing them (e.g. back, forward, print, zoom).

• gesture icons should be changed for small representation of the gesture, such as a sparkline, an animated png or some other rendering, representing the initial touch point for each finger and the movement needed

Selecting action, version 1

• Left pane: pick the gesture to customize
• Right pane: select the action associated with that gesture

• Everything easily scrollable and clickable.
• Each item in the richlistboxes tall enough to make it very easy for touch clicking.

• Simpler, more conventional version
• maybe too much noise of items?
• When changing the selected gesture to config on left, right lists changes as well to show the selected action

Selecting action, version 2

• Left pane: pick gesture to customize
• Side pane: select the action associated with that gesture

• Items distributed in a grid format
• Big clickable areas
• Less disruption when changing from one gesture to another

• Should be possible to directly drag actions to other gestures:

More gestures

• By default we should map only gestures that are direct related to an action and make sense. (e.g. back/forward flicks, zooming, etc)
• The user can choose to map more gestures than the default set.
• Still, it is hard to come up with a good gesture, so we should provide a set of gestures that are not associated with any action, but are already available:

• Some gestures we can provide: rotate right, rotate left, two-finger tap, hold and tap.
• More advanced ones (free-form): two-finger swipes, wave, etc.
• Need to consider the wording for gestures with no action defined: no text at all? grayed out text with "action not chosen", "action not defined", ...?

Customizing gestures

• If free-form gestures are possible, we should have a way for the user to create his own gestures
• Instead of creating a separate place for that, this could be the last entry of the gestures list
• Clicking on it opens a canvas where the user can draw his gesture (and later customize the name?). Then this gesture becomes a new regular entry in the menu

• The grid-like background brings touch affordance.. the user knows and (we hope) wants to touch it

• When creating the gesture, we show the gesture trail plus the initial contact point

Practicing gestures

• The free-form canvas can also be used to practice an existing gesture.
• The user would try to make the gesture, and then we can blink the background on a light green or light red depending if the gesture was recognized or not, and then we fade to white again.

Whiteboard pic (for reference)