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...)

1. Révolution mobile
@AlexJubien

2. @AlexJubien

3. Pioneer of mobile development

4. 2003 - 2007
Games

5. 2003 - 2007
Games Apps

6. Deezer
2008 - 2012

7. Deezer Viadeo
2008 - 2012

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

10. Let’s go!

11. Smartphones ?

12. Smartphones ?
49%

13. Trafic web mondial ?

14. Trafic web mondial ?
15 à 20%

15. Plus de SIMs activées que
d’hommes sur terre
Mobile guru @TomiAhonen

16. Plus adopté que le stylo !!!
Mobile guru @TomiAhonen

18. /
Angry
Birds
Man on the
moon

20. Révolutionnaire

21. Pourquoi ?

22. Partout, tout le temps

23. Même là – 75% !

24. Parité

25. There’s an app for that

26. 1er appareil connecté
qu’on a toujours sur soi

27. Compagnon de vie

28. Compagnon de vie
Vie
=
gens moments lieux objets

29. Compagnon de vie
Vie
=
gens moments lieux objets
Facebook Path Foursquare Pinterest

30. Monde digital / Monde physique

31. Monde digital / monde physique

32. Code barre

33. Code barre
Chasse aux trésors
Scanbucks
Comparateur de prix
Prixing

34. QR Code
30%
http://bit.ly/AlexJubien

35. QR Code
• Catalogue papier (But)
• Magazines (Inrocks)
• Affiches
• Emballage Produits
(colle Pater)
• Street marketing
• …http://bit.ly/AlexJubien

37. Réalité augmentée

38. Réalité augmentée Géoloc

39. Réalité augmentée Géoloc
M-Paiement

40. Réalité augmentée Géoloc
M-Commerce M-Paiement

41. M Commerce
Tesco virtual supermarket in a subway station - South Korea

42. Le mariage de la vente
physique et digitale
Source : Kontestapp - http://fr.slideshare.net/Kontest/strategie-web-tostorefr

43. M2Store / trafic en magasin
Bon plans en magasin
PassVip
Collecte de points
Shopkick

44. PassBook
• Quoi : coupons, tickets, cartes de fidélité,
bons d’achat, …

45. iBeacon

46. iBeacon

47. Instantanéité

48. 5 h
TV
Météo

49. 5 h
TV Web
5 m
Météo

50. 5 h
TV Web
5 m
Mobile
5 s
Météo

51. Vos désirs exaucés

52. Vos désirs exaucés
5 s
Envie d’écouter
une musique
Deezer

53. Vos désirs exaucés
5 s
Envie d’écouter
une musique
Besoin d’appeler
un contact pro
5 s
Deezer
Viadeo

54. Facilité d’utilisation

55. Facilité d’utilisation

56. Réduire les points
de friction

57. La friction
Ce qui empêche nos utilisateurs /
consommateurs d’avancer

58. Anti friction services

59. Support
Video InApp LiveChat (EN)

60. Techcrunch: Reduce Friction, Increase Happiness

61. Location de voiture entre
particuliers
Pb = récupérer les clés
Techcrunch: Reduce Friction, Increase Happiness

62. Location de voiture entre
particuliers
Pb = récupérer les clés
Getaround Carkit
Techcrunch: Reduce Friction, Increase Happiness

63. Hub des capteurs

64. IoT
/
Objets Connectés

65. miCoach
Adidas miCoach
Suivi entrainement
sportif

66. Thermostat Nest

67. On ajoute des capteurs,
on se rajoute des pouvoirs

68. Des supers pouvoirs ?

69. Qui est télépathe ?

70. Transmission de pensée 1.0 :
• Latence de 30 secondes
• Nécessite de parler à voie haute
• Ne marche pas toujours => messagerie

71. Pouvoirs

72. 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

73. 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

74. 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

75. 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

76. Donnez du (super)pouvoir
à vos utilisateurs / clients !

77. Clivage ?

78. EM Countries
Cours des céréales
par SMS

79. EM Countries
Transfert d’argent
par SMS

80. Et maintenant ?

81. Révolution tablette ?

82. Transport
TV
Info
Cinéma
Entreprise
Art
Voyage
Cuisine
Santé
Banque
Education
Musique
Presse
Livres
Sécurité
Tourisme
Jeux
Shopping Armée
Mode

83. Transport
TV
Info
Cinéma
Entreprise
Art
Voyage
Cuisine
Santé
Banque
Education
Musique
Presse
Livres
Sécurité
Tourisme
Jeux
Shopping Armée
Mode

84. 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

85. Disruption

93. ? ? ? ? ??

94. Google Glasses

95. Eye control

97. Tatouages électroniques

98. Allons-nous devenir des
machines ?

99. Etape : interagir avec des
machines qui nous ressemblent

100. Etape : interagir avec des
machines qui nous ressemblent

101. L’interface homme machines
ultime

102. The scary slides

103. Faisons nous un peu peur

104. Une entreprise à la pointe de :
Mobile
Information
Intelligence artificielle
Biotech
Robotique
…

106. « Nous avons peur de Google »
« La stratégie secrète de Google apparaît… »

107. Don’t be evil
(ouf !)

108. Transhumanisme

109. www.sarifindustries.com
L’homme augmenté :

110. Êtes-vous prêts à devenir des
machines ?

111. Qu’est ce qui va nous faire
craquer ?

112. L’homme qui vivra 1000 ans
est déjà né
Laurent Alexandre – TEDx Paris

115. Qqs Recos

116. Mobile product = product

117. Build the right product
+
Build it right
and nice !
Product that people love =

118. Customer development / Lean
Startup
+
Build it right
and nice !
Product that people love =

119. Customer development / Lean
Startup
+
Agile / Scrum
and nice !
Product that people love =

120. Customer development / Lean
Startup
+
Agile / Scrum
Design / UX
Product that people love =

121. Customer development /
customer communication
• Vital sur mobile
• Commentaires app stores = la jungle
• Communication directe / support
• Learn

122. Trend : InApp feedback
Etes-vous satisfait ?

123. InApp feedback
Etes-vous satisfait ?
Notez l’app !
Oui
App store

124. InApp feedback
Etes-vous satisfait ?
Notez l’app !
Donnez-nous votre
feedback
Oui Non
App store

125. InApp feedback
Etes-vous satisfait ?
Notez l’app !
Donnez-nous votre
feedback
Oui Non
App store

126. 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

127. UI: Keep it simple

128. En mettre trop

129. Vouloir (trop) innover sur
l’UI/UX

130. 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, …

131. 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

132. Nice but costly
Menu Path Timer Path

133. Nice but costly
Menu Linkedin

134. Design / customisation
ex. Toolbar (iOS6)
Message Mail Message Viadeo Playlist Deezer

135. Design / customisation
ex. Toolbar (iOS7)
Message Mail Message Viadeo Playlist Deezer

136. 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

137. Question :
Qui connaît parfaitement les
plateformes mobiles ?

138. Méthodos

139. Inclure les développeurs
dans la conception !

140. 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é

141. 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

142. A
B
C
Itératif = droit au changement
changement

143. 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

144. 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

145. 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

146. 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

147. 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

148. 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

149. 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

150. 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

151. 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

152. 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

153. Mobile 1st
Source : Infographie UX by Octo : Responsive et Mobile First

154. Recos produit mobile

155. On boarding
Mettre plus de travail sur les
1ers contacts avec le service
(login, inscription, home, …)

156. • Tester régulièrement l’expérience
pour un nouvel utilisateur
• Upsell features / call to action
On boarding

157. Design for interruption
PC/Tablet = Scubadiving Mobile = Snorkeling
Rachel @Hinman

158. Design for interruption
• Attention partielle
• Prévoir les interruptions
=> sauvegarder les états
• Prévoir le retour à l’application

159. 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)

160. 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

161. 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, …

162. 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 !

163. 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

164. Latence
temps

165. Latence
2G : jusqu’à 5 secondes !
temps

166. Latence
1 sec 2 sec 3 sec

167. Latence => Grouping
1 sec 2 sec 3 sec

168. Grouping + compression
(zip)
1 sec 2 sec 3 sec

169. 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

170. Vitesse perçue
A minima, améliorer la
perception de l’utilisateur :
• Chargement d’un minimum
de données en amont
• Actions possibles

171. 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

172. Tools

175. http://www.developereconomics.com/tools/