0
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011                  1
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011                  2
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011                  3
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011                  4
MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011                  5
@LUKEW         6
Web products should be designed for mobile first.Flickr photo by @kevinv033                           7
Google programmers are doing workon mobile applications first, becausethey are better apps and thats whattop programmers w...
Were just now starting to think about mobile first and desktopsecond for a lot of our products.”-Kate Aronowitz, Design Di...
We really need to shift now to start thinking about building mobilefirst. This is an even bigger shift than the PC revolut...
MOBILE FIRST1. GROWTH       = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION                            11
MOBILE FIRST1. GROWTH       = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION                            12
GROWTH = OPPORTUNITYMobile Web growth has outpaced desktop Web growth 8xGlobal mobile data traffic should grow 26x over ne...
Commerce• Amazon: over $1 billion spent via mobile devices in the past 12 months• eBay: global mobile sales $2 billion in ...
PC vs. Smartphone Shipments                                                Smartphones passed PC shipments in Q42010      ...
Shift in Usage                                        40                                        35                        ...
Shift in Usage      Visitors to Web-                       Visitors accessing-7%   based email sites      declined        ...
35% of searches come from 7% of users               • 35% of all Yelp searches come from                 their mobile appl...
Additional Usage              • Every other second a consumer calls a                local business and generates driving ...
SMARTPHONESDon’t most people just usenative mobile applicationsto access the Internet?                             20
Twitter Usage            347% INCREASE    IN MOBILE BROWSER USERS (4.7M) JAN 2010                     TWITTER.COM         ...
Mobile Web Usage         • Mobile phones will overtake PCs as the           most common Web access devices           world...
“My goal was initially just to make a mobile companion, but I becameconvinced it was possible to create a version of Faceb...
MOBILE FIRST1. GROWTH       = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION                            24
CONSTRAINTS• Size of Screen• Speed of Networks• Modes of Use                      25
1024x768   320x480                 26
In iPhone apps, the main functionshould be immediately apparent.Minimize the number of controlsfrom which users have to ch...
28
29
30
31
32
Know your audience                     33
34
35
36
37
CONSTRAINTS• Size of Screen• Speed of Networks• Modes of Use                      38
39
Reduce Requests & File Size•   Eliminate redirects•   Use CSS sprites to serve multiple images•   Consolidate CSS & Javasc...
100ms delay results in 1% sales loss.                                       (potential $191M in lost revenue in 2008)     ...
CONSTRAINTS• Size of Screen• Speed of Networks• Modes of Use                      42
Big Screen             Power Supply             Consistent Network             Keyboard             Mouse             Chai...
Small Screen               BatteryINTENSELY PERSONAL Network              Inconsistent               Fingers              ...
EVERYWHERE & MOBILE?WHERE ARE WE ANYWHERE84% at home80% during misc. times74% waiting in lines64% at work                 ...
46
ONE EYEBALLPartial attention requires focused design                                        ONE THUMB                     ...
When are we mobile?                                                                                      Computer users1  ...
When are we mobile?                                                                                          iPhone users ...
When are we mobile?                                                                                              iPad user...
When are we mobile?                                                                              Linkedin Overall users1  ...
When are we mobile?                                                                              Linkedin Mobile users1   ...
CONSTRAINTS• Size of Screen• Speed of Networks• Modes of Use                      53
“I was looking at the right side of the Venn diagram I thought, ‘That lookslike a lot of the current and planned content f...
MOBILE FIRST1. GROWTH       = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION                            55
Landscape Mode                 56
Landscape Mode                 57
58
59
Source: http://vimeo.com/1540283   60
Safari Gyroscope Access      Source: http://bit.ly/gAXCeL   61
LocationDetection            62
Location Systems                      Accuracy                        Positioning Time         Battery Life GPS           ...
LocationDetection            64
TOUCH•   1.03M touchscreen phones sold per day (2009)•   88K iPads sold per day (2011)•   194K iPhones sold per day (2011)...
Indirect ManipulationTRACKBALL                           TRACKPADKEYBOARD                            KEYPAD               ...
Direct ManipulationTRACKPAD                                 67
Nokia smartphone mix     Keypad     Qwerty Only     Touch         INCLUDES QWERTY + TOUCH          2008                   ...
www.lukew.com/touchImages: Dan Willis Research: Craig Villamor & LukeW   69
Touch Gesture Cards                  70
Drag to Reveal                 71
72
Drag to Refresh                  73
Drag to Reveal                 74
Drag to Reveal• Feature overview                     75
76
Natural User Interfaces (NUI) “NUI exploits skills that we have acquired through a lifetime of living in the World” –Bill ...
Challenging Ourselves                        78
Mobile Device Capabilities•   Device positioning & motion: from an accelerometer•   Gyroscope: 360 degrees of motion•   Lo...
Direction   LocationDetection   Detection                        80
320x480          81
82
83Source: AcrossAir
When discovered by usersboosted their sustained trafficby 40 to 50 percent.“It was sort of beyond ourexpectations. We had ...
Native App              Mobile Web• Location detection    • Location detection• Device orientation    • Device orientation...
Android 3.0 (ish)                    HTML Media Capture                    Allows web applications to                    a...
Awkward Interactions    SCAN TO CHECKOUT                                     87Flickr photo by Nokia Point & Find
88
89
90
91
Images as Input                  92
Images as Input & Output                           93
94
Nerd.                                     Found.                                              95Flickr photo by Nokia Poin...
96
97
98
Mobile Device Capabilities•   Device positioning & motion: from an accelerometer•   Gyroscope: 360 degrees of motion•   Lo...
MOBILE FIRST1. GROWTH       = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION                            100
MOBILE FIRST• @lukew• www.lukew.comMobile First!• October 18th• abookapart.com
Upcoming SlideShare
Loading in...5
×

Mobile first luke wroblewski

844

Published on

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
844
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile first luke wroblewski"

  1. 1. MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011 1
  2. 2. MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011 2
  3. 3. MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011 3
  4. 4. MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011 4
  5. 5. MOBILEFIRSTLUKE WROBLEWSKIWARSZAWA 2011 5
  6. 6. @LUKEW 6
  7. 7. Web products should be designed for mobile first.Flickr photo by @kevinv033 7
  8. 8. Google programmers are doing workon mobile applications first, becausethey are better apps and thats whattop programmers want to develop.–Eric Schmidt, Google CEO 8
  9. 9. Were just now starting to think about mobile first and desktopsecond for a lot of our products.”-Kate Aronowitz, Design Director FacebookFlickr photo by gscottolson 9
  10. 10. We really need to shift now to start thinking about building mobilefirst. This is an even bigger shift than the PC revolution.”-Kevin Lynch, CTO AdobeFlickr photo by jdlasica 10
  11. 11. MOBILE FIRST1. GROWTH = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION 11
  12. 12. MOBILE FIRST1. GROWTH = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION 12
  13. 13. GROWTH = OPPORTUNITYMobile Web growth has outpaced desktop Web growth 8xGlobal 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: 13 ITU, Mark Lipacis, Morgan Stanley Research.
  14. 14. Commerce• Amazon: over $1 billion spent via mobile devices in the past 12 months• eBay: global mobile sales $2 billion in 2010, $600 million 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 agoProductivity & 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 14
  15. 15. PC vs. Smartphone Shipments Smartphones passed PC shipments in Q42010 700Global 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 15 Source: http://bit.ly/g5ktGq
  16. 16. 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 16
  17. 17. Shift in Usage Visitors to Web- Visitors accessing-7% based email sites declined +36% email on mobile devices increased Source: http://bit.ly/hJdtty 17
  18. 18. 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 18
  19. 19. 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 (250M 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 19
  20. 20. SMARTPHONESDon’t most people just usenative mobile applicationsto access the Internet? 20
  21. 21. 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% 21
  22. 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. 23. “My goal was initially just to make a mobile companion, but I becameconvinced it was possible to create a version of Facebook that wasactually better than the website.”–Joe Hewitt 23
  24. 24. MOBILE FIRST1. GROWTH = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION 24
  25. 25. CONSTRAINTS• Size of Screen• Speed of Networks• Modes of Use 25
  26. 26. 1024x768 320x480 26
  27. 27. In iPhone apps, the main functionshould be immediately apparent.Minimize the number of controlsfrom which users have to choose.–iPhone Interface Guidelines 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 32. 32
  33. 33. Know your audience 33
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. 37
  38. 38. CONSTRAINTS• Size of Screen• Speed of Networks• Modes of Use 38
  39. 39. 39
  40. 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 codeTake 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. 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. 42. CONSTRAINTS• Size of Screen• Speed of Networks• Modes of Use 42
  43. 43. Big Screen Power Supply Consistent Network Keyboard Mouse ChairCoffee Mug Desk 43
  44. 44. Small Screen BatteryINTENSELY PERSONAL Network Inconsistent Fingers Sensors 44
  45. 45. EVERYWHERE & MOBILE?WHERE ARE WE ANYWHERE84% at home80% during misc. times74% waiting in lines64% at work Photo by Steve Rhodes 45
  46. 46. 46
  47. 47. ONE EYEBALLPartial attention requires focused design ONE THUMB PHOTO BY STEVE RHODES
  48. 48. When are we mobile? Computer users1 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. 49. When are we mobile? iPhone users ANYTIME1 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. 50. When are we mobile? iPad users1 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. 51. When are we mobile? Linkedin Overall users1 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. 52. When are we mobile? Linkedin Mobile users1 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 52
  53. 53. CONSTRAINTS• Size of Screen• Speed of Networks• Modes of Use 53
  54. 54. “I was looking at the right side of the Venn diagram I thought, ‘That lookslike a lot of the current and planned content for our mobile site.’ I think theonly 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. 55. MOBILE FIRST1. GROWTH = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION 55
  56. 56. Landscape Mode 56
  57. 57. Landscape Mode 57
  58. 58. 58
  59. 59. 59
  60. 60. Source: http://vimeo.com/1540283 60
  61. 61. Safari Gyroscope Access Source: http://bit.ly/gAXCeL 61
  62. 62. LocationDetection 62
  63. 63. 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 triangulationLaptops/desktops: WiFi, IP, rarely GPS 63
  64. 64. LocationDetection 64
  65. 65. 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? 65
  66. 66. Indirect ManipulationTRACKBALL TRACKPADKEYBOARD KEYPAD 66
  67. 67. Direct ManipulationTRACKPAD 67
  68. 68. Nokia smartphone mix Keypad Qwerty Only Touch INCLUDES QWERTY + TOUCH 2008 2009 2010 PROJECTED 68Source: Nokia –deices sold. Nokia Capital markets day 2009.
  69. 69. www.lukew.com/touchImages: Dan Willis Research: Craig Villamor & LukeW 69
  70. 70. Touch Gesture Cards 70
  71. 71. Drag to Reveal 71
  72. 72. 72
  73. 73. Drag to Refresh 73
  74. 74. Drag to Reveal 74
  75. 75. Drag to Reveal• Feature overview 75
  76. 76. 76
  77. 77. 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 77
  78. 78. Challenging Ourselves 78
  79. 79. 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 79
  80. 80. Direction LocationDetection Detection 80
  81. 81. 320x480 81
  82. 82. 82
  83. 83. 83Source: AcrossAir
  84. 84. When discovered by usersboosted their sustained trafficby 40 to 50 percent.“It was sort of beyond ourexpectations. We had no idea.”Yelp CEO,Jeremy Stoppelman 84
  85. 85. Native App Mobile Web• Location detection • Location detection• Device orientation • Device orientation• Digital compass• Video camera access 85
  86. 86. Android 3.0 (ish) HTML Media Capture Allows web applications to access audio, image and video capture capabilities of the device. Device Orientation Event Allows web applications to listen to DOM events that provide information about the physical orientation and motion of the device. 86
  87. 87. Awkward Interactions SCAN TO CHECKOUT 87Flickr photo by Nokia Point & Find
  88. 88. 88
  89. 89. 89
  90. 90. 90
  91. 91. 91
  92. 92. Images as Input 92
  93. 93. Images as Input & Output 93
  94. 94. 94
  95. 95. Nerd. Found. 95Flickr photo by Nokia Point & Find
  96. 96. 96
  97. 97. 97
  98. 98. 98
  99. 99. 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 99
  100. 100. MOBILE FIRST1. GROWTH = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION 100
  101. 101. MOBILE FIRST• @lukew• www.lukew.comMobile First!• October 18th• abookapart.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×