Tablet First Design
Holistic UX
designing ubiquitous multi-device experiences
So, how do we design Multi-device Experiences?
- research first
- understand customers first
- design a holistic experience without regard to device or screen size
- sketch and storyboard elaborate user journeys (including mobile journeys)
FourPoint Energy Example
rule: understand your user
Fourpoint example (continued)
rule: storyboard elaborate user journeys
"Design is a balance between
Utility
Usability
& Beauty"
- John Wiley, Lead Designer on Google search UX
Prototype!
The modern web has transformed
then: flat, static page loads
now: rich, animated page transition and interaction patterns
Why?
So that everyone understands/agree on interaction patterns
Designers vs. clients/stakeholders (envisioning gesture and animation)
how?
-
Build simple interactive prototypes using HTML, CSS, and Javascript
-
Illustrate user interaction patterns via animated .gif's created in after effects or similar motion graphic software
Flat Design Comps
Animated UI design prototype
Phone, Tablet, PhaBlet, Tablerone
"The user is a mobile person - not a mobile device - who moves across screens and devices"
- Christian Crumlish
Director of product at CloudOn
Fragmentation
2013 Landscape: 11,868 different ANDROID devices
Up from 3,997 in 2012
Something to think about
Research and analytics can tell you what a user is currently using your service for on whatever device they are on. But it's up to you to go out and determine what your user may want in the future
Example discovery
Captcha UI bug - user clicks, input zooms, keyboards slides up, covers captcha box
#tabletfirst vs #tablet1st