Tuesday, November 9, 2010

Why You Should Design for Mobile First

– Luke Wroblewski, LukeW Ideation & Design
Why You Should Design for Mobile First

Luke Wroblewski, LukeW Ideation & Design | Most of this session’s content is
different from Luke’s full-day workshop.

According to Luke, Web products should be designed for mobile first. For years,
most Web teams have designed for the desktop. Mobile, if it even happened,
was a port off the desktop version, designed and built before anyone even
considered the mobile experience. This made perfect sense for a while.
Browsing the Web on mobile phones was painful; carriers controlled access to
the Web on their devices; and mobile network speeds made everything often
grind to a halt.

But things have changed so dramatically over the past few years that starting
with the desktop may be an increasingly backwards way of thinking about a
Web product. Designing for mobile first can not only open up new opportunities
for growth, it can lead to a better overall user experience for a Web site or
application.

In this session, Luke Wroblewski will dig into the three key reasons to consider
mobile first: mobile is seeing explosive growth; mobile forces you to focus; and
mobile extends your capabilities.
 MOBILE
FIRST
LUKE WROBLEWSKI
UI15 BOSTON 2010

@LUKEW

Web products should be designed for mobile first.

(Even if no mobile version is planned.)
Flickr photo by @kevinv033 2

1!
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

MOBILE FIRST
1.  GROWTH = OPPORTUNITY
2.  CONSTRAINTS = FOCUS
3.  CAPABILITIES = INNOVATION

2!
Mobile Design Considerations
•  Multiple screen sizes & densities
•  Performance optimization
•  Touch targets, gestures, and actions
•  Location systems
•  Device capabilities

MOBILE FIRST
1.  GROWTH = OPPORTUNITY
2.  CONSTRAINTS = FOCUS
3.  CAPABILITIES = INNOVATION

3!
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 2020

Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25
7
Source: ITU, Mark Lipacis, Morgan Stanley Research.

4!
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)

10

5!
4,932% Increase
AT&T mobile data traffic increased 50x in 3 years

Motorola Z3 iPhone iPhone 3G iPhone 3GS

www.lukew.com/ff/

2006 2007 2008 2009

11
Source: AT&T, Morgan Stanley Research.

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 12

6!
Facebook on the iPhone

Create a product, don’t

re-imagine one for small
screens. Great mobile
products are created,
never ported.
–Brian Fling

13

“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
14

7!
MOBILE FIRST
1.  GROWTH = OPPORTUNITY
2.  CONSTRAINTS = FOCUS
3.  CAPABILITIES = INNOVATION

15

SCREEN SIZE
•  Focus on core actions
•  Know your users
•  Use scalable design

16

8!
Screen Size

1024x768 320x480

17

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

18

9!
 19

Southwest Airlines Mobile App

20

10!
 21

Screen Size

22

11!
Screen Size

23

Know your audience

Flickr photo by wertheim 24

12!
Expedia Itinerary

25

Expedia Itinerary

26

13!
27

28

14!
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 320x480 3.2 in 180ppi

MyTouch 3G
HTC Hero

Motorola Droid 480x854 3.7 in 264ppi

Nexus One 480x800 3.7 in 252ppi

HTC Desire

Nokia N97 360x640 3.2 in 229ppi

Nokia N900 800x480 3.5 in 266ppi

iPhone4 640x960 3.5 in 329ppi

30

15!
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

16!
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+

33
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Designing for Multiple Screen Sizes

1.  Define device groups

2.  Create a default reference design

34
Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

17!
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
35
http://www.littlespringsdesign.com/blog/blog/2009/03/11/photoshop-layout-is-not-your-friend/

Designing for Multiple Screen Sizes

1.  Define device groups

2.  Create a default reference design
3.  Define rules for content and design adaptation
4.  Opt for web standards and a flexible layout

Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
36
http://www.alistapart.com/articles/switchymclayout/

18!
Which Screen Size?

320x480

37

Visible App Controls

38

19!
Hardware Control for Menu

39

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

40

20!
 41

Design Matters on the iPhone

42

21!
 SPEED
•  Keep performance top of mind
•  Take advantage of HTML5

43

Connection Speed

44

22!
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 45

Performance Matters!

100ms delay results in 1% sales loss.

(potential $191M in lost revenue in 2008)

400ms delay results in 5-9% drop in full-

page 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 46

23!
 CONTEXT
•  Quick bursts… everywhere
•  One-handed

47

During a typical day…

84% at home
80% during misc. times throughout the day
74% waiting in lines
64% at work 48
Flickr photo by Laughing Squid

24!
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.

49

People Don’t Stay Long

•  Across 650,000 URLs tested…

10%
9% •  25% of all documents
8% were displayed for
less than 4 seconds
7%
6% •  52% of all visits were
5%
shorter than 10
seconds
4%
3% •  Peak value was
2%
located between 2
and 3 seconds
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 50

25!
Where phones used

One-handed touch

Flickr photo by Steve Rhodes 51

MOBILE FIRST
1.  GROWTH = OPPORTUNITY
2.  CONSTRAINTS = FOCUS
3.  CAPABILITIES = INNOVATION

52

26!
 TOUCH
•  Simplify your user interface
•  Don’t count on hovers

53

Nokia smartphone mix

Keypad
Qwerty Only
Touch INCLUDES QWERTY + TOUCH

1.1 billion consumers with Nokia devices in 2009

2008 2009 2010

PROJECTED

54
Source: Nokia –deices sold. Nokia Capital markets day 2009.

27!
Touch Targets

Apple recommends a
minimum target size:
29px wide
44px tall

Source: Matt Legend Gemmell – mattgemmell.com 55

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

56

28!
 57

Target Sizes for Slipping Fingers

If you tap and hold in the

yellow area, button will
highlight

If you drag finger & release in

green area, button will still
trigger

If you let go outside green

area, button does not trigger

Source: Matt Legend Gemmell – mattgemmell.com 58

29!
Basic Touch Gestures

Touch Gestures Platforms

Tap iPhone OS
Double Tap Android
Web OS
Drag
Windows Phone 7
Flick
OS X
Pinch Windows 7
Spread RIM 6.0
Press Ubuntu
And more...
Press & Tap
Press & Drag
Rotate

59

Basic Touch Gestures

Tap
Briefly touch surface with fingertip.

Double Tap
Rapidly touch surface twice with fingertip.

Images: Dan Willis Research: Craig Villamor & LukeW 60

30!
Basic Touch Gestures

Drag
Move fingertip over surface without losing contact.

Flick
Quickly brush surface with fingertip.

Images: Dan Willis Research: Craig Villamor & LukeW 61

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 62

31!
Basic Touch Gestures

Press Press & Tap

Touch surface for extended period Press surface with one finger and
of time. 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 63

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 64

32!
System-related Actions

Images: Dan Willis Research: Craig Villamor & LukeW 65

Object-related Actions

Images: Dan Willis Research: Craig Villamor & LukeW 66

33!
Navigation-related Actions

www.lukew.com/touch

Images: Dan Willis Research: Craig Villamor & LukeW 67

Specialized Touch Gestures

68
Source: User-Defined Gestures for Surface Computing

34!
Gestures as Input

69

Pop-Up Menus on iPhone

70

35!
Pop-Up Menus on Android

71

Multi-Field Pop-Up Menus on iPhone

72

36!
Multi-Field Pop-Up Menus on Android

73

Hover Details & Actions

74

37!
 75

Tooltip with Hover

76

38!
 LOCATION
•  Positioning
•  Filtering

77

Location as Input

78

39!
Location as Input

79

Location as Input

80

40!
Location Systems
Accuracy Positioning Time Battery Life

GPS 10m 2-10 minutes (only 5-6 hours on

outdoors) most phones

WiFi 50m (improves with Almost instant No additional

density) (server connect & effect
lookup)

Cell tower 100-1400m (based on Almost instant Negligible

triangulation density) (server connect &
lookup)

Single Cell 500-2500m (based on Almost instant Negligible

Tower density) (server connect &
lookup)

IP Country: 99% Almost instant Negligible

City: 46% US, 53% Intl (server connect &
ZIP: 0% lookup)

Smartphones: hybrid of GPS, Wifi, and cell tower triangulation

Laptops/desktops: WiFi, IP, rarely GPS 81

82

41!
AND MORE…
•  Orientation
•  Audio & Video
•  The List Goes On…

83

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.
84

42!
Multiple Orientations

85

iPad Orientation

86

43!
Standard Orientation

87

Pivot Orientation

88

44!
Orientation Detection in Firefox 3.6

Source: http://hacks.mozilla.org/2009/10/orientation-for-firefox/ 89

Tilt Scrolling in Instapaper

Source: http://vimeo.com/1540283 90

45!
Voice as Input

91

92

46!
Location & Orientation as Input

93

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

94

47!
 Awkward Interactions

SCAN TO CHECKOUT

95
Flickr photo by Nokia Point & Find

Images as Input

96

48!
SnapTell on iPhone

97

Images as Input

98

49!
Images as Input

99

Images as Input

100

50!
 Nerd.
Found.

101
Flickr photo by Nokia Point & Find

102

51!
iPhone RFID Reader

103

Location Check-in

104

52!
Facebook Presence

105

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:
Audio: 360 degrees
input from of motion
a microphone; output to speaker
• •  Dual cameras:
Video front & back facing
& 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.
106

53!
MOBILE FIRST
1.  GROWTH = OPPORTUNITY
2.  CONSTRAINTS = FOCUS
3.  CAPABILITIES = INNOVATION

107

Mobile Design Considerations

•  Multiple screen sizes & densities
•  Performance optimization
•  Touch targets, gestures, and actions
•  Location systems
•  Device capabilities

108

54!
More Information
•  @lukew
•  www.lukew.com

Web Form Design

•  www.rosenfeldmedia.com/
books/webforms/
•  Discount code: (25%)

109

55!
 User Interface Engineering
510 Turnpike Street, Suite 102
North Andover, MA 01845
978-327-5561 or 800-588-9855
http://www.uie.com

COMPANY BACKGROUND
User Interface Engineering is a leading think tank, specializing in website and product usabil-
ity. Jared M. Spool founded the company back in 1988 and has built User Interface Engineering
into the largest research organization of its kind in the world. With our in-depth research findings
based on user observation, we empower development teams to create usable web sites that
increase customer satisfaction and loyalty.

PUBLICATIONS
UIEtips Email Newsletter uie.com/uietips
UIE’s free email newsletter highlighting our latest research, products, and public speaking
engagements.
UIE Podcast uie.com/brainsparks/topics/podcasts
A variety of recorded podcasts to download or listen online. Topics focus around user experi-
ence with interviews from leading experts to useful tips and techniques for improving your site’s
user experience.
UIE Reports uie.com/reports
Our in-depth reports detail the latest happenings in the world of design.

UIE Brain Sparks Blog uie.com/brainsparks

UIE’s place to share our latest research and musings with you. We’ll be sharing our latest ideas
and observations in the hope of sparking the same in you.

EVENTS
UIE Virtual Seminars uie.com/events/virtual_seminars
Learn the design, information architecture, and usability insights used by today’s most suc-
cessful websites. UIE’s monthly Virtual Seminars will give you the chance to hear the latest
perspectives in the world of design from the field's premier experts, right from your office,
without the expense of traveling.

Road Shows and Conferences uie.com/events

Meet the innovators and world-class designers behind today's most successful UX designs at
one of our road shows or conferences. UIE offers an assortment of 1 day road shows and 2-3
day conferences across the US throughout the year, which are geared to power up your cre-
ative juices and re-ignite your passion in UX.