Téléchargé 88 fois
Téléchargé parAlexandre Jubien
Produit mobile
Le document explore les principes du développement de produits mobiles, mettant l'accent sur l'importance de comprendre les utilisateurs, d'appliquer des méthodes Lean et Agile, ainsi que de créer des expériences utilisateur optimales. Il souligne la nécessité de concevoir des applications qui répondent à des besoins réels et d'intégrer des cycles de feedback pour améliorer continuellement les produits. Enfin, le texte aborde des aspects techniques et pratiques, notamment le caching, la gestion des réseaux mobiles et l'importance de la collaboration au sein d'équipes pluridisciplinaires.
Produit mobile
- 1.
- 2.
- 3. myself@moi.me Pioneer of mobiledevelopment
- 4.
- 5. myself@moi.me 2008 - 2012 Deezer (maincompetitor of Spotify) Viadeo (main competitor of Linkedin)
- 6. ThinkMobile Mobile & TabletsConsulting Passion Expertise Commitment Strategy Monetization M-Commerce Webapps Innovation iPad Apps Product iPhone Usage Android Agile R&D Blackberry Multiplatform Windows Phone Massive Downloads Marketing Appstores Social Investment Audit Solutions ThinkMobile.fr
- 7.
- 8. Mobile Product = Product •Qui sont vos utilisateurs ? • Qui sont vos clients ? • Quel(s) problème(s) ont-ils ? • Quelles sont les solutions ? • …
- 9. Product that peoplelove = Build the right product + Build it right
- 10. Product that peoplelove = Customer development / Lean + Build it right
- 11. Product that peoplelove = Customer development / Lean + Agile / Scrum
- 12. Product that peoplelove = Customer development / Lean + Agile / Scrum SVPG.com (Silicon Valley Product Group)
- 13. Lean Startup • • • • • Livre d’EricRies, mouvement Lean ‘‘Fail fast, suceed faster’’ Rencontrer les vrais besoins Pivots Eviter le gâchis
- 14. Philosophie Lean • Processusde découverte • Ce que veulent les clients n’est pas forcément ce qu’on a imaginé • Il faut pouvoir lâcher prise • Une définition intéressante ici • Une vidéo <3mns ici
- 15. Build – Measure– Learn
- 16. MVP • • • • Minimum Viable Product Preuvede concept Valider les hypothèses, décrouvrir On itère dessus ensuite
- 17. Release early • Seconfronter au plus tôt : Aux utilisateurs Aux problèmes Aux risques • Rationaliser, prouver, confronter attention aux intuitions !
- 18.
- 19. Agile • SCRUM, Kanban,eXtreme Programming… • Des pratiques et des outils pas trop embêtants, que l’équipe choisit d’utiliser
- 20. SCRUM • • • • • Vidéo Scrum inunder 10 mns Sprints de 2 semaines (reco) Features in Product Backlog Rituels : daily / weekly, sprint planing, démos Rétrospectives
- 21. Itératif = droitau changement changement B A C
- 22. Lean, Agile, DesignThinking… Un point commun : l’équipe pluri-disciplinaire / la collaboration d’experts de métiers différents
- 23. Lean, Agile, DesignThinking… Un point commun : l’équipe pluri-disciplinaire / la collaboration d’experts de métiers différents => Inclure les développeurs !
- 24.
- 25.
- 26.
- 27.
- 28. Trafic web mondial? 10 à 20%
- 29. Plus de SIMsactivées que d’hommes sur terre Mobile guru @TomiAhonen
- 30. Plus adopté quele stylo !!! Mobile guru @TomiAhonen
- 32.
- 33.
- 34. Partout, tout letemps
- 35. Même là –75% !
- 36.
- 37. There’s an appfor that
- 38. 1er appareil connecté qu’ona toujours sur soi
- 39.
- 40.
- 41.
- 42. Design for interruption PC/Tablet= Scubadiving Mobile = Snorkeling Rachel @Hinman
- 43. Design for interruption •Attention partielle • Prévoir les interruptions => sauvegarder les états • Prévoir le retour à l’application
- 44. 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)
- 45. Monde digital /Monde physique
- 46. Monde digital /monde physique
- 47.
- 48. Code barre Chasse auxtrésors Scanbucks
- 49. Code barre Comparateur deprix Prixing
- 50.
- 51. QR Code • • • • http://bit.ly/AlexJubien Catalogue papier(But) Magazines (Inrocks) Affiches Emballage Produits (colle Pater) • Street marketing • …
- 53.
- 54.
- 55.
- 56.
- 57. M Commerce Tesco virtualsupermarket in a subway station - South Korea
- 58. Ancrez dans lemonde réel
- 59.
- 60. Butler mode • JohnPaul • Et si votre service était une personne ? • Ex Deezer, Viadeo
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. Vos désirs exaucés Envied’écouter une musique Deezer 5s
- 67. Vos désirs exaucés Envied’écouter une musique 5s Besoin d’appeler un contact pro 5s Deezer Viadeo
- 68. Quelle est laplus grosse contrainte ?
- 69. Réseaux mobiles • Aconsidé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
- 70. 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, …
- 71. 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 !
- 72.
- 73. Latence temps 2G : jusqu’à5 secondes !
- 74.
- 75. Latence => Grouping 1sec 2 sec 3 sec
- 76. Grouping + compression (zip) 1sec 2 sec 3 sec
- 77. 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
- 78. Vitesse perçue A minima,améliorer la perception de l’utilisateur : • Chargement d’un minimum de données en amont • Actions possibles
- 79. 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
- 80. Réduire les points defriction
- 81. La friction Ce quiempêche nos utilisateurs / consommateurs d’avancer
- 82. Techcrunch: Reduce Friction,Increase Happiness
- 83. Techcrunch: Reduce Friction,Increase Happiness Location de voiture entre particuliers Pb = récupérer les clés
- 84. Techcrunch: Reduce Friction,Increase Happiness Location de voiture entre particuliers Pb = récupérer les clés Getaround Carkit
- 85.
- 86.
- 87. Customer development / customercommunication • Vital sur mobile • Commentaires app stores = la jungle • Communication directe / support • Learn
- 88. Trend: InApp feedback •Eviter les commentaires négatifs sur les app stores • Récupérer retours et suggestions, le tout avec le contact de l’utilisateur pour investigations • Des infos, des utilisateurs contents => Learn et early adopters
- 89.
- 90. InApp feedback Etes-vous satisfait? Oui Notez l’app ! App store
- 91. InApp feedback Etes-vous satisfait? Oui Notez l’app ! App store Non Donnez-nous votre feedback
- 92. InApp feedback Etes-vous satisfait? Oui Notez l’app ! App store Non Donnez-nous votre feedback
- 94.
- 95. Le Web des objetsconnectés
- 96.
- 97.
- 98. On ajoute descapteurs, on se rajoute des pouvoirs
- 99.
- 100.
- 101. Transmission de pensée1.0 : • Latence de 30 secondes • Nécessite de parler à voie haute • Ne marche pas toujours => messagerie
- 102.
- 103. Pouvoir Transmission de pensée Omniscience Télékinésie Maîtrisedu temps Prévoir l’avenir Etre invincible / guérir Lancer des éclairs Voler Téléportation
- 104. Pouvoir Version Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.1 Maîtrisedu temps 0.3 Prévoir l’avenir 0.1 Etre invincible / guérir 0.1 Lancer des éclairs 0 Voler 0.5 Téléportation 0.2
- 105. Pouvoir Version Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.1 Maîtrisedu temps 0.3 Prévoir l’avenir 0.1 Etre invincible / guérir 0.1 Lancer des éclairs 0 Voler 0.5 Téléportation 0.2 + 3D printing Mobile powered
- 106. Donnez du (super)pouvoir àvos utilisateurs !
- 107. Pouvoir Version Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.1 Maîtrisedu temps 0.3 Prévoir l’avenir 0.1 Etre invincible / guérir 0.1 Lancer des éclairs 0 Voler 0.5 Téléportation 0.2 Conscience / intelligence collective 2.0 Mobile powered
- 108.
- 109. Réseaux sociaux • 819Md’utilisateurs mobiles Facebook • 60 à 80% des utilisateurs deTwitter
- 110. Réseaux sociaux • 819Md’utilisateurs mobiles Facebook • 60 à 80% des utilisateurs deTwitter • Intégrés nativement
- 111.
- 112.
- 113. Social2App AppStore Les partages génèrentdes downloads
- 114.
- 115.
- 116. Social2App • Mécanique «partage consommation » • Puissant, moteur d’acquisition et de rétention • Moteur de croissance virale • Un peu lourd techniquement / coûteux
- 118.
- 119.
- 120.
- 121.
- 122. = vouloir fairerentrer le web dans le mobile @tomiahonen
- 123.
- 124. Vouloir (trop) innoversur l’UI/UX
- 125. Vouloir (trop) innoversur 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, …
- 126. Ne pas réinventer laroue • Apple, Google, MS… ont investi des millions dans l’UI/UX des OS • Utilisez les guidelines / composants de base au maximum • Vos utilisateurs s’y retrouveront • Validation et potentielle mises en avant
- 127. Ne pas adapter parplateforme
- 128.
- 129. Apps que lesgens aiment – Qu’est ce qui est le plus important ?
- 130. + important • Speed! •1ère impression • Accomplir des tâches facilement
- 131.
- 132. Cycle de vie Découverte (appstore) 1ère ouverture / 1ères impressions
- 133. Cycle de vie Découverte (appstore) 1ère ouverture / 1ères impressions Tâches simples
- 134. Cycle de vie Découverte (appstore) 1ère ouverture / 1ères impressions Tâches simples Tâches Complexes
- 135. Cycle de vie Découverte (appstore) 1ère ouverture / 1ères impressions Mise à jour Tâches simples Tâches Complexes
- 136. Cycle de vie Découverte (appstore) 1ère ouverture / 1ères impressions Mise à jour Tâches simples Tâches Complexes
- 137. On boarding Mettre plusde travail sur les 1ers contacts avec le service (login, inscription, home, …)
- 138. On boarding • Tester régulièrementl’expérience pour un nouvel utilisateur • Upsell features / call to action
- 139.
- 140. Etapes • Mobile Ready: Web services / APIs ! • Démarche produit • Prototype fonctionnel • Alpha / Beta
- 141. Démarche produit • Regarderce que font les autres (compétiteurs, apps similaires, autres domaines, …) • Reviews sur les apps stores • Interviews utilisateurs et autres outils Lean • Conception : use cases, fonctionnalités, UX/UI, …
- 142. Personas • Personnages fictifsqui ont des vrais problèmes • Issus du monde réel (interviews, data, …) • Prisme pour penser à d’autres utilisateurs qu’à soi-même • Outil de conception et de marketing (mesure, segmentation, ciblage / message)
- 143.
- 144. Répondre au 3principaux use cases • Les problèmes que votre service résout / points de friction résolus via mobile • Rechercher ces cas en situation de mobilité / pas forcément les mêmes que sur le web • Ex. Mobile comme compagnon du service (validation, alertes, …)
- 145. Répondre au 3principaux use cases • Les problèmes que votre service résout / points de friction résolus via mobile • Rechercher ces cas en situation de mobilité / pas forcément les mêmes que sur le web • Ex. Mobile comme compagnon du service (validation, alertes, …) => Fonctionnalités
- 146. Ordre de conception •Cas d’usages prioritaires
- 147. Ordre de conception •Cas d’usages prioritaires • Cas d’usages secondaires
- 148. Ordre de conception •Cas d’usages prioritaires • Cas d’usages secondaires • Choix de navigation (home, topbar, menu, …)
- 149. Ordre de conception •Cas d’usages prioritaires • Cas d’usages secondaires • Choix de navigation (home, topbar, menu, …)
- 150. Ordre de conception •Cas d’usages prioritaires • Cas d’usages secondaires • Choix de navigation (home, topbar, menu, …) • Patterns des sous-écrans • Ecrans des contenus
- 151.
- 152.
- 153.
- 154.
- 155. Flux VS Ecran Concevoirdes flux plutôt que des écrans
- 156. Design Studio • Conceptionen team (pluri-disciplinaire) • Extraire les bonnes idées • Sketching Design Studio : tellement UX … tellement créatif … tellement agile !
- 157. Itérer sur l’UI •Commencer avec une UI simple • Evoluer au fur et à mesure • Se garder de vouloir obtenir tout de suite une UI « trendy » comme celles des apps phares que vous utilisez
- 158. 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
- 159. Nice but costly MenuPath Timer Path
- 160. Nice but costly MenuLinkedin
- 161. Customisation ex. Toolbar Message Mail MessageViadeo Playlist Deezer
- 162. Prototype fonctionnel • Explorerles pbs techniques • Réduire les risques • Tests utilisateurs • Faire Alpha / Bêta tester
- 163. Prototype fonctionnel • Explorerles pbs techniques • Réduire les risques • Tests utilisateurs • Faire Alpha / Bêta tester
- 164. Mobile 1st Source :Infographie UX by Octo : Responsive et Mobile First
- 165.