why you should design for mobile first_wroblewski-tues-talk

8/8/2019 Why You Should Design for Mobile First_wroblewski-Tues-talk

1/58

Luke Wroblewski, LukeW Ideation & Design

Why You Should Design for Mobile FirstTuesday, November 9, 2010


2/58

Why You Should Design for Mobile First

Luke Wroblewski, LukeW Ideation & Design | Most of this sessions content isdifferent from Lukes 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 evenconsidered the mobile experience. This made perfect sense for a while.Browsing the Web on mobile phones was painful; carriers controlled access tothe Web on their devices; and mobile network speeds made everything oftengrind to a halt.

But things have changed so dramatically over the past few years that startingwith the desktop may be an increasingly backwards way of thinking about a

Web product. Designing for mobile first can not only open up new opportunitiesfor growth, it can lead to a better overall user experience for a Web site orapplication.

In this session, Luke Wroblewski will dig into the three key reasons to considermobile first: mobile is seeing explosive growth; mobile forces you to focus; andmobile extends your capabilities.


3/58

1!

1

MOBILEFIRSTLUKE WROBLEWSKIUI15 BOSTON 2010

@LUKEW

2

Web products should be designed for mobile first.

(Even if no mobile version is planned.)

Flickr photo by @kevinv033


4/58

2!

3

Mobile First at Google

Google programmers are doing workon mobile applications first, because

they are better apps and that's whattop programmers want to develop.

Eric Schmidt, Google CEO

4

MOBILE FIRST

1.GROWTH2.CONSTRAINTS3.CAPABILITIES

= OPPORTUNITY

= FOCUS

= INNOVATION


5/58

3!

5

Mobile Design Considerations

Multiple screen sizes & densitiesPerformance optimizationTouch targets, gestures, and actionsLocation systems

Device capabilities

6

MOBILE FIRST


= OPPORTUNITY

= FOCUS

= INNOVATION


6/58

4!

7

1990

PC

100M+

2010 2020

Mobile Consumer

10B+

Mobile Web growth has outpaced desktop Web growth 8x

Smartphone sales will pass PC sales in 2012

2000

Desktop Internet

1B+

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

GROWTH = OPPORTUNITY

8


7/58

5!

9

2006

High-end RAZR-inspiredphone with class 12 EDGE

high-speed data & WAP2.0/xHTML Web browser.

2G network GSM 850 / 900 / 1800 / 1900SMS, EMS, MMS, Email, Instant Messaging

2 megapixel cameraMusic playerResolution: 176 x 220 pixels

Colors: 262,144 (18-bit)

10


8/58

6!

11Source: AT&T, Morgan Stanley Research.

4,932% Increase

2006 2007 2008 2009

AT&T mobile data traffic increased 50x in 3 years

iPhone iPhone 3G iPhone 3GS

www.lukew.com/ff/

Motorola Z3

12

27% of all Yelp searches come fromtheir iPhone application which had

1.4 million unique users in May 2010

That month Yelp had 32 millionmonthly unique users around the

world

Source: http://officialblog.yelp.com/2010/06/yelp-mobile

27% of searches come from 4% of users


9/58

7!

13

Facebook on the iPhone

Create a product, dontre-imagine one for small

screens. Great mobileproducts are created,

never ported.Brian Fling

14

My goal was initially just to make a mobile companion, but Ibecame convinced it was possible to create a version of Facebook

that was actually better than the website.Joe Hewitt


10/58

8!

15

MOBILE FIRST


= OPPORTUNITY

= FOCUS

= INNOVATION

16

SCREEN SIZEFocus on core actionsKnow your usersUse scalable design


11/58

9!

17

320x4801024x768

Screen Size

18

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


12/58

10!

19

20

Southwest Airlines Mobile App


13/58

11!

21

22

Screen Size


14/58

12!

23

Screen Size

24

Know your audience

i k p o o i


15/58

13!

25

Expedia Itinerary

26

Expedia Itinerary


16/58

14!

27

28


17/58

15!

29

Designing For Multiple Screen Sizes

320x480

30

iPhone 320x480 3.5 in 164ppi

Palm Pre 320x480 3.1 in 186ppi

Palm Pixie 320x400 2.63 in 194ppi

T-Mobile G1

MyTouch 3GHTC 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

Smartphone Screen Sizes


18/58

16!

31

The Impact of PPI

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

32

The Impact of PPI

Cinema Display 1920x1200 24 in 94ppi

Nokia N900 800x480 3.5 in 266ppi


19/58

17!

33

Designing for Multiple Screen Sizes


1.Define device groups

tiny: 84, 96, 101, 128, 130, 132small: 160, 176

medium: 208, 220, 240large: 320, 360, 480+

desktop: 800+

34



1.Define device groups2.Create a default reference design


20/58

18!

35

1.Define device groups2.Create a default reference design3.Define rules for content and design adaptation



http://www.littlespringsdesign.com/blog/blog/2009/03/11/photoshop-layout-is-not-your-friend/

36


1.Define device groups2.Create a default reference design3.Define rules for content and design adaptation4.Opt for web standards and a flexible layout


http://www.alistapart.com/articles/switchymclayout/


21/58


22/58

20!

39

Hardware Control for Menu

40

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 iPhoneapplication. iPad Interface Guidelines


23/58

21!

41

42

Design Matters on the iPhone


24/58

22!

43

SPEEDKeep performance top of mindTake advantage of HTML5

44

Connection Speed


25/58

23!

45

Performance Tips

Load contents lazilyUse application cache for local content storageUse CSS3 and canvas tag instead of images where

possible

Reduce Requests & File Size

Take Advantage of HTML5

Source: Make the mobile web faster,Jeremy Weinstein

Eliminate redirectsUse CSS sprites to serve multiple imagesConsolidate CSS & Javascript into a single fileMinify your code

46

Performance Matters!

Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters

Fastest 10% of users stay 50% longer thanslowest 10%

500ms delay drops search traffic by 20%.The cost of slower performance increases

over time.

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.

1s delay results 4% drop in revenue


26/58

24!

47

CONTEXTQuick bursts everywhereOne-handed

48

During a typical day84% at home

80% during misc. times throughout the day

74% waiting in lines

64% at work i k p o o a in i


27/58


28/58

26!

51

Where phones used

One-handed touch

i k p o o o

52

MOBILE FIRST


= OPPORTUNITY

= FOCUS

= INNOVATION


29/58

27!

53

TOUCHSimplify your user interfaceDont count on hovers

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

Nokia smartphone mix

2008 2009 2010PROJECTED

Keypad

Qwerty Only

Touch INCLUDES QWERTY + TOUCH

1.1 billion consumers with Nokia devices in 2009


30/58

28!

55

Touch Targets

Source: Matt Legend Gemmell mattgemmell.com

Apple recommends aminimum target size:29px wide44px tall

56

Touch Targets

Recommended touchtarget size is 9mm/34px

Minimum touch targetsize is 7mm/26px

Minimum spacingbetween elements is2mm/8px

Visual size is 60-100% ofthe touch target size


31/58

29!

57

58

Target Sizes for Slipping Fingers

Source: Matt Legend Gemmell mattgemmell.com

If you tap and hold in theyellow area, button will

highlight

If you drag finger & release ingreen area, button will stilltrigger

If you let go outside greenarea, button does not trigger


32/58

30!

59

Basic Touch Gestures

Tap

Double Tap

Drag

Flick

Pinch

Spread

Press

Press & Tap

Press & Drag

Rotate

Touch Gestures Platforms

iPhone OS

Android

Web OS

Windows Phone 7

OS X

Windows 7

RIM 6.0

Ubuntu

And more...

60


Images: Dan Willis Research: Craig Villamor & LukeW

TapBriefly touch surface with fingertip.

Double TapRapidly touch surface twice with fingertip.


33/58

31!

61



DragMove fingertip over surface without losing contact.

FlickQuickly brush surface with fingertip.

62



PinchTouch surface with two fingers and bring them closer together.

SpreadTouch surface with two fingers and move them apart.


34/58

32!

63



PressTouch surface for extended periodof time.

Press & DragPress surface with one finger and move second finger over surface without losingcontact.

Press & TapPress surface with one finger andbriefly touch surface with secondfinger.

64



RotateTouch surface with two fingers and move them in a clockwise orcounterclockwise direction.


35/58

33!

65

System-related Actions


66

Object-related Actions



36/58

34!

67

Navigation-related Actions


www.lukew.com/touch

68

Specialized Touch Gestures

Source: User-Defined Gestures for Surface Computing


37/58

35!

69

Gestures as Input

70

Pop-Up Menus on iPhone


38/58

36!

71

Pop-Up Menus on Android

72

Multi-Field Pop-Up Menus on iPhone


39/58

37!

73

Multi-Field Pop-Up Menus on Android

74

Hover Details & Actions


40/58

38!

75

76

Tooltip with Hover


41/58

39!

77

LOCATIONPositioningFiltering

78

Location as Input


42/58

40!

79

Location as Input

80

Location as Input


43/58

41!

81

Accuracy Positioning Time Battery LifeGPS 10m 2-10 minutes (only

outdoors)5-6 hours onmost phones

WiFi 50m (improves withdensity)

Almost instant(server connect &lookup)

No additionaleffect

Cell tower

triangulation

100-1400m (based ondensity)


Negligible

Single Cell

Tower

500-2500m (based ondensity)


Negligible

IP Country: 99%City: 46% US, 53% IntlZIP: 0%


Negligible

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

Laptops/desktops: WiFi, IP, rarely GPS

Location Systems

82


44/58

42!

83

AND MOREOrientationAudio & VideoThe List Goes On

84

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.


45/58

43!

85

Multiple Orientations

86

iPad Orientation


46/58

44!

87

Standard Orientation

88

Pivot Orientation


47/58

45!

89

Orientation Detection in Firefox 3.6

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

90

Tilt Scrolling in Instapaper

Source: http://vimeo.com/1540283


48/58

46!

91

Voice as Input

92


49/58

47!

93

Location & Orientation as Input

94

Location & Orientation as Input

When discovered by users

boosted their sustained trafficby 40 to 50 percent.

It was sort of beyond our

expectations. We had no idea.

Yelp CEO,Jeremy Stoppelman


50/58

48!

95

Awkward Interactions

SCAN TO CHECKOUT

Flickr photo by Nokia Point & Find

96

Images as Input


51/58

49!

97

SnapTell on iPhone

98

Images as Input


52/58

50!

99

Images as Input

100

Images as Input


53/58

51!

101

Nerd.Found.

Flickr photo by Nokia Point & Find

102


54/58

52!

103

iPhone RFID Reader

104

Location Check-in


55/58

53!

105

Facebook Presence

106

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.

Gyroscope: 360 degrees of motion Dual cameras: front & back facing


56/58

54!

107

MOBILE FIRST


= OPPORTUNITY

= FOCUS

= INNOVATION

108

Mobile Design Considerations

Multiple screen sizes & densitiesPerformance optimizationTouch targets, gestures, and actionsLocation systemsDevice capabilities


57/58

55!

109

More Information

@lukewwww.lukew.comWeb Form Design

www.rosenfeldmedia.com/books/webforms/

Discount code: (25%)


58/58

510 Turnpike Street, Suite 102North Andover, MA 01845978-327-5561 or 800-588-9855http://www.uie.com

User Interface Engineering

EVENTS

Learn the design, information architecture, and usability insights used by todays most suc-cessful websites. UIEs monthly Virtual Seminars will give you the chance to hear the latestperspectives in the world of design from the field's premier experts, right from your office,without the expense of traveling.

UIE Virtual Seminars uie.com/events/virtual_seminars

PUBLICATIONS

UIEtips Email Newsletter uie.com/uietipsUIEs free email newsletter highlighting our latest research, products, and public speakingengagements.

UIE Podcast

UIE Reports

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 sitesuser experience.

uie.com/brainsparks/topics/podcasts

Our in-depth reports detail the latest happenings in the world of design.

UIE Brain Sparks Blog

UIEs place to share our latest research and musings with you. Well be sharing our latest ideasand observations in the hope of sparking the same in you.

uie.com/reports

uie.com/brainsparks

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 Engineeringinto the largest research organization of its kind in the world. With our in-depth research findingsbased on user observation, we empower development teams to create usable web sites thatincrease customer satisfaction and loyalty.

why you should design for mobile first_wroblewski-tues-talk

Documents