Mobile first. Luke Wroblewski
53 likes72,908 views
The document emphasizes the necessity of designing web products with a 'mobile first' approach due to the significant growth in mobile web usage compared to desktop. It highlights how this paradigm shift creates new opportunities for innovation while imposing design constraints that encourage focus and efficiency. Key statistics and quotes from industry leaders reinforce the importance and impact of prioritizing mobile experiences in product development.
Mobile first. Luke Wroblewski
- 1. MOBILE FIRST LUKE WROBLEWSKI OCTOBER 2011 @LUKEW 1
- 2. Web products should be designed for mobile first. Flickr photo by @kevinv033 2
- 3. 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 Chairman 3
- 4. 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. 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. “Designing the mobile app first forced us to strip down to essentials.” -Bill DeRouchey, BankSimple Flickr photo by by WebVisions Event 6
- 7. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 7
- 8. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 8
- 9. GROWTH = OPPORTUNITY Mobile Web growth has outpaced desktop Web growth 8x Global mobile data traffic should grow 26x over next 5 years 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 Source: 9 ITU, Mark Lipacis, Morgan Stanley Research.
- 10. Commerce • Amazon: over $1 billion spent via mobile devices in the past 12 months • eBay: global mobile sales ~$4 billion in 2011, $2B in 2010, $600M in 2009 • Best Buy: mobile Web users doubling every year: 30M (10), 17M (09), 6M (08) Social • Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile • Instagram: iPhone only 3 months to hit 1M users. Six weeks to 2M • Mixi (Japan): 85% of page views on mobile vs. 14% 4.5 years ago Productivity & Media • Google: mobile searches grew 130% in Q3 2010 • Pandora: 50% of total user base subscribes to the service on mobile • Email: 70% of smartphone users have accessed email on mobile device Source: http://www.lukew.com/ff/entry.asp?1188 10
- 11. PC vs. Smartphone Shipments Smartphones passed PC shipments in Q42010 700 Global Shipments in MM SMARTPHONES 600 500 PCS 400 Q42010 2012E 300 200 100 0 2005 2006 2007 2008 2009 2010E 2011E 2012E 2013E Source: http://bit.ly/gIqKm9 11 Source: http://bit.ly/g5ktGq
- 12. Shift in Usage 40 35 30 25 -20% Home usage of PC since 2008 20 15 10 5 0 2006 2008 2010 Why? Smartphones & tablets Source: http://read.bi/efrmCj 12
- 13. Shift in Usage Visitors to Web- Visitors accessing -7% based email sites declined +36% email on mobile devices increased Source: http://bit.ly/hJdtty 13
- 14. 35% of searches come from 7% of users • 35% of all Yelp searches come from their mobile applications which had 3.2 million unique users in Feb 2011 • That month Yelp had 45 million monthly unique users around the world Source: http://bit.ly/hw0Xtb 14
- 15. Additional Usage • Every other second a consumer calls a local business and generates driving directions from a Yelp mobile app. • Viewing active listings 45% more often from mobile devices (audience is primarily active buyers, on location or scoping out neighborhoods) • People that use Facebook on their mobile devices (350M active) are twice as active on Facebook than non- mobile users. Source: http://www.lukew.com/ff/entry.asp?1131 Source: http://www.lukew.com/ff/entry.asp?1178 15
- 16. SMARTPHONES Don’t most people just use native mobile applications to access the Internet? 16
- 17. Twitter Usage 347% INCREASE IN MOBILE BROWSER USERS (4.7M) JAN 2010 TWITTER.COM •78% of tweets sent via mobile 40% • 16% M.TWITTER.COM of new users start on mobile 14% • What are the top two Twitter SMS mobile clients? 8% TWITTER ON IPHONE 8% TWITTER ON BLACKBERRY 7% 17
- 18. 18
- 19. Facebook Usage 112% INCREASE IN MOBILE BROWSER USERS (251M) JAN 2010 NON MOBILE 67% • 33% of posts sent via mobile M.FACEBOOK.COM 18% • What are the top two Facebook mobile clients? ANDROID 4% IPHONE 4% BLACKBERRY 4% 19
- 20. 20
- 21. 21
- 22. Mobile Web Usage • Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013 • 600% growth in traffic to mobile websites in 2010 • Avg smartphone user visits up to 24 Web sites visits per day • Top 50 websites constitute only 40% of all mobile visits • Opera Mini traffic up 200% yr/yr Source: http://www.mobiadnews.com/?p=5133 Source: http://www.lukew.com/ff/entry.asp?1013 22
- 23. MOBILE ONLY? UK: 22% BY 2015 NEVER/INFREQUENT DESKTOP USE Asia: 50+% DON’T USE INTERNET ON PC US: 25% US: 50+% NEVER/INFREQUENT MORE MOBILE THAN PC DESKTOP USE India: 49% NEVER/INFREQUENT DESKTOP USE Africa: 50+% DON’T USE INTERNET ON PC Source: http://www.lukew.com/ff/entry.asp?1391 23
- 24. “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 24
- 25. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 25
- 26. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 26
- 27. 1024x768 320x480 27
- 28. 28
- 29. 29
- 30. 30
- 31. 31
- 32. 32
- 33. Know your audience 33
- 34. 34
- 35. 35
- 36. 36
- 37. 37
- 38. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 38
- 39. 39
- 40. Reduce Requests & File Size • Eliminate redirects • Use CSS sprites to serve multiple images • Consolidate CSS & Javascript into a single file • Reduce dependencies on heavy Javascript libraries • Minify your code Take Advantage of HTML5, etc. • Use proper http headers for caching • 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 40
- 41. 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 41
- 42. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 42
- 43. Big Screen Power Supply Consistent Network Keyboard Mouse Chair Desk 43
- 44. Small Screen Battery INTENSELY PERSONAL Network Inconsistent Fingers Sensors 44
- 45. WHERE ARE WE MOBILE? 84% at home 80% during misc. times 74% waiting in lines 64% at work Photo by Steve Rhodes 45
- 46. ONE EYEBALL Partial attention requires focused design ONE THUMB PHOTO BY STEVE RHODES
- 47. When are we mobile? Computer users 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 47
- 48. When are we mobile? iPhone users ANYTIME 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 48
- 49. When are we mobile? iPad users 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 49
- 50. When are we mobile? Linkedin Overall users 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 50
- 51. When are we mobile? Linkedin Mobile users 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 Source: http://bit.ly/hGrQMy 51
- 52. When are we mobile? Mobile 3G Traffic Patterns Laptop Tablet Smartphone 9 12 15 18 21 24 Source: http://bit.ly/qL5NdX 52
- 53. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 53
- 54. “I was looking at the right side of the Venn diagram I thought, ‘That looks like a lot of the current and planned content for our mobile site.’ I think the only thing we don’t have are the admissions application.” Source: XKCD http://xkcd.com/773/ & http://www.dmolsen.com/mobile-in-higher-ed/?p=197 54
- 55. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 55
- 56. Landscape Mode 56
- 57. Landscape Mode 57
- 58. Safari Gyroscope Access Source: http://bit.ly/gAXCeL 58
- 59. TOUCH • 1.03M touchscreen phones sold per day (2009) • 88K iPads sold per day (2011) • 194K iPhones sold per day (2011) • 500K Android devices activated per day (2011) • What about RIM & Nokia? 59
- 60. Indirect Manipulation TRACKBALL TRACKPAD KEYBOARD KEYPAD 60
- 61. Direct Manipulation TRACKPAD 61
- 62. Nokia smartphone mix Keypad Qwerty Only Touch INCLUDES QWERTY + TOUCH 2008 2009 2010 PROJECTED 62 Source: Nokia –deices sold. Nokia Capital markets day 2009.
- 63. 63
- 64. Touch Target Sizes 44px/pt 44px/pt 64
- 65. 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 65
- 66. Touch Targets 44px Bigger then you’re comfortable with 44px 30px 66
- 67. 67
- 68. 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 68
- 69. Tap Briefly touch surface with fingertip. Double Tap Rapidly touch surface twice with fingertip. Images: Dan Willis Research: Craig Villamor & LukeW 69
- 70. Drag Move fingertip over surface without losing contact. Flick Quickly brush surface with fingertip. Images: Dan Willis Research: Craig Villamor & LukeW 70
- 71. 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 71
- 72. Press Press & Tap Touch surface for extended period of Press surface with one finger and briefly time. 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 72
- 73. Rotate Touch surface with two fingers and move them in a clockwise or counterclockwise direction. Images: Dan Willis Research: Craig Villamor & LukeW 73
- 74. Images: Dan Willis Research: Craig Villamor & LukeW 74
- 75. Images: Dan Willis Research: Craig Villamor & LukeW 75
- 76. Images: Dan Willis Research: Craig Villamor & LukeW 76
- 78. Drag to Reveal 78
- 79. 79
- 80. Drag to Refresh 80
- 81. Drag to Reveal 81
- 82. Drag to Reveal • Feature overview 82
- 83. 83
- 84. Natural User Interfaces (NUI) “NUI exploits skills that we have acquired through a lifetime of living in the World” –Bill Buxton • Content is the UI (the action) • Reduce the distance as much as possible between user & content • Enable direct manipulation of objects & content • Guessable, predictable, physical, realistic • Reduce Visuals that are Not Content Source: http://www.lukew.com/ff/entry.asp?770 84
- 85. Location Detection 85
- 86. 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 (server No additional density) connect & lookup) effect Cell tower 100-1400m (based on Almost instant (server Negligible triangulation density) connect & lookup) Single Cell 500-2500m (based on Almost instant (server Negligible Tower density) connect & lookup) IP Country: 99% Almost instant (server Negligible connect & lookup) City: 46% US, 53% Intl ZIP: 0% Smartphones: hybrid of GPS, Wifi, and cell tower triangulation Laptops/desktops: WiFi, IP, rarely GPS 86
- 87. Location Detection 87
- 88. Mobile Device Capabilities • Device positioning & motion: from an accelerometer • Gyroscope: 360 degrees of motion • Location detection • Multi-touch sensors • Orientation: direction from a digital compass • Video & image: capture/input from a camera • Dual cameras: front and back • Audio: input from a microphone; output to speaker • Device connections: through Bluetooth between devices • Proximity: device closeness to physical objects • Ambient Light: light/dark environment awareness • NFC: Near Field Communications through RFID readers 88
- 89. Direction Location Detection Detection 89
- 90. 320x480 90
- 91. 320x480 91
- 92. 320x480 92
- 93. 93
- 95. 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 95
- 96. Native App Mobile Web • Location detection • Location detection • Device orientation • Device orientation • Digital compass • Digital compass • Video camera access 96
- 97. Android 3.0 (ish) HTML Media Capture Allows web applications to access audio, image and video capture capabilities of the device. 97
- 98. Awkward Interactions SCAN TO CHECKOUT 98 Flickr photo by Nokia Point & Find
- 99. 99
- 100. 100
- 101. 101
- 102. 102
- 103. Images as Input 103
- 104. Images as Input & Output 104
- 105. Images as Input 105
- 106. Images as Input 106
- 107. Nerd. Found. 107 Flickr photo by Nokia Point & Find
- 108. 108
- 109. 109
- 110. Mobile Device Capabilities • Device positioning & motion: from an accelerometer • Gyroscope: 360 degrees of motion • Location detection • Multi-touch sensors • Orientation: direction from a digital compass • Video & image: capture/input from a camera • Dual cameras: front and back • Audio: input from a microphone; output to speaker • Device connections: through Bluetooth between devices • Proximity: device closeness to physical objects • Ambient Light: light/dark environment awareness • NFC: Near Field Communications through RFID readers 110
- 111. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 111
- 112. MOBILE FIRST • @lukew • www.lukew.com Mobile First! • abookapart.com