MOBILE
FIRST
LUKE WROBLEWSKI
WARSZAWA 2011




                  1
MOBILE
FIRST
LUKE WROBLEWSKI
WARSZAWA 2011




                  2
MOBILE
FIRST
LUKE WROBLEWSKI
WARSZAWA 2011




                  3
MOBILE
FIRST
LUKE WROBLEWSKI
WARSZAWA 2011




                  4
MOBILE
FIRST
LUKE WROBLEWSKI
WARSZAWA 2011




                  5
@LUKEW




         6
Web products should be designed for mobile first.

Flickr photo by @kevinv033                           7
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




                                        8
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                                       9
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                                          10
MOBILE FIRST
1. GROWTH       = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION


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


                            12
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:
                                                                                                                               13
 ITU, Mark Lipacis, Morgan Stanley Research.
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 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                 14
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
                                                                                                                    15
                                      Source: http://bit.ly/g5ktGq
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
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
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
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
SMARTPHONES
Don’t most people just use
native mobile applications
to access the Internet?




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

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


                            24
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use




                      25
1024x768   320x480




                 26
In iPhone apps, the main function
should be immediately apparent.
Minimize the number of controls
from which users have to choose.
–iPhone Interface Guidelines




                                27
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 & 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
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
CONSTRAINTS
• Size of Screen
• Speed of Networks
• Modes of Use




                      42
Big Screen


             Power Supply


             Consistent Network


             Keyboard


             Mouse


             Chair

Coffee Mug
             Desk



                                  43
Small Screen



               Battery



INTENSELY PERSONAL Network
              Inconsistent



               Fingers




               Sensors


                              44
EVERYWHERE & MOBILE?
WHERE ARE WE ANYWHERE

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
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                                                            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                                                           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                                                           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                                                            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                                                            52
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 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
MOBILE FIRST
1. GROWTH       = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. 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
Location
Detection




            62
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
                                                                                               63
Location
Detection




            64
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
Indirect Manipulation




TRACKBALL                           TRACKPAD
KEYBOARD                            KEYPAD




                                             66
Direct Manipulation




TRACKPAD




                                 67
Nokia smartphone mix
     Keypad
     Qwerty Only
     Touch         INCLUDES QWERTY + TOUCH




          2008                                                2009   2010
                                                                     PROJECTED


                                                                                 68
Source: Nokia –deices sold. Nokia Capital markets day 2009.
www.lukew.com/touch




Images: 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 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
Challenging Ourselves




                        78
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
Direction   Location
Detection   Detection




                        80
320x480




          81
82
83
Source: AcrossAir
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

                                  84
Native App              Mobile Web




• Location detection    • Location detection
• Device orientation    • Device orientation
• Digital compass
• Video camera access




                                               85
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
Awkward Interactions




    SCAN TO CHECKOUT

                                     87
Flickr photo by Nokia Point & Find
88
89
90
91
Images as Input




                  92
Images as Input & Output




                           93
94
Nerd.
                                     Found.




                                              95
Flickr photo by Nokia Point & Find
96
97
98
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
MOBILE FIRST
1. GROWTH       = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION


                            100
MOBILE FIRST

• @lukew
• www.lukew.com

Mobile First!
• October 18th
• abookapart.com

More Related Content

PPTX
Future of Web is Mobile by Dag Olav Norem
PDF
Mobile Web Vs Mobile Apps
PDF
Mobile future of newspapers
PDF
Mobile 101 For the Education Industry
PDF
BIC5 Ian morgan google uk Making the Web Work for You 2012
PDF
Marketers guide to ipad for business
PDF
Mobile input lukew
PDF
Executive's guide to the iPad for business
Future of Web is Mobile by Dag Olav Norem
Mobile Web Vs Mobile Apps
Mobile future of newspapers
Mobile 101 For the Education Industry
BIC5 Ian morgan google uk Making the Web Work for You 2012
Marketers guide to ipad for business
Mobile input lukew
Executive's guide to the iPad for business

What's hot (20)

PDF
Chinnovations on China's new media
PDF
Ad Mob Mobile Metrics Jan 10
PDF
Inc pres (dma bristol messaging) 24 jun11 v1.0
PDF
Inc pres (dma bristol apps) 24 jun11 v1.1
KEY
Designing For Mobile First
PPT
MobilityCMS
PDF
Native vs. Web vs. Hybrid: Mobile Development Choices
PDF
AdMob Mobile Metrics Report - January 2010
PPTX
Multiscreen mobile email design strategy silverpop
PPTX
Email Design for All Devices
PPTX
Mobile Contents
PPTX
Hot house istrategy_presentation_february_2012_original-1
PDF
Ten reasons why now is the perfect time to get serious about the mobile web
PPTX
The Mobile Market : Singapore's Outlook
PDF
Marketingcharts mobile-marketing-data-2011
PDF
Domain7: Mobile Web Market Analysis
PDF
Designing for the Modern Subscriber
PPT
Recycle for London "app" at NMA event
PDF
Main Crucial Trends in 2013
PPT
UK Mobile Market Overview #1, 2010
Chinnovations on China's new media
Ad Mob Mobile Metrics Jan 10
Inc pres (dma bristol messaging) 24 jun11 v1.0
Inc pres (dma bristol apps) 24 jun11 v1.1
Designing For Mobile First
MobilityCMS
Native vs. Web vs. Hybrid: Mobile Development Choices
AdMob Mobile Metrics Report - January 2010
Multiscreen mobile email design strategy silverpop
Email Design for All Devices
Mobile Contents
Hot house istrategy_presentation_february_2012_original-1
Ten reasons why now is the perfect time to get serious about the mobile web
The Mobile Market : Singapore's Outlook
Marketingcharts mobile-marketing-data-2011
Domain7: Mobile Web Market Analysis
Designing for the Modern Subscriber
Recycle for London "app" at NMA event
Main Crucial Trends in 2013
UK Mobile Market Overview #1, 2010
Ad

Similar to Mobile first luke wroblewski (20)

PDF
Mobile first. Luke Wroblewski
PDF
NEC Mobile meets the Cloud
PPTX
Mobile is NOT a Channel - Rob Griffin at IMMAP Summit, 2012
PDF
"Mobile" isn't mobile
KEY
Mobile Web Presentation
PDF
Future:apps&mobile - mobile landscape and development platforms
PDF
Rohith murthy -_bosro
PDF
Bruce / The Seminar: In the Pocket
PDF
Why you should get serious about the mobile web
PDF
A mobile view for BTO 2011 by Valentina Paruzzi
PDF
Mobile, Mobile, Mobile
PPT
Sws lecture13
PDF
CIM mobile marketing overview May 2012
PDF
Mobile strategies for the tourism industry
PPT
Integrity Mobile Trends 2012
PDF
Mobile Trends - June 2011 - Trending The Future
PPT
PDF
10 reasons why now is the perfect time to get serious about the mobile web
PPTX
Mobile 5.21.12
PDF
Mobile Web Design & Development 2012 Lecture
Mobile first. Luke Wroblewski
NEC Mobile meets the Cloud
Mobile is NOT a Channel - Rob Griffin at IMMAP Summit, 2012
"Mobile" isn't mobile
Mobile Web Presentation
Future:apps&mobile - mobile landscape and development platforms
Rohith murthy -_bosro
Bruce / The Seminar: In the Pocket
Why you should get serious about the mobile web
A mobile view for BTO 2011 by Valentina Paruzzi
Mobile, Mobile, Mobile
Sws lecture13
CIM mobile marketing overview May 2012
Mobile strategies for the tourism industry
Integrity Mobile Trends 2012
Mobile Trends - June 2011 - Trending The Future
10 reasons why now is the perfect time to get serious about the mobile web
Mobile 5.21.12
Mobile Web Design & Development 2012 Lecture
Ad

Recently uploaded (20)

PPTX
DAVtryruresytsayryeryyryurtuCPS -STEM.pptx
PDF
Design and Work Portfolio by Karishma Goradia
PDF
Jamil Islam, Diplpma in Electrical Engineer,CV.pdf
PPT
416170345656655446879265596558865588.ppt
PPTX
Re-Fruit_Business_Plan_Presentation.pptx
PPTX
CVS MODULE 2.pptxjjjjjjjjjjjjkkkkjjiiiiii
PDF
Humans do not die they live happily without
PDF
Designing Through Complexity - Four Perspectives.pdf
PPT
1 Introduction Product Design and Development
PPTX
Presentation at the moment design 3.pptx
PPTX
Anjali synopsis seminar (15) (1) (1).pptx
PDF
APPLICATION OF MATRIX PROFILE TECHNIQUES TO DETECT INSIGHTFUL DISCORDS IN CLI...
PDF
Humans do not die they live happily without
PDF
Control and coordination isdorjdmdndjke
PPTX
Applied Anthropology Report.pptx paulapuhin
PPTX
immunotherapy.pptx in pregnancy outcome f
PPT
Diabetes_vogt for undergraduate students
PPTX
Chapter7 design and Implementation.pptx
PPT
Adolescent Emergencies for undergraduate
PDF
Engineering drawing lecture no 2 building blocks
DAVtryruresytsayryeryyryurtuCPS -STEM.pptx
Design and Work Portfolio by Karishma Goradia
Jamil Islam, Diplpma in Electrical Engineer,CV.pdf
416170345656655446879265596558865588.ppt
Re-Fruit_Business_Plan_Presentation.pptx
CVS MODULE 2.pptxjjjjjjjjjjjjkkkkjjiiiiii
Humans do not die they live happily without
Designing Through Complexity - Four Perspectives.pdf
1 Introduction Product Design and Development
Presentation at the moment design 3.pptx
Anjali synopsis seminar (15) (1) (1).pptx
APPLICATION OF MATRIX PROFILE TECHNIQUES TO DETECT INSIGHTFUL DISCORDS IN CLI...
Humans do not die they live happily without
Control and coordination isdorjdmdndjke
Applied Anthropology Report.pptx paulapuhin
immunotherapy.pptx in pregnancy outcome f
Diabetes_vogt for undergraduate students
Chapter7 design and Implementation.pptx
Adolescent Emergencies for undergraduate
Engineering drawing lecture no 2 building blocks

Mobile first luke wroblewski

  • 6. @LUKEW 6
  • 7. Web products should be designed for mobile first. Flickr photo by @kevinv033 7
  • 8. 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 8
  • 9. 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 9
  • 10. 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 10
  • 11. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 11
  • 12. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 12
  • 13. 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: 13 ITU, Mark Lipacis, Morgan Stanley Research.
  • 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 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 14
  • 15. 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 15 Source: http://bit.ly/g5ktGq
  • 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. 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. 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. 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. SMARTPHONES Don’t most people just use native mobile applications to access the Internet? 20
  • 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. 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. “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 23
  • 24. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 24
  • 25. CONSTRAINTS • Size of Screen • Speed of Networks • Modes of Use 25
  • 26. 1024x768 320x480 26
  • 27. In iPhone apps, the main function should be immediately apparent. Minimize the number of controls from which users have to choose. –iPhone Interface Guidelines 27
  • 28. 28
  • 29. 29
  • 30. 30
  • 31. 31
  • 32. 32
  • 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 Coffee Mug Desk 43
  • 44. Small Screen Battery INTENSELY PERSONAL Network Inconsistent Fingers Sensors 44
  • 45. EVERYWHERE & MOBILE? WHERE ARE WE ANYWHERE 84% at home 80% during misc. times 74% waiting in lines 64% at work Photo by Steve Rhodes 45
  • 46. 46
  • 47. ONE EYEBALL Partial attention requires focused design ONE THUMB PHOTO BY STEVE RHODES
  • 48. 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 48
  • 49. 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 49
  • 50. 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 50
  • 51. 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 51
  • 52. 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 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
  • 58. 58
  • 59. 59
  • 61. Safari Gyroscope Access Source: http://bit.ly/gAXCeL 61
  • 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 triangulation Laptops/desktops: WiFi, IP, rarely GPS 63
  • 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. Indirect Manipulation TRACKBALL TRACKPAD KEYBOARD KEYPAD 66
  • 68. Nokia smartphone mix Keypad Qwerty Only Touch INCLUDES QWERTY + TOUCH 2008 2009 2010 PROJECTED 68 Source: Nokia –deices sold. Nokia Capital markets day 2009.
  • 69. www.lukew.com/touch Images: Dan Willis Research: Craig Villamor & LukeW 69
  • 72. 72
  • 75. Drag to Reveal • Feature overview 75
  • 76. 76
  • 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
  • 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. Direction Location Detection Detection 80
  • 81. 320x480 81
  • 82. 82
  • 84. 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 84
  • 85. Native App Mobile Web • Location detection • Location detection • Device orientation • Device orientation • Digital compass • Video camera access 85
  • 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. Awkward Interactions SCAN TO CHECKOUT 87 Flickr photo by Nokia Point & Find
  • 88. 88
  • 89. 89
  • 90. 90
  • 91. 91
  • 93. Images as Input & Output 93
  • 94. 94
  • 95. Nerd. Found. 95 Flickr photo by Nokia Point & Find
  • 96. 96
  • 97. 97
  • 98. 98
  • 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. MOBILE FIRST 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION 100
  • 101. MOBILE FIRST • @lukew • www.lukew.com Mobile First! • October 18th • abookapart.com