Revolution Mobile @Web2day

4 616 vues

Publié le

Révolution Mobile :
Le mobile a révolutionné nos vies, au point d'être devenu une extension de notre cerveau. Qu'est ce qui rend le mobile si révolutionnaire ?
Où en sommes-nous dans cette révolution mobile ?
Dans une seconde partie, quelques recommandations pour réussir vos produits mobiles.

Voir http://bit.ly/revomobile (lien vers la video de la conférence, etc...)

Publié dans : Internet
0 commentaire
9 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 616
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 019
Actions
Partages
0
Téléchargements
51
Commentaires
0
J’aime
9
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Revolution Mobile @Web2day

  1. 1. Révolution mobile @AlexJubien
  2. 2. @AlexJubien
  3. 3. Pioneer of mobile development
  4. 4. 2003 - 2007 Games
  5. 5. 2003 - 2007 Games Apps
  6. 6. Deezer 2008 - 2012
  7. 7. Deezer Viadeo 2008 - 2012
  8. 8. ThinkMobile Mobile Strategy Consulting Passion Expertise Commitment Social StrategyMonetization M-Commerce Webapps Innovation iPad Apps ProductiPhone Usage Android Agile R&DBlackberry Multiplatform Windows Phone Massive Downloads MarketingAppstores Investment Audit Solutions
  9. 9. Let’s go!
  10. 10. Smartphones ?
  11. 11. Smartphones ? 49%
  12. 12. Trafic web mondial ?
  13. 13. Trafic web mondial ? 15 à 20%
  14. 14. Plus de SIMs activées que d’hommes sur terre Mobile guru @TomiAhonen
  15. 15. Plus adopté que le stylo !!! Mobile guru @TomiAhonen
  16. 16. / Angry Birds Man on the moon
  17. 17. Révolutionnaire
  18. 18. Pourquoi ?
  19. 19. Partout, tout le temps
  20. 20. Même là – 75% !
  21. 21. Parité
  22. 22. There’s an app for that
  23. 23. 1er appareil connecté qu’on a toujours sur soi
  24. 24. Compagnon de vie
  25. 25. Compagnon de vie Vie = gens moments lieux objets
  26. 26. Compagnon de vie Vie = gens moments lieux objets Facebook Path Foursquare Pinterest
  27. 27. Monde digital / Monde physique
  28. 28. Monde digital / monde physique
  29. 29. Code barre
  30. 30. Code barre Chasse aux trésors Scanbucks Comparateur de prix Prixing
  31. 31. QR Code 30% http://bit.ly/AlexJubien
  32. 32. QR Code • Catalogue papier (But) • Magazines (Inrocks) • Affiches • Emballage Produits (colle Pater) • Street marketing • …http://bit.ly/AlexJubien
  33. 33. Réalité augmentée
  34. 34. Réalité augmentée Géoloc
  35. 35. Réalité augmentée Géoloc M-Paiement
  36. 36. Réalité augmentée Géoloc M-Commerce M-Paiement
  37. 37. M Commerce Tesco virtual supermarket in a subway station - South Korea
  38. 38. Le mariage de la vente physique et digitale Source : Kontestapp - http://fr.slideshare.net/Kontest/strategie-web-tostorefr
  39. 39. M2Store / trafic en magasin Bon plans en magasin PassVip Collecte de points Shopkick
  40. 40. PassBook • Quoi : coupons, tickets, cartes de fidélité, bons d’achat, …
  41. 41. iBeacon
  42. 42. iBeacon
  43. 43. Instantanéité
  44. 44. 5 h TV Météo
  45. 45. 5 h TV Web 5 m Météo
  46. 46. 5 h TV Web 5 m Mobile 5 s Météo
  47. 47. Vos désirs exaucés
  48. 48. Vos désirs exaucés 5 s Envie d’écouter une musique Deezer
  49. 49. Vos désirs exaucés 5 s Envie d’écouter une musique Besoin d’appeler un contact pro 5 s Deezer Viadeo
  50. 50. Facilité d’utilisation
  51. 51. Facilité d’utilisation
  52. 52. Réduire les points de friction
  53. 53. La friction Ce qui empêche nos utilisateurs / consommateurs d’avancer
  54. 54. Anti friction services
  55. 55. Support Video InApp LiveChat (EN)
  56. 56. Techcrunch: Reduce Friction, Increase Happiness
  57. 57. Location de voiture entre particuliers Pb = récupérer les clés Techcrunch: Reduce Friction, Increase Happiness
  58. 58. Location de voiture entre particuliers Pb = récupérer les clés Getaround Carkit Techcrunch: Reduce Friction, Increase Happiness
  59. 59. Hub des capteurs
  60. 60. IoT / Objets Connectés
  61. 61. miCoach Adidas miCoach Suivi entrainement sportif
  62. 62. Thermostat Nest
  63. 63. On ajoute des capteurs, on se rajoute des pouvoirs
  64. 64. Des supers pouvoirs ?
  65. 65. Qui est télépathe ?
  66. 66. Transmission de pensée 1.0 : • Latence de 30 secondes • Nécessite de parler à voie haute • Ne marche pas toujours => messagerie
  67. 67. Pouvoirs
  68. 68. Pouvoir Transmission de pensée Omniscience Télékinésie Maîtrise du temps Prévoir l’avenir Etre invincible / guérir Lancer des éclairs Voler Téléportation
  69. 69. Pouvoir Version Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.3 Maîtrise du temps 0.3 Prévoir l’avenir 0.1 Etre invincible / guérir 0.3 Lancer des éclairs 0 Voler 0.5 Téléportation 0.2
  70. 70. Pouvoir Version Mobile powered Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.3 Maîtrise du temps 0.3 Prévoir l’avenir 0.1 Etre invincible / guérir 0.3 Lancer des éclairs 0 Voler 0.5 Téléportation 0.2
  71. 71. Pouvoir Version Mobile powered Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.3 Maîtrise du temps 0.3 Prévoir l’avenir 0.1 Etre invincible / guérir 0.3 Lancer des éclairs 0 Voler 0.5 Téléportation 0.2 Conscience / intelligence collective 2.0 + 3D printing
  72. 72. Donnez du (super)pouvoir à vos utilisateurs / clients !
  73. 73. Clivage ?
  74. 74. EM Countries Cours des céréales par SMS
  75. 75. EM Countries Transfert d’argent par SMS
  76. 76. Et maintenant ?
  77. 77. Révolution tablette ?
  78. 78. Transport TV Info Cinéma Entreprise Art Voyage Cuisine Santé Banque Education Musique Presse Livres Sécurité Tourisme Jeux Shopping Armée Mode
  79. 79. Transport TV Info Cinéma Entreprise Art Voyage Cuisine Santé Banque Education Musique Presse Livres Sécurité Tourisme Jeux Shopping Armée Mode
  80. 80. Transport TV Info Cinéma Entreprise Mark Andreessen on Why Software Is Eating the World Art Voyage Cuisine Santé Banque Education Musique Presse Livres Sécurité Tourisme Jeux Shopping Armée Mode
  81. 81. Disruption
  82. 82. ? ? ? ? ??
  83. 83. Google Glasses
  84. 84. Eye control
  85. 85. Tatouages électroniques
  86. 86. Allons-nous devenir des machines ?
  87. 87. Etape : interagir avec des machines qui nous ressemblent
  88. 88. Etape : interagir avec des machines qui nous ressemblent
  89. 89. L’interface homme machines ultime
  90. 90. The scary slides
  91. 91. Faisons nous un peu peur
  92. 92. Une entreprise à la pointe de : Mobile Information Intelligence artificielle Biotech Robotique …
  93. 93. « Nous avons peur de Google » « La stratégie secrète de Google apparaît… »
  94. 94. Don’t be evil (ouf !)
  95. 95. Transhumanisme
  96. 96. www.sarifindustries.com L’homme augmenté :
  97. 97. Êtes-vous prêts à devenir des machines ?
  98. 98. Qu’est ce qui va nous faire craquer ?
  99. 99. L’homme qui vivra 1000 ans est déjà né Laurent Alexandre – TEDx Paris
  100. 100. Qqs Recos
  101. 101. Mobile product = product
  102. 102. Build the right product + Build it right and nice ! Product that people love =
  103. 103. Customer development / Lean Startup + Build it right and nice ! Product that people love =
  104. 104. Customer development / Lean Startup + Agile / Scrum and nice ! Product that people love =
  105. 105. Customer development / Lean Startup + Agile / Scrum Design / UX Product that people love =
  106. 106. Customer development / customer communication • Vital sur mobile • Commentaires app stores = la jungle • Communication directe / support • Learn
  107. 107. Trend : InApp feedback Etes-vous satisfait ?
  108. 108. InApp feedback Etes-vous satisfait ? Notez l’app ! Oui App store
  109. 109. InApp feedback Etes-vous satisfait ? Notez l’app ! Donnez-nous votre feedback Oui Non App store
  110. 110. InApp feedback Etes-vous satisfait ? Notez l’app ! Donnez-nous votre feedback Oui Non App store
  111. 111. InApp feedback Un mécanisme vertueux pour le produit et pour le marketing :  Favoriser les bonnes notes  Eviter les avis négatifs  Transformer les utilisateurs mécontents en satisfaits + bonnes notes  Récupérer retours et suggestions, avec le contact de l’utilisateur 126
  112. 112. UI: Keep it simple
  113. 113. En mettre trop
  114. 114. Vouloir (trop) innover sur l’UI/UX
  115. 115. Vouloir (trop) innover sur l’UI/UX • Risqué, demande de l’expertise, coûteux ! • Se concentrer sur le cœur de métier pour la différentiation • Contre exemples / besoins de différentiation : Flipboard, Fantastical, Mailbox, Any.do, Path, …
  116. 116. Animations et effets ‘Wow!’ • Plus tard • Ca ne fait pas le produit • Tjrs plus impactant que prévu niveau charge (réglages, allers / retours, …) • Vous avez mieux à faire de votre temps / argent
  117. 117. Nice but costly Menu Path Timer Path
  118. 118. Nice but costly Menu Linkedin
  119. 119. Design / customisation ex. Toolbar (iOS6) Message Mail Message Viadeo Playlist Deezer
  120. 120. Design / customisation ex. Toolbar (iOS7) Message Mail Message Viadeo Playlist Deezer
  121. 121. Ne pas réinventer la roue • Apple, Google, MS… ont investi des millions dans l’UI/UX des OS • Utilisez au maximum les composants de base / guidelines de l’OS • Vos utilisateurs s’y retrouveront
  122. 122. Question : Qui connaît parfaitement les plateformes mobiles ?
  123. 123. Méthodos
  124. 124. Inclure les développeurs dans la conception !
  125. 125. Inclure les développeurs dans la conception ! • Ils ont une connaissance approfondie des plateformes • Ils trouvent des raccourcis techniques • Souvent sensibles au produit / utilisateurs • En phase avec Lean et agilité
  126. 126. Agile • SCRUM, Kanban, eXtreme Programming… • Processus itératif • Favoriser la communication orale • Des pratiques et des outils pas trop embêtants, que l’équipe choisit d’utiliser
  127. 127. A B C Itératif = droit au changement changement
  128. 128. Conception itérative • La conception est en avance de phase sur les développements • Mais les sprints débutent avant la fin de la conception 143
  129. 129. Conception itérative • La conception est en avance de phase sur les développements • Mais les sprints débutent avant la fin de la conception Développements Conception 2 weeks 144
  130. 130. Conception itérative • La conception est en avance de phase sur les développements • Mais les sprints débutent avant la fin de la conception Développements Conception Réus conception / UX incluant les dévelopeurs 145
  131. 131. Conception itérative • La conception est en avance de phase sur les développements • Mais les sprints débutent avant la fin de la conception Développements Conception Réus conception / UX incluant les dévelopeurs 146
  132. 132. Conception itérative Sprint 1 • La conception est en avance de phase sur les développements • Mais les sprints débutent avant la fin de la conception Développements Conception Réus conception / UX incluant les dévelopeurs 147
  133. 133. Conception itérative Sprint 1 Sprint 2 • La conception est en avance de phase sur les développements • Mais les sprints débutent avant la fin de la conception Développements Conception Réus conception / UX incluant les dévelopeurs 148
  134. 134. Conception itérative Sprint 1 Sprint 2 Sprint 3 • La conception est en avance de phase sur les développements • Mais les sprints débutent avant la fin de la conception Développements Conception Réus conception / UX incluant les dévelopeurs 149
  135. 135. Brise glace : principe • En cas de développement multi-plateforme (iOS, Android, Webapp, …) • On ne lance pas les devs en parallèle • On utilise une des plateformes comme fer de lance
  136. 136. Brise glace : avantages • Les apprentissages d’un projet servent aux autres projets :  Choix produit  Choix techniques  Méthodos / amélioration continue • Surtout utile pour les réglages de l’API • Paralléliser, il faut le faire intelligemment
  137. 137. Mobile 1st • Méthode de conception avant tout • On conçoit pour mobile (+contraint), puis on enrichit pour desktop et tablette • Oblige à se concentrer sur l’essentiel • Souvent lié au Responsive Design
  138. 138. Mobile 1st Source : Infographie UX by Octo : Responsive et Mobile First
  139. 139. Recos produit mobile
  140. 140. On boarding Mettre plus de travail sur les 1ers contacts avec le service (login, inscription, home, …)
  141. 141. • Tester régulièrement l’expérience pour un nouvel utilisateur • Upsell features / call to action On boarding
  142. 142. Design for interruption PC/Tablet = Scubadiving Mobile = Snorkeling Rachel @Hinman
  143. 143. Design for interruption • Attention partielle • Prévoir les interruptions => sauvegarder les états • Prévoir le retour à l’application
  144. 144. Design for interruption • Attention partielle • Prévoir les interruptions => sauvegarder les états • Prévoir le retour à l’application • Et n’interrompez pas trop non plus ! (notifs)
  145. 145. Design for speed • Caching de contenus • Actions instantanées et offline • Amélioration de la vitesse perçue • Adaptation au réseau • Réduction de latence, grouping et compression
  146. 146. Caching de contenu • Certains contenus sont accessibles en offline (caching ou synchronisation) • On peut utiliser ces contenus immédiatement • L’application démarre en offline puis elle se connecte dans un 2nd temps • Ex. : Deezer, Pocket, Viadeo, …
  147. 147. Actions instantanées et offline • L’action est ‘enregistrée’ immédiatement • La requête est envoyée à la prochaine connexion • Exemples dans Pocket et Mail : envoi, tags, marquage lu, … • On peut agir même sans réseau !
  148. 148. Adaptation au réseau • A considérer : différencier le comportement de l’appli en fonction du réseau • Ex. pour une appli de réseau social :  Wifi : pré-caching des contacts et images de contacts en tâche de fond, données en https car peu sécurisé  3G : fonctionnement standard, pas de https (trop lourd)  2G / Edge : fonctionnement dégradé, pas de chargement des images
  149. 149. Latence temps
  150. 150. Latence 2G : jusqu’à 5 secondes ! temps
  151. 151. Latence 1 sec 2 sec 3 sec
  152. 152. Latence => Grouping 1 sec 2 sec 3 sec
  153. 153. Grouping + compression (zip) 1 sec 2 sec 3 sec
  154. 154. Compression • A considérer : lors de la requête pour une liste, charger les données des éléments • Grâce à la compression, ça ne coûte pas trop cher côté réseau • Mais impact côté serveur
  155. 155. Vitesse perçue A minima, améliorer la perception de l’utilisateur : • Chargement d’un minimum de données en amont • Actions possibles
  156. 156. Vitesse perçue A minima, améliorer la perception de l’utilisateur : • Chargement d’un minimum de données en amont • Actions possibles • Chargement de données secondaires
  157. 157. Tools
  158. 158. http://www.developereconomics.com/tools/

×