Mobile : comment y aller sans le regretter ? à Lyon

1,704 views
1,658 views

Published on

Conférence Mobile au MAC de Lyon le 15 mars 2012 : Comment y aller sans le regretter ?
Par Stéphane Lecouturier, Directeur Création & User Experience, altima°

Application, site mobile, iPhone, Android, iPad, tablette... Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup mois. Clarifiez votre vision du mobile en 60 minutes de démêlage de l’univers bouillonnant du cross-devices.

Au programme de cette conférence :

- Pourquoi faut-il absolument y aller ? (chiffres et retours d’expériences)
- Pourquoi faut-il s’en méfier ? (panorama des galères potentielles)
- Innovation : Web responsive (un seul site pour tous les devices), c’est quoi ? Comment ça marche ? (avantages et inconvénients)
- Démo d’un proto de site e-commerce responsive
- Échange avec Stéphane

En savoir plus : http://blog.altima.fr/?p=2364

Published in: Design

Mobile : comment y aller sans le regretter ? à Lyon

  1. 1. mobilePourquoi y aller ?Pourquoi s’en méfier ?Le point sur le Webresponsive
  2. 2. mobilepourquoi y aller ?
  3. 3. €500millionsm-commerce en France en 2010= 500 000 000 € Xerfi
  4. 4. €13milliards m-commerce en France en 2015= 13 000 000 000 € Xerfi
  5. 5. $600 millionschiffre d’affaire m-commerce ebay en 2009 = $600 000 000 eBay / Mobile Commerce Daily
  6. 6. $2 milliardschiffre d’affaire m-commerce ebay en 2010 = $2 000 000 000 eBay / Mobile Commerce Daily
  7. 7. « Il est incroyable de penser que $2 milliards de C.A.ont été générés par une plateforme qui n’existait pas il y a 2 ans, et sur un terminal qui n’existait pas il y a 3 ans. Clare Gilmartin, VP of eBay Europe » eBay / Mobile Commerce Daily
  8. 8. $5 milliardschiffre d’affaire m-commerce ebay en 2011 = $5 000 000 000 eBay / Mobile Commerce Daily
  9. 9. $8 milliardschiffre d’affaire m-commerce ebay en 2012 = $8 000 000 000 eBay / John Donahoe - CES Las Vegas - janvier 2012
  10. 10. $265 000Avion Piper PA-46-310P Malibu de 1985 l’objet le plus cher vendu sur eBay mobile en 2010 Mashable
  11. 11. 3,5Ferrari / mois vendues sur eBay mobile en 2011 eBay / Mobile Commerce Daily - janvier 2011
  12. 12. 1”= 11 vente par secondesur eBay mobile UK en 2011 eBay / Mobile Commerce Daily - octobre 2011
  13. 13. Taux d’équipement smartphone Australie 37 Suisse 34 Norvège 33 Espagne 33 Etats Unis 31 Danemark 30 Royaume Uni 30République Tchèque 29 France 27 Corée du Sud 27 Russie 25 Italie 24 Autriche 21 Allemagne 18 Turquie 14 0 10 20 30 40 Google think mobile - 2011
  14. 14. 6millionsse connectenttous les jours Médiamétrie - octobre 2011
  15. 15. 27%de smartphonesen France en 2011 Google think mobile - 2011
  16. 16. 40%de smartphonesen France en 2011 Médiamétrie - octobre 2011
  17. 17. 12 millionsde smartphones vendus en France en 2011 GfK- octobre 2011
  18. 18. Part de marché des OS smartphones France + Allemagne + Italie + Espagne + Royaume Uni 5 %4 % 8 % Apple 30 % Android 27 % Symbian 26 % Apple Symbian Android Blackberry Microsoft autres Comscore octobre 2011
  19. 19. Consommation de bande passante France + Allemagne + Italie + Espagne + Royaume Uni 7 % 8 % Android 21 % Apple 3 % 61 % Apple Symbian Android Blackberry autres Comscore août 2011
  20. 20. mobile vs. desktop 2007-2015 (estimations) !"### $"%##./012/10*34124*5667 $"!## &## 689:;1*./012/10*34124 <14=08>*./012/10*34124 ## # !##()**!##&)**!##+)**!#$#)**!#$$)**!#$!)**!#$,)**!#$)**!#$-) Stanley Research
  21. 21. 39%utilisent leur smartphone aux toilettes Google think mobile - 2011
  22. 22. 24% ont fait un achatsur leur smartphone* * hors applis et téléchargements - FEVAD juin 2011
  23. 23. 47%utilisent leur smartphone pour préparer un achat FEVAD juin 2011
  24. 24. 35%ont utilisé leur smartphone dans un magasin FEVAD juin 2011
  25. 25. 36 pour regarder le prix dans une autre % enseigne29 % pour géolocaliser d’autres enseignes26 % pour montrer le produit au vendeur FEVAD juin 2011
  26. 26. Les mobinautes sont là, mais pas encore tous lese-commerçants…
  27. 27. mobilepourquois’en méfier ?
  28. 28. Sil vous plaît...dessine-moi une appli
  29. 29. 1- développement
  30. 30. 2- publicationsur le store
  31. 31. 3- téléchargementpar les utilisateurs
  32. 32. 588 492 applis sur l’AppStore 405 241applis sur AndroidMarket 148apps.biz / AppBrain 14 mars 2012
  33. 33. 28appliseninstallées moyenne Google Think Mobile
  34. 34. 80%des applis de marquen’atteignent pas 1000 téléchargements Deloitte
  35. 35. 4- utilisationpar les utilisateurs
  36. 36. 28appliseninstallées moyenne RAPPEL Google Think Mobile
  37. 37. 11utiliséesdans le dernier mois Google Think Mobile
  38. 38. 5- maintenance
  39. 39. 24%des applis sont supprimées de l’AppStore (37% sur AndroidMarket) Research2Guidance
  40. 40. 24%des applis sont supprimées de l’AppStore (37% sur AndroidMarket) Research2Guidance
  41. 41. n°1 1er motif de suppression :problème d’incompatibilité avec le dernier OS Research2Guidance
  42. 42. Retour à la casedépart !
  43. 43. maintenance d’une appli =nombre de versions du device x versions de l’OS x versions de l’appli
  44. 44. l’iPad =sauveur de la presse TOUTE LA PRESSE en mai 2010
  45. 45. 30%commission d’Apple sur les abonnements Apple
  46. 46. #fail
  47. 47. les applisne sont pasmagiques !
  48. 48. #fail
  49. 49. #fail
  50. 50. #fail
  51. 51. #fail
  52. 52. 22%des e-commerçants mobile (sites + apps) CCM Benchmark - juillet 2011
  53. 53. =78%des e-commerçants PAS mobile (sites + apps) CCM Benchmark - juillet 2011
  54. 54. 40% des mobinautespréfèrent acheter sur le site 17% via une appli IAB M-Commerce 2011
  55. 55. 31% des mobinautesregrettent que les sitesne soient pas optimisés pour mobile Consensus / WorldPay - Octobre 2011
  56. 56. #fail
  57. 57. 53%des smartphonautes utilisent des applis comScore MobiLens - Avril 2011
  58. 58. 53%des smartphonautes browsent comScore MobiLens - Avril 2011
  59. 59. sc oo p! lesinternautes… surfent !
  60. 60. Activités sur smartphone Utilisation browser vs. app (US) Browser Apps Acheter 73 27Rechercher 63 37Se divertir 60 40S’informer 39 61 0 25 50 75 100 Yahoo! / Ipsos - Mobile Modes: How to Connect with Mobile Consumers - août 2011
  61. 61. tv tablette e-readersconsole smartphones
  62. 62. Apple iPad 2 Samsung Galaxy Tab 10.11024 x 768 px 1280 x 800 px
  63. 63. iPad 32048 x 1536 px
  64. 64. BlackBerry PlayBook 1024 x 600 px
  65. 65. Kindle fire1024 x 600 px+ server side optimization
  66. 66. Sony Xperia S Sony Xperia P Sony Xperia U 854 x 480 px 960 x 540 px 854 x 480 px
  67. 67. Sony Tablet PDouble screen
  68. 68. Sony Tablet P Double screen2 x 1024 x 480 px
  69. 69. desktop mobile iPad iPhone Androïd Win BlackBerrywww.ebay.com mobileweb.ebay.comeBay extensions & add-on m.ebay.com
  70. 70. la courseaux devicesest perdued’avance !?
  71. 71. mobilele point surle webresponsive
  72. 72. « Web Responsive » : c’est quoi ? Une nouvelle démarche de design de site web qui s’appuie sur la capacité des navigateurs à détecter les caractéristiques du device.Plutôt que de construire différents sites pour différents types de devices, l’approche « responsive » consiste en un seul site qui s’adapte à plusieurs devices et ainsi de supporter davantage de devices sans devoir développer et maintenir plusieurs sites différents.
  73. 73. webresponsiveun seul site pour tous les devices
  74. 74. « Web Responsive » : c’est quoi ? fluid layout mediaqueries adaptative medias server optimization
  75. 75. @mediaqueries
  76. 76. résolutiond’écran
  77. 77. nombrede couleurs
  78. 78. périphériques d’entrée touch / keyboard…
  79. 79. 1920 px1280px1024px800px des résolutions d’écrans structurantes640px (surtout la largeur !)320px
  80. 80. 1920 px TV1280px1024px desktop desktop desktop800px640px tablet feat ures sma tab320px pho ne features rtph phone one smart tablet let phone
  81. 81. Food Sensehttp://foodsense.is
  82. 82. Andersson-Wise Architectshttp://www.anderssonwise.com
  83. 83. The Boston Globehttp://www.bostonglobe.com
  84. 84. showtime!
  85. 85. desktop desktopsma tabletrtph tabletone
  86. 86. avantageset inconvénients
  87. 87. avantageServir plus de clientsplus souventPlus de clients peuvent faire leurshopping quand ils veulentoù ils veulent et quelque soitle device qu’ils choisissent
  88. 88. avantageNouvelles fonctionnalitéspartout, tout de suiteMise en place des évolutionsdu site sur tous les devicesau même moment
  89. 89. avantageCoût de set-upPas d’investissement dansle développement et la recetted’un site spécifique à chaquecatégorie de devices.
  90. 90. avantageCoût d’exploitationPas de développement/recetteen double des évolutions du site webdans les sites spécifiques+ un seul site à maintenir (TMA)
  91. 91. avantageUne seule URLBénéfique pour le SEO, le SMO,l’e-mail marketinget les usages cross devices(pas de problème de 404,de redirection vers la homepage...)
  92. 92. avantageFuture proofLe site sera conçu pour s’adapterà différentes largeurs d’écrans etsera ainsi déjà prêt pour répondreaux évolutions des devices et destendances d’usage (ex : web sur TV)
  93. 93. avantageLes avantages du webvs. apps nativesPas de download dans un store,instantanéité des mises à jour,indépendance, 1 seule versionà supporter, SEO-friendly,e-mailing-friendly.
  94. 94. inconvénientsExpérience adaptéevs. expérience naturelle du deviceCréation d’une expériencehomogène sur tous les devicesmais qui n’est pas baséesur les principes ergonomiquespropres au device
  95. 95. inconvénientsPas de 100% pixel perfectLe layout sera un peu différentsur chaque device et il ne seradonc pas possible d’assurerune expérience 100% identiqueaux maquettes sur tous les devices.
  96. 96. inconvénientsPas universelCette solution ne répondra pasà tous les features phones,principalement ceux de plus de 3 ans(Motorola Razr, anciens BlackBerry ou Nokia).
  97. 97. inconvénientsNiveau de compétenceRestreint le nombre de prestatairescapables d’intervenir sur le front-endà ceux disposant d’une vraieexpertise HTML/CSS/JSet peut limiter le développementlow-cost.
  98. 98. inconvénientsRestreint les plug-ins externesà ceux adaptés au mobile 84 Kb, = 10 requêtes http, 1,340 seconde
  99. 99. le responsive c’est bien…mais pas que.
  100. 100. desktop TV desktopfeat sma tableturespho ne rtph one
  101. 101. desktop TV desktopfeat sma tableturespho ne rtph one
  102. 102. desktop TV desktopfeat sma tableturespho ne rtph one
  103. 103. desktop TV desktopfeat sma tableturespho ne rtph one
  104. 104. desktop TV desktopfeat sma tableturespho ne rtph one
  105. 105. desktop TV desktopfeat sma tableturespho ne rtph one
  106. 106. www
  107. 107. www + app
  108. 108. www + app + m.
  109. 109. responwww + app + m. + sive
  110. 110. responapp + sive
  111. 111. responapp + sive m. +
  112. 112. responsive
  113. 113. le responsive n’est pas forcémment exclusif !
  114. 114. rendre son site mobile-compatibleou mobile-optimizedest devenu une dette.
  115. 115. merci !slecouturier@altima.fr © altima 03/2012

×