Révolution mobile
@AlexJubien
@AlexJubien
Pioneer of mobile development
2003 - 2007
Games
2003 - 2007
Games Apps
Deezer
2008 - 2012
Deezer Viadeo
2008 - 2012
ThinkMobile
Mobile Strategy Consulting
Passion Expertise Commitment
Social StrategyMonetization M-Commerce
Webapps Innovat...
Let’s go!
Smartphones ?
Smartphones ?
49%
Trafic web mondial ?
Trafic web mondial ?
15 à 20%
Plus de SIMs activées que
d’hommes sur terre
Mobile guru @TomiAhonen
Plus adopté que le stylo !!!
Mobile guru @TomiAhonen
/
Angry
Birds
Man on the
moon
Révolutionnaire
Pourquoi ?
Partout, tout le temps
Même là – 75% !
Parité
There’s an app for that
1er appareil connecté
qu’on a toujours sur soi
Compagnon de vie
Compagnon de vie
Vie
=
gens moments lieux objets
Compagnon de vie
Vie
=
gens moments lieux objets
Facebook Path Foursquare Pinterest
Monde digital / Monde physique
Monde digital / monde physique
Code barre
Code barre
Chasse aux trésors
Scanbucks
Comparateur de prix
Prixing
QR Code
30%
http://bit.ly/AlexJubien
QR Code
• Catalogue papier (But)
• Magazines (Inrocks)
• Affiches
• Emballage Produits
(colle Pater)
• Street marketing
• ...
Réalité augmentée
Réalité augmentée Géoloc
Réalité augmentée Géoloc
M-Paiement
Réalité augmentée Géoloc
M-Commerce M-Paiement
M Commerce
Tesco virtual supermarket in a subway station - South Korea
Le mariage de la vente
physique et digitale
Source : Kontestapp - http://fr.slideshare.net/Kontest/strategie-web-tostorefr
M2Store / trafic en magasin
Bon plans en magasin
PassVip
Collecte de points
Shopkick
PassBook
• Quoi : coupons, tickets, cartes de fidélité,
bons d’achat, …
iBeacon
iBeacon
Instantanéité
5 h
TV
Météo
5 h
TV Web
5 m
Météo
5 h
TV Web
5 m
Mobile
5 s
Météo
Vos désirs exaucés
Vos désirs exaucés
5 s
Envie d’écouter
une musique
Deezer
Vos désirs exaucés
5 s
Envie d’écouter
une musique
Besoin d’appeler
un contact pro
5 s
Deezer
Viadeo
Facilité d’utilisation
Facilité d’utilisation
Réduire les points
de friction
La friction
Ce qui empêche nos utilisateurs /
consommateurs d’avancer
Anti friction services
Support
Video InApp LiveChat (EN)
Techcrunch: Reduce Friction, Increase Happiness
Location de voiture entre
particuliers
Pb = récupérer les clés
Techcrunch: Reduce Friction, Increase Happiness
Location de voiture entre
particuliers
Pb = récupérer les clés
Getaround Carkit
Techcrunch: Reduce Friction, Increase Happ...
Hub des capteurs
IoT
/
Objets Connectés
miCoach
Adidas miCoach
Suivi entrainement
sportif
Thermostat Nest
On ajoute des capteurs,
on se rajoute des pouvoirs
Des supers pouvoirs ?
Qui est télépathe ?
Transmission de pensée 1.0 :
• Latence de 30 secondes
• Nécessite de parler à voie haute
• Ne marche pas toujours => messa...
Pouvoirs
Pouvoir
Transmission de pensée
Omniscience
Télékinésie
Maîtrise du temps
Prévoir l’avenir
Etre invincible / guérir
Lancer ...
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...
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’...
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’...
Donnez du (super)pouvoir
à vos utilisateurs / clients !
Clivage ?
EM Countries
Cours des céréales
par SMS
EM Countries
Transfert d’argent
par SMS
Et maintenant ?
Révolution tablette ?
Transport
TV
Info
Cinéma
Entreprise
Art
Voyage
Cuisine
Santé
Banque
Education
Musique
Presse
Livres
Sécurité
Tourisme
Jeux...
Transport
TV
Info
Cinéma
Entreprise
Art
Voyage
Cuisine
Santé
Banque
Education
Musique
Presse
Livres
Sécurité
Tourisme
Jeux...
Transport
TV
Info
Cinéma
Entreprise
Mark Andreessen on Why Software Is Eating the World
Art
Voyage
Cuisine
Santé
Banque
Ed...
Disruption
? ? ? ? ??
Google Glasses
Eye control
Tatouages électroniques
Allons-nous devenir des
machines ?
Etape : interagir avec des
machines qui nous ressemblent
Etape : interagir avec des
machines qui nous ressemblent
L’interface homme machines
ultime
The scary slides
Faisons nous un peu peur
Une entreprise à la pointe de :
Mobile
Information
Intelligence artificielle
Biotech
Robotique
…
« Nous avons peur de Google »
« La stratégie secrète de Google apparaît… »
Don’t be evil
(ouf !)
Transhumanisme
www.sarifindustries.com
L’homme augmenté :
Êtes-vous prêts à devenir des
machines ?
Qu’est ce qui va nous faire
craquer ?
L’homme qui vivra 1000 ans
est déjà né
Laurent Alexandre – TEDx Paris
Qqs Recos
Mobile product = product
Build the right product
+
Build it right
and nice !
Product that people love =
Customer development / Lean
Startup
+
Build it right
and nice !
Product that people love =
Customer development / Lean
Startup
+
Agile / Scrum
and nice !
Product that people love =
Customer development / Lean
Startup
+
Agile / Scrum
Design / UX
Product that people love =
Customer development /
customer communication
• Vital sur mobile
• Commentaires app stores = la jungle
• Communication dir...
Trend : InApp feedback
Etes-vous satisfait ?
InApp feedback
Etes-vous satisfait ?
Notez l’app !
Oui
App store
InApp feedback
Etes-vous satisfait ?
Notez l’app !
Donnez-nous votre
feedback
Oui Non
App store
InApp feedback
Etes-vous satisfait ?
Notez l’app !
Donnez-nous votre
feedback
Oui Non
App store
InApp feedback
Un mécanisme vertueux pour le produit et
pour le marketing :
 Favoriser les bonnes notes
 Eviter les avis...
UI: Keep it simple
En mettre trop
Vouloir (trop) innover sur
l’UI/UX
Vouloir (trop) innover sur
l’UI/UX
• Risqué, demande de l’expertise, coûteux !
• Se concentrer sur le cœur de métier pour
...
Animations et effets ‘Wow!’
• Plus tard
• Ca ne fait pas le produit
• Tjrs plus impactant que prévu niveau charge
(réglage...
Nice but costly
Menu Path Timer Path
Nice but costly
Menu Linkedin
Design / customisation
ex. Toolbar (iOS6)
Message Mail Message Viadeo Playlist Deezer
Design / customisation
ex. Toolbar (iOS7)
Message Mail Message Viadeo Playlist Deezer
Ne pas réinventer
la roue
• Apple, Google, MS… ont investi des
millions dans l’UI/UX des OS
• Utilisez au maximum les comp...
Question :
Qui connaît parfaitement les
plateformes mobiles ?
Méthodos
Inclure les développeurs
dans la conception !
Inclure les développeurs
dans la conception !
• Ils ont une connaissance approfondie des
plateformes
• Ils trouvent des ra...
Agile
• SCRUM, Kanban, eXtreme Programming…
• Processus itératif
• Favoriser la communication orale
• Des pratiques et des...
A
B
C
Itératif = droit au changement
changement
Conception itérative
• La conception est en avance de phase sur les développements
• Mais les sprints débutent avant la fi...
Conception itérative
• La conception est en avance de phase sur les développements
• Mais les sprints débutent avant la fi...
Conception itérative
• La conception est en avance de phase sur les développements
• Mais les sprints débutent avant la fi...
Conception itérative
• La conception est en avance de phase sur les développements
• Mais les sprints débutent avant la fi...
Conception itérative
Sprint 1
• La conception est en avance de phase sur les développements
• Mais les sprints débutent av...
Conception itérative
Sprint 1 Sprint 2
• La conception est en avance de phase sur les développements
• Mais les sprints dé...
Conception itérative
Sprint 1 Sprint 2 Sprint 3
• La conception est en avance de phase sur les développements
• Mais les s...
Brise glace : principe
• En cas de développement
multi-plateforme (iOS, Android,
Webapp, …)
• On ne lance pas les devs en
...
Brise glace : avantages
• Les apprentissages d’un projet servent aux
autres projets :
 Choix produit
 Choix techniques
...
Mobile 1st
• Méthode de conception avant tout
• On conçoit pour mobile (+contraint), puis
on enrichit pour desktop et tabl...
Mobile 1st
Source : Infographie UX by Octo : Responsive et Mobile First
Recos produit mobile
On boarding
Mettre plus de travail sur les
1ers contacts avec le service
(login, inscription, home, …)
• Tester régulièrement l’expérience
pour un nouvel utilisateur
• Upsell features / call to action
On boarding
Design for interruption
PC/Tablet = Scubadiving Mobile = Snorkeling
Rachel @Hinman
Design for interruption
• Attention partielle
• Prévoir les interruptions
=> sauvegarder les états
• Prévoir le retour à l...
Design for interruption
• Attention partielle
• Prévoir les interruptions
=> sauvegarder les états
• Prévoir le retour à l...
Design for speed
• Caching de contenus
• Actions instantanées et offline
• Amélioration de la vitesse perçue
• Adaptation ...
Caching de contenu
• Certains contenus sont accessibles en
offline (caching ou synchronisation)
• On peut utiliser ces con...
Actions instantanées
et offline
• L’action est ‘enregistrée’ immédiatement
• La requête est envoyée à la prochaine
connexi...
Adaptation au réseau
• A considérer : différencier le comportement
de l’appli en fonction du réseau
• Ex. pour une appli d...
Latence
temps
Latence
2G : jusqu’à 5 secondes !
temps
Latence
1 sec 2 sec 3 sec
Latence => Grouping
1 sec 2 sec 3 sec
Grouping + compression
(zip)
1 sec 2 sec 3 sec
Compression
• A considérer : lors de la requête
pour une liste, charger les
données des éléments
• Grâce à la compression,...
Vitesse perçue
A minima, améliorer la
perception de l’utilisateur :
• Chargement d’un minimum
de données en amont
• Action...
Vitesse perçue
A minima, améliorer la
perception de l’utilisateur :
• Chargement d’un minimum
de données en amont
• Action...
Tools
http://www.developereconomics.com/tools/
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Revolution Mobile @Web2day
Prochain SlideShare
Chargement dans…5
×

Revolution Mobile @Web2day

4 780 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 780
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 052
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/

×