Embedded Files
Single-finger spring-loaded navigation of infinite canvases
Single-finger spring-loaded navigation of infinite canvases
UI Researcher: Microsoft Research
ROLE: UI design, mockups
CHALLENGE: maps require too much focused attention and hand-eye-coordination during compromised (mobile) situations.
SOLUTION: I invented a technique where a single tap zooms in but where a press-and-hold only temporarily zooms in. Visual cues give the user a preview of the resulting view transform.
TOOLS: Flash, Figma*
IMPACT: Patents (1, 2) spun out to Zumobi, sold to Apple, and became 3D touch/Force Touch which first shipped with the iPhone 6s
Level 1
Level 1
Level 1-5
Level 1-5
Level 2-5
Level 2-5
Hand-eye coordination and cognitive load are reduced because ZoneZoom only requires a single tape to zoom in or out
This interaction and visualization technique is even better suited to a smartwatch form-factor
Because the interactions (press-and-hold vs. tap) were novel I created a state diagram to explain the mechanisms to the developer and for subsequent IP disclosures
Typical animation sequence during a zoom in operation, in this case from Zone 1 to Zone 2-5 to Zone 3-5 to Zone 4-1
Figma Interactive mockup instructions:
tap on center tile (Zone 5) to zoom into center
tap on center tile (Zone 5) to zoom into center
tap on upper left tile (Zone 1) to zoom into upper left corner
tap on "Back" icon at any point to zoom out
* The original Flash mockup was recreated in Figma in 2020
Related projects
Related projects
Page updated
Google Sites
Report abuse