Embedded Files
A glanceable way of inspecting key information
UI Researcher: Microsoft Research
ROLE: UI design, mockups
CHALLENGE: Allow users to glance at their devices and ascertain the most compelling information and adjust information to match the users divided attention
SOLUTION: I incorporated spring-loaded interactions to support three levels of attentional demand: glance, peek, and inspect, along with responsive designs for canonical apps that fit into this framework
TOOLS: Flash, Expression Blend, 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
Glance Mode
Glance Mode
All app tiles get same amount of screen space
Peek View
Peek View
Press-and-hold (long hold) on an app tile shows more detail in a non-interactive view
Glance view on a smartwatch
Peek view on a smartwatch
Full interact mode on a smartwatch
Mockup instructions:
Press-and-hold on any of the main nine tiles to temporarily zoom into that tile
Release when the cursor or finger is over the "More..." button to cause that app to fill the entire screen
* The original Flash mockup was recreated in Figma in 2020
Design Process
Design Process
Logical connectivity between different contexts is quite complex and requires responsive design for every element
Tile design variations
Tile design variations
Saturated tiles with shading
Saturated flat tiles
Desaturated shade tiles
Desaturated tiles with offset
Original version that incorporated a universal command and filtering mechanism
Original version that incorporated multiple view styles: Grid, List, Map, and Details
Related Projects
Related Projects
Page updated
Google Sites
Report abuse