MOBILE FIRST LUKE WROBLEWSKI AN EVENT APART

Transcription

1 MOBILE FIRST LUKE WROBLEWSKI AN EVENT APART 1

2 Web products should be designed for mobile first. (Even if no mobile version is planned.) Flickr photo 2

3 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

4 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

5 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

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

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

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

9 GROWTH = OPPORTUNITY Mobile Web growth has outpaced desktop Web growth 8x Smartphone sales will pass PC sales in 2012 PC 100M+ Desktop Internet 1B+ Mobile Consumer 10B 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. 9

10 10

11 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, , Instant Messaging 2 megapixel camera Music player Resolution: 176 x 220 pixels Colors: 262,144 (18-bit) 11

12 12

13 4,932% Increase AT&T mobile data traffic increased 50x in 3 years Motorola Z3 iphone iphone 3G iphone 3GS Source: AT&T, Morgan Stanley Research. 13

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

15 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

16 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

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

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

19 Screen Size 1024x x480 19

20 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 21

22 Southwest Airlines Mobile App 22

23 23

24 Screen Size 24

25 Screen Size 25

26 Know your audience Flickr photo by wertheim 26

27 Expedia Itinerary 27

28 Expedia Itinerary 28

29 Designing For Multiple Screen Sizes 320x480 29

30 Smartphone Screen Sizes iphone 320x in 164ppi Palm Pre 320x in 186ppi Palm Pixie 320x in 194ppi T-Mobile G1 MyTouch 3G HTC Hero 320x in 180ppi Motorola Droid 480x in 264ppi Nexus One HTC Desire 480x in 252ppi Nokia N97 360x in 229ppi Nokia N x in 266ppi iphone4 640x in 329ppi 30

31 The Impact of PPI Source: 31

32 The Impact of PPI Cinema Display 1920x in 94ppi Nokia N x in 266ppi 32

33 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: 33

34 Designing for Multiple Screen Sizes 1. Define device groups 2. Create a default reference design Source: 34

35 Designing for Multiple Screen Sizes 1. Define device groups 2. Create a default reference design 3. Define rules for content and design adaptation Source:

36 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:

37 Visible App Controls 37

38 Hardware Control for Menu 38

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 39

40 40

41 SPEED Keep performance top of mind Take advantage of HTML5 41

42 Connection Speed 42

43 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

44 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

45 CONTEXT Quick bursts everywhere One-handed 45

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

47 Use Cases for Mobile Apps Access to Facebook via mobile browser grew 112% in the past year to 25.1 million users in January Access to Twitter via mobile browser experienced a 347% jump to 4.7 million users in January

48 People Don t Stay Long Across 650,000 URLs tested 10% 9% 8% 7% 6% 5% 4% 3% 2% 1% 25% of all documents were displayed for less than 4 seconds 52% of all visits were shorter than 10 seconds Peak value was located between 2 and 3 seconds 0% SECONDS DISPLAYED Source: Clickstream Study Reveals Dynamic Web, Weboptimization.com 48

49 Where phones used One-handed touch Flickr photo by Steve Rhodes 49

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

51 TOUCH Simplify your user interface Don t count on hovers 51

52 Nokia smartphone mix Keypad Qwerty Only Touch INCLUDES QWERTY + TOUCH 1.1 billion consumers with Nokia devices in PROJECTED Source: Nokia deices sold. Nokia Capital markets day

53 Touch Targets Apple recommends a minimum target size: 29px wide 44px tall Source: Matt Legend Gemmell mattgemmell.com 53

54 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 % of the touch target size 54

55 55

56 Basic Touch Gestures Touch Gestures Tap Double Tap Drag Flick Pinch Spread Press Press & Tap Press & Drag Rotate Platforms iphone OS Android Web OS Windows Phone 7 OS X Windows 7 RIM 6.0 Ubuntu And more... 56

57 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

58 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

59 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

60 Basic Touch Gestures Press Touch surface for extended period of time. Press & Tap 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

61 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

62 System-related Actions Images: Dan Willis Research: Craig Villamor & LukeW 62

63 Object-related Actions Images: Dan Willis Research: Craig Villamor & LukeW 63

64 Navigation-related Actions Images: Dan Willis Research: Craig Villamor & LukeW 64

65 Gestures as Input 65

66 Pop-Up Menus on iphone 66

67 Pop-Up Menus on Android 67

68 Multi-Field Pop-Up Menus on iphone 68

69 Multi-Field Pop-Up Menus on Android 69

70 Hover Details & Actions 70

71 71

72 Tooltip with Hover 72

73 LOCATION Positioning Filtering 73

74 Location as Input 74

75 Location as Input 75

76 Location as Input 76

77 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 m (based on density) Almost instant (server connect & lookup) Negligible Single Cell Tower m (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 78

79 AND MORE Orientation Audio & Video The List Goes On 79

80 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

81 Multiple Orientations 81

82 Standard Orientation 82

83 Pivot Orientation 83

84 Orientation Detection in Firefox 3.6 Source: 84

85 Tilt Scrolling in Instapaper 85

86 Voice as Input 86

87 87

88 Location & Orientation as Input 88

89 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

90 Awkward Interactions SCAN TO CHECKOUT Flickr photo by Nokia Point & Find 90

91 Images as Input 91

92 SnapTell on iphone 92

93 Images as Input 93

94 Images as Input 94

95 Images as Input 95

96 Nerd. Found. Flickr photo by Nokia Point & Find 96

97 97

98 Location Check-in 98

99 Facebook Presence 99

100 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: Gyroscope: input from 360 degrees a microphone; of motion output to speaker Video Dual cameras: & image: capture/input front & back facing 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

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

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

103 More Web Form Design books/webforms/ Discount code: (25%) 103