Firefox/Projects/Multitouch Polish/Customization Mockups

From MozillaWiki
Jump to: navigation, search

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

Mockup 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

Mockup 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:

Mockup 2.1



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:
More gestures
  • 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

Free form customization

  • 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

Free form customization


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.

Practicing gestures


Whiteboard pic (for reference)

Whiteboard pic