Luke Wroblewski: Mobile First

3,237 views
3,098 views

Published on

Presentation of Luke Wroblewski at WebExpo Prague 2011 Conference. More at http://webexpo.net/prague2011/talk/mobile-first/

1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total views
3,237
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Luke Wroblewski: Mobile First

  1. 1. MOBILEFIRSTLUKE WROBLEWSKIAN EVENT APART 2010 @LUKEW 1
  2. 2. Web products should be designed for mobile first.(Even if no mobile version is planned.)Flickr photo by @kevinv033 2
  3. 3. Mobile First at GoogleGoogle programmers are doing workon mobile applications first, becausethey are better apps and thats whattop programmers want to develop.–Eric Schmidt, Google CEO 3
  4. 4. Mobile First at Facebook Were just now starting to think about mobile first and desktop second for a lot of our products.” -Kate Aronowitz, Design Director FacebookFlickr photo by gscottolson 4
  5. 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 AdobeFlickr photo by jdlasica 5
  6. 6. MOBILE FIRST1.  GROWTH = OPPORTUNITY2.  CONSTRAINTS = FOCUS3.  CAPABILITIES = INNOVATION 6
  7. 7. Mobile Design Considerations•  Multiple screen sizes & densities•  Performance optimization•  Touch targets, gestures, and actions•  Location systems•  Device capabilities 7
  8. 8. MOBILE FIRST1.  GROWTH = OPPORTUNITY2.  CONSTRAINTS = FOCUS3.  CAPABILITIES = INNOVATION 8
  9. 9. GROWTH = OPPORTUNITYMobile Web growth has outpaced desktop Web growth 8xSmartphone sales will pass PC sales in 2012 PC Desktop Internet Mobile Consumer 100M+ 1B+ 10B+1990 2000 2010 2020Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 9Source: ITU, Mark Lipacis, Morgan Stanley Research.
  10. 10. 10
  11. 11. 2006High-end RAZR-inspiredphone with class 12 EDGEhigh-speed data & WAP2.0/xHTML Web browser.2G network GSM 850 / 900 / 1800 / 1900SMS, EMS, MMS, Email, Instant Messaging2 megapixel cameraMusic playerResolution: 176 x 220 pixelsColors: 262,144 (18-bit) 11
  12. 12. 12
  13. 13. 4,932% IncreaseAT&T mobile data traffic increased 50x in 3 years Motorola Z3 iPhone iPhone 3G iPhone 3GS2006 2007 2008 2009 13Source: AT&T, Morgan Stanley Research.
  14. 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: http://officialblog.yelp.com/2010/06/yelp-mobile 14
  15. 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. 16. “My goal was initially just to make a mobile companion, but Ibecame convinced it was possible to create a version of Facebookthat was actually better than the website.”–Joe Hewitt 16
  17. 17. MOBILE FIRST1.  GROWTH = OPPORTUNITY2.  CONSTRAINTS = FOCUS3.  CAPABILITIES = INNOVATION 17
  18. 18. SCREEN SIZE•  Focus on core actions•  Know your users•  Use scalable design 18
  19. 19. Screen Size 1024x768 320x480 19
  20. 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. 21
  22. 22. Southwest Airlines Mobile App 22
  23. 23. 23
  24. 24. Screen Size 24
  25. 25. Screen Size 25
  26. 26. Know your audienceFlickr photo by wertheim 26
  27. 27. Expedia Itinerary 27
  28. 28. Expedia Itinerary 28
  29. 29. Designing For Multiple Screen Sizes 320x480 29
  30. 30. Smartphone Screen SizesiPhone 320x480 3.5 in 164ppiPalm Pre 320x480 3.1 in 186ppiPalm Pixie 320x400 2.63 in 194ppiT-Mobile G1 320x480 3.2 in 180ppiMyTouch 3GHTC HeroMotorola Droid 480x854 3.7 in 264ppiNexus One 480x800 3.7 in 252ppiHTC DesireNokia N97 360x640 3.2 in 229ppiNokia N900 800x480 3.5 in 266ppiiPhone4 640x960 3.5 in 329ppi 30
  31. 31. The Impact of PPISource: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes 31
  32. 32. The Impact of PPICinema Display 1920x1200 24 in 94ppiNokia N900 800x480 3.5 in 266ppi 32
  33. 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+ 33Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  34. 34. Designing for Multiple Screen Sizes 1.  Define device groups 2.  Create a default reference design 34Source: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  35. 35. Designing for Multiple Screen Sizes 1.  Define device groups 2.  Create a default reference design 3.  Define rules for content and design adaptationSource: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes 35http://www.littlespringsdesign.com/blog/blog/2009/03/11/photoshop-layout-is-not-your-friend/
  36. 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 layoutSource: http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes 36http://www.alistapart.com/articles/switchymclayout/
  37. 37. Visible App Controls 37
  38. 38. Hardware Control for Menu 38
  39. 39. Make Content the ActionYou should not view the large iPad screen as an invitation to bringback all the functionality you pruned from your your iPhoneapplication. –iPad Interface Guidelines 39
  40. 40. 40
  41. 41. SPEED•  Keep performance top of mind•  Take advantage of HTML5 41
  42. 42. Connection Speed 42
  43. 43. Performance TipsReduce Requests & File Size•  Eliminate redirects•  Use CSS sprites to serve multiple images•  Consolidate CSS & Javascript into a single file•  Minify your codeTake 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. 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 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 44
  45. 45. CONTEXT•  Quick bursts… everywhere•  One-handed 45
  46. 46. During a typical day…84% at home80% during misc. times throughout the day74% waiting in lines64% at work 46 Flickr photo by Laughing Squid
  47. 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 2010. •  Access to Twitter via mobile browser experienced a 347% jump to 4.7 million users in January 2010. 47
  48. 48. People Don’t Stay Long•  Across 650,000 URLs tested…10%9% •  25% of all documents8% were displayed for less than 4 seconds7%6% •  52% of all visits were5% shorter than 10 seconds4%3% •  Peak value was2% located between 2 and 3 seconds1%0% 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 SECONDS DISPLAYEDSource: Clickstream Study Reveals Dynamic Web, Weboptimization.com 48
  49. 49. Where phones usedOne-handed touchFlickr photo by Steve Rhodes 49
  50. 50. MOBILE FIRST1.  GROWTH = OPPORTUNITY2.  CONSTRAINTS = FOCUS3.  CAPABILITIES = INNOVATION 50
  51. 51. TOUCH•  Simplify your user interface•  Don’t count on hovers 51
  52. 52. Nokia smartphone mix Keypad Qwerty Only Touch INCLUDES QWERTY + TOUCH1.1 billion consumers with Nokia devices in 2009 2008 2009 2010 PROJECTED 52Source: Nokia –deices sold. Nokia Capital markets day 2009.
  53. 53. Touch Targets Apple recommends a minimum target size: 29px wide 44px tall Source: Matt Legend Gemmell – mattgemmell.com 53
  54. 54. Touch TargetsRecommended touchtarget size is 9mm/34pxMinimum touch targetsize is 7mm/26pxMinimum spacingbetween elements is2mm/8pxVisual size is 60-100% ofthe touch target size 54
  55. 55. 55
  56. 56. Basic Touch GesturesTouch 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 56
  57. 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. 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. 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. 60. 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 60
  61. 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. 62. System-related ActionsImages: Dan Willis Research: Craig Villamor & LukeW 62
  63. 63. Object-related ActionsImages: Dan Willis Research: Craig Villamor & LukeW 63
  64. 64. Navigation-related Actions www.lukew.com/touchImages: Dan Willis Research: Craig Villamor & LukeW 64
  65. 65. Gestures as Input 65
  66. 66. Pop-Up Menus on iPhone 66
  67. 67. Pop-Up Menus on Android 67
  68. 68. Multi-Field Pop-Up Menus on iPhone 68
  69. 69. Multi-Field Pop-Up Menus on Android 69
  70. 70. Hover Details & Actions 70
  71. 71. 71
  72. 72. Tooltip with Hover 72
  73. 73. LOCATION•  Positioning•  Filtering 73
  74. 74. Location as Input 74
  75. 75. Location as Input 75
  76. 76. Location as Input 76
  77. 77. 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 triangulationLaptops/desktops: WiFi, IP, rarely GPS 77
  78. 78. 78
  79. 79. AND MORE…•  Orientation•  Audio & Video•  The List Goes On… 79
  80. 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. 81. Multiple Orientations 81
  82. 82. Standard Orientation 82
  83. 83. Pivot Orientation 83
  84. 84. Orientation Detection in Firefox 3.6Source: http://hacks.mozilla.org/2009/10/orientation-for-firefox/ 84
  85. 85. Tilt Scrolling in Instapaper 85
  86. 86. Voice as Input 86
  87. 87. 87
  88. 88. Location & Orientation as Input 88
  89. 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. 90. Awkward Interactions SCAN TO CHECKOUT 90Flickr photo by Nokia Point & Find
  91. 91. Images as Input 91
  92. 92. SnapTell on iPhone 92
  93. 93. Images as Input 93
  94. 94. Images as Input 94
  95. 95. Images as Input 95
  96. 96. Nerd. Found. 96Flickr photo by Nokia Point & Find
  97. 97. 97
  98. 98. Location Check-in 98
  99. 99. Facebook Presence 99
  100. 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: input from degrees of motion to speaker Gyroscope: 360 a microphone; output • •  Videocameras: capture/input facing camera Dual & image: front & back from a•  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. 101. MOBILE FIRST1.  GROWTH = OPPORTUNITY2.  CONSTRAINTS = FOCUS3.  CAPABILITIES = INNOVATION 101
  102. 102. Mobile Design Considerations•  Multiple screen sizes & densities•  Performance optimization•  Touch targets, gestures, and actions•  Location systems•  Device capabilities 102
  103. 103. More Information•  @lukew•  www.lukew.comWeb Form Design•  www.rosenfeldmedia.com/ books/webforms/•  Discount code: (25%) 103

×