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:
- 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", ...?
- 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
- 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.