mobile first

MOBILE
FIRST
LUKE WROBLEWSKI
AN EVENT APART 2010
@LUKEW
1
Web products should be designed for mobile first.
(Even if no mobile version is planned.)
Flickr photo by @kevinv033
2
Mobile First at Google
Google programmers are doing work
on mobile applications first, because
they are better apps and that's what
top programmers want to develop.
–Eric Schmidt, Google CEO
3
Mobile First at Facebook
We're just now starting to think about mobile first and desktop
second for a lot of our products.”
-Kate Aronowitz, Design Director Facebook
Flickr photo by gscottolson
4
Mobile First at Adobe
We really need to shift now to start thinking about building
mobile first. This is an even bigger shift than the PC revolution.”
-Kevin Lynch, CTO Adobe
Flickr photo by jdlasica
5
MOBILE FIRST
1. GROWTH
= OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION
6
Mobile Design Considerations
• Multiple screen sizes & densities
• Performance optimization
• Touch targets, gestures, and actions
• Location systems
• Device capabilities
7
MOBILE FIRST
1. GROWTH
= OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION
8
GROWTH = OPPORTUNITY
Mobile Web growth has outpaced desktop Web growth 8x
Smartphone sales will pass PC sales in 2012
PC
Desktop Internet
Mobile Consumer
100M+
1B+
10B+
1990
2000
2010
Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25
Source: ITU, Mark Lipacis, Morgan Stanley Research.
2020
9
10
2006
High-end RAZR-inspired
phone with class 12 EDGE
high-speed data & WAP
2.0/xHTML Web browser.
2G network GSM 850 / 900 / 1800 / 1900
SMS, EMS, MMS, Email, Instant Messaging
2 megapixel camera
Music player
Resolution: 176 x 220 pixels
Colors: 262,144 (18-bit)
11
12
4,932% Increase
AT&T mobile data traffic increased 50x in 3 years
iPhone
Motorola Z3
2006
2007
Source: AT&T, Morgan Stanley Research.
iPhone 3G
2008
iPhone 3GS
2009
13
27% of searches come from 4% of users
• 27% of all Yelp searches come from
their iPhone application which had
1.4 million unique users in May 2010
• That month Yelp had 32 million
monthly unique users around the
world
Source: http://officialblog.yelp.com/2010/06/yelp-mobile
14
Facebook on the iPhone
Create a product, don’t
re-imagine one for small
screens. Great mobile
products are created,
never ported.
–Brian Fling
15
“My goal was initially just to make a mobile companion, but I
became convinced it was possible to create a version of Facebook
that was actually better than the website.”
–Joe Hewitt
16
MOBILE FIRST
1. GROWTH
= OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION
17
SCREEN SIZE
• Focus on core actions
• Know your users
• Use scalable design
18
Screen Size
1024x768
320x480
19
Focus on Core Elements
In iPhone apps, the main function
should be immediately apparent.
Minimize the number of controls
from which users have to choose.
–iPhone Interface Guidelines
20
21
Southwest Airlines Mobile App
22
23
Screen Size
24
Screen Size
25
Know your audience
Flickr photo by wertheim
26
Expedia Itinerary
27
Expedia Itinerary
28
Designing For Multiple Screen Sizes
320x480
29
Smartphone Screen Sizes
iPhone
320x480
3.5 in
164ppi
Palm Pre
320x480
3.1 in
186ppi
Palm Pixie
320x400
2.63 in
194ppi
T-Mobile G1
MyTouch 3G
HTC Hero
320x480
3.2 in
180ppi
Motorola Droid
480x854
3.7 in
264ppi
Nexus One
HTC Desire
480x800
3.7 in
252ppi
Nokia N97
360x640
3.2 in
229ppi
Nokia N900
800x480
3.5 in
266ppi
iPhone4
640x960
3.5 in
329ppi
30
The Impact of PPI
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
31
The Impact of PPI
Cinema Display
1920x1200
24 in
94ppi
Nokia N900
800x480
3.5 in
266ppi
32
Designing for Multiple Screen Sizes
1. Define device groups
tiny: 84, 96, 101, 128, 130, 132
small: 160, 176
medium: 208, 220, 240
large: 320, 360, 480+
desktop: 800+
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
33
Designing for Multiple Screen Sizes
1. Define device groups
2. Create a default reference design
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
34
Designing for Multiple Screen Sizes
1. Define device groups
2. Create a default reference design
3. Define rules for content and design adaptation
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
http://www.littlespringsdesign.com/blog/blog/2009/03/11/photoshop-layout-is-not-your-friend/
35
Designing for Multiple Screen Sizes
1. 2. 3. 4. Define device groups
Create a default reference design
Define rules for content and design adaptation
Opt for web standards and a flexible layout
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
http://www.alistapart.com/articles/switchymclayout/
36
Visible App Controls
37
Hardware Control for Menu
38
Make Content the Action
You should not view the large iPad screen as an invitation to bring
back all the functionality you pruned from your your iPhone
application. –iPad Interface Guidelines
39
40
SPEED
• Keep performance top of mind
• Take advantage of HTML5
41
Connection Speed
42
Performance Tips
Reduce Requests & File Size
• • • • Eliminate redirects
Use CSS sprites to serve multiple images
Consolidate CSS & Javascript into a single file
Minify your code
Take Advantage of HTML5
• Load contents lazily
• Use application cache for local content storage
• Use CSS3 and canvas tag instead of images where
possible
Source: Make the mobile web faster, Jeremy Weinstein
43
Performance Matters!
100ms delay results in 1% sales loss.
(potential $191M in lost revenue in 2008)
400ms delay results in 5-9% drop in fullpage traffic.
500ms delay drops search traffic by 20%.
The cost of slower performance increases
over time.
1s delay results 4% drop in revenue
Fastest 10% of users stay 50% longer than
slowest 10%
Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters
44
CONTEXT
• Quick bursts… everywhere
• One-handed
45
During a typical day…
84% at home
80% during misc. times throughout the day
74% waiting in lines
64% at work
46
Flickr photo by Laughing Squid
Use Cases for Mobile Apps
• Access to Facebook via mobile browser grew
112% in the past year to 25.1 million users in
January 2010.
• Access to Twitter via mobile browser
experienced a 347% jump to 4.7 million users
in January 2010.
47
People Don’t Stay Long
• Across 650,000 URLs tested…
10%
• 25% of all documents
were displayed for
less than 4 seconds
9%
8%
7%
• 52% of all visits were
shorter than 10
seconds
6%
5%
4%
• Peak value was
located between 2
and 3 seconds
3%
2%
1%
0%
0
2
4
6
8
10 12 14 16 18 20 22 24 26 28 30
SECONDS DISPLAYED
Source: Clickstream Study Reveals Dynamic Web, Weboptimization.com
48
Where phones used
One-handed touch
Flickr photo by Steve Rhodes
49
MOBILE FIRST
1. GROWTH
= OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION
50
TOUCH
• Simplify your user interface
• Don’t count on hovers
51
Nokia smartphone mix
Keypad
Qwerty Only
Touch INCLUDES QWERTY + TOUCH
1.1 billion consumers with Nokia devices in 2009
2008
2009
Source: Nokia –deices sold. Nokia Capital markets day 2009.
2010
PROJECTED
52
Touch Targets
Apple recommends a
minimum target size:
29px wide
44px tall
Source: Matt Legend Gemmell – mattgemmell.com
53
Touch Targets
Recommended touch
target size is 9mm/34px
Minimum touch target
size is 7mm/26px
Minimum spacing
between elements is
2mm/8px
Visual size is 60-100% of
the touch target size
54
55
Basic Touch Gestures
Touch Gestures
Tap
Double Tap
Drag
Flick
Pinch
Spread
Press
Press & Tap
Platforms
iPhone OS
Android
Web OS
Windows Phone 7
OS X
Windows 7
RIM 6.0
Ubuntu
And more...
Press & Drag
Rotate
56
Basic Touch Gestures
Tap
Briefly touch surface with fingertip.
Double Tap
Rapidly touch surface twice with fingertip.
Images: Dan Willis Research: Craig Villamor & LukeW
57
Basic Touch Gestures
Drag
Move fingertip over surface without losing contact.
Flick
Quickly brush surface with fingertip.
Images: Dan Willis Research: Craig Villamor & LukeW
58
Basic Touch Gestures
Pinch
Touch surface with two fingers and bring them closer together.
Spread
Touch surface with two fingers and move them apart.
Images: Dan Willis Research: Craig Villamor & LukeW
59
Basic Touch Gestures
Press
Press & Tap
Touch surface for extended period
of time.
Press surface with one finger and
briefly touch surface with second
finger.
Press & Drag
Press surface with one finger and move second finger over surface without losing
contact.
Images: Dan Willis Research: Craig Villamor & LukeW
60
Basic Touch Gestures
Rotate
Touch surface with two fingers and move them in a clockwise or
counterclockwise direction.
Images: Dan Willis Research: Craig Villamor & LukeW
61
System-related Actions
Images: Dan Willis Research: Craig Villamor & LukeW
62
Object-related Actions
Images: Dan Willis Research: Craig Villamor & LukeW
63
Navigation-related Actions
www.lukew.com/touch
Images: Dan Willis Research: Craig Villamor & LukeW
64
Gestures as Input
65
Pop-Up Menus on iPhone
66
Pop-Up Menus on Android
67
Multi-Field Pop-Up Menus on iPhone
68
Multi-Field Pop-Up Menus on Android
69
Hover Details & Actions
70
71
Tooltip with Hover
72
LOCATION
• Positioning
• Filtering
73
Location as Input
74
Location as Input
75
Location as Input
76
Location Systems
Accuracy
Positioning Time
Battery Life
GPS
10m
2-10 minutes (only
outdoors)
5-6 hours on
most phones
WiFi
50m (improves with
density)
Almost instant
(server connect &
lookup)
No additional
effect
Cell tower
triangulation
100-1400m (based on
density)
Almost instant
(server connect &
lookup)
Negligible
Single Cell
Tower
500-2500m (based on
density)
Almost instant
(server connect &
lookup)
Negligible
IP
Country: 99%
City: 46% US, 53% Intl
ZIP: 0%
Almost instant
(server connect &
lookup)
Negligible
Smartphones: hybrid of GPS, Wifi, and cell tower triangulation
Laptops/desktops: WiFi, IP, rarely GPS
77
78
AND MORE…
• Orientation
• Audio & Video
• The List Goes On…
79
Mobile Device Capabilities
• • Application cache for local storage
CSS3 & Canvas for performance optimization
• Multi-touch sensors
• Location detection
• • Device positioning & motion: from an accelerometer
Orientation: direction from a digital compass
• Audio: input from a microphone; output to speaker
• Video & image: capture/input from a camera
• Push: real-time notifications “instant” to user
• Device connections: through Bluetooth between devices
• Proximity: device closeness to physical objects
• Ambient Light: light/dark environment awareness
• RFID reader: identify & track objects with broadcasted identifiers
• Haptic feedback: “feel” different surfaces on a screen
• Biometrics: retinal, fingerprint, etc.
80
Multiple Orientations
81
Standard Orientation
82
Pivot Orientation
83
Orientation Detection in Firefox 3.6
Source: http://hacks.mozilla.org/2009/10/orientation-for-firefox/
84
Tilt Scrolling in Instapaper
85
Voice as Input
86
87
Location & Orientation as Input
88
Location & Orientation as Input
When discovered by users
boosted their sustained traffic
by 40 to 50 percent.
“It was sort of beyond our
expectations. We had no idea.”
Yelp CEO,
Jeremy Stoppelman
89
Awkward Interactions
SCAN TO CHECKOUT
Flickr photo by Nokia Point & Find
90
Images as Input
91
SnapTell on iPhone
92
Images as Input
93
Images as Input
94
Images as Input
95
Nerd.
Found.
Flickr photo by Nokia Point & Find
96
97
Location Check-in
98
Facebook Presence
99
Mobile Device Capabilities
• • Application cache for local storage
CSS3 & Canvas for performance optimization
• Multi-touch sensors
• Location detection
• Device positioning & motion: from an accelerometer
• Orientation: direction from a digital compass
• • Gyroscope:
360 degrees
of motion
Audio:
input from
a microphone;
output to speaker
• • Dual cameras:
front & back facing
Video
& image: capture/input
from a camera
• • Push: real-time notifications “instant” to user
Device connections: through Bluetooth between devices
• Proximity: device closeness to physical objects
• Ambient Light: light/dark environment awareness
• RFID reader: identify & track objects with broadcasted identifiers
• Haptic feedback: “feel” different surfaces on a screen
• Biometrics: retinal, fingerprint, etc.
100
MOBILE FIRST
1. GROWTH
= OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION
101
Mobile Design Considerations
• Multiple screen sizes & densities
• Performance optimization
• Touch targets, gestures, and actions
• Location systems
• Device capabilities
102
More Information
• @lukew
• www.lukew.com
Web Form Design
• www.rosenfeldmedia.com/
books/webforms/
• Discount code: (25%)
103