Mobile Product

Alexandre
Jubien

@AlexJubien
myself@moi.me
myself@moi.me
Pioneer of mobile development
myself@moi.me
2003 - 2007

Games

Apps
myself@moi.me
2008 - 2012

Deezer
(main competitor of Spotify)

Viadeo
(main competitor of Linkedin)
ThinkMobile
Mobile & Tablets Consulting

Passion Expertise Commitment

Strategy Monetization M-Commerce
Webapps Innovation...
Mobile Product
= Product
Mobile Product
= Product
• Qui sont vos utilisateurs ?
• Qui sont vos clients ?
• Quel(s) problème(s) ont-ils ?

• Quelles...
Product that people love =

Build the right product

+
Build it right
Product that people love =

Customer development / Lean

+
Build it right
Product that people love =

Customer development / Lean

+
Agile / Scrum
Product that people love =

Customer development / Lean

+
Agile / Scrum
SVPG.com (Silicon Valley Product Group)
Lean Startup
•
•
•
•
•

Livre d’Eric Ries, mouvement Lean
‘‘Fail fast, suceed faster’’
Rencontrer les vrais besoins
Pivots...
Philosophie Lean
• Processus de découverte
• Ce que veulent les clients n’est pas
forcément ce qu’on a imaginé
• Il faut p...
Build – Measure – Learn
MVP
•
•
•
•

Minimum Viable Product
Preuve de concept
Valider les hypothèses, décrouvrir
On itère dessus ensuite
Release early
• Se confronter au plus tôt :
 Aux utilisateurs
 Aux problèmes
 Aux risques
• Rationaliser, prouver, conf...
http://fr.slideshare.net/brainmates/what-is-product-management-4905498
Agile
• SCRUM, Kanban, eXtreme Programming…
• Des pratiques et des outils pas trop
embêtants, que l’équipe choisit d’utili...
SCRUM
•
•
•
•
•

Vidéo Scrum in under 10 mns
Sprints de 2 semaines (reco)
Features in Product Backlog
Rituels : daily / we...
Itératif = droit au changement
changement

B
A

C
Lean, Agile, Design Thinking…

Un point commun :
l’équipe pluri-disciplinaire
/ la collaboration d’experts de métiers diff...
Lean, Agile, Design Thinking…

Un point commun :
l’équipe pluri-disciplinaire
/ la collaboration d’experts de métiers diff...
Transition
Smartphones ?
Smartphones ?
45%
Trafic web mondial ?
Trafic web mondial ?
10 à 20%
Plus de SIMs activées que
d’hommes sur terre
Mobile guru @TomiAhonen
Plus adopté que le stylo !!!
Mobile guru @TomiAhonen
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
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...
Monde digital / Monde physique
Monde digital / monde physique
Code barre
Code barre

Chasse aux trésors
Scanbucks
Code barre

Comparateur de prix
Prixing
QR Code

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

http://bit.ly/AlexJubien

Catalogue papier (But)
Magazines (Inrocks)
Affiches
Emballage Produits
(colle P...
Réalité augmentée
Réalité augmentée

Géoloc
Réalité augmentée

Géoloc

M-Paiement
Réalité augmentée

M-Commerce

Géoloc

M-Paiement
M Commerce

Tesco virtual supermarket in a subway station - South Korea
Ancrez dans le monde réel
Butler mode

• John Paul
Butler mode

• John Paul
• Et si votre service était
une personne ?

• Ex Deezer, Viadeo
Instantanéité
Météo
TV

5h
Météo
TV

Web

5h

5m
Météo
TV

Web

Mobile

5h

5m

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

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

5s

Besoin d’appeler
un contact pro

5s

Deezer

Viadeo
Quelle est la plus grosse
contrainte ?
Réseaux mobiles
• A considérer : différencier le comportement
de l’appli en fonction du réseau

• Ex. pour une appli de ré...
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...
Latence

temps
Latence

temps

2G : jusqu’à 5 secondes !
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 compres...
Vitesse perçue

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

A minima, améliorer la
perception de l’utilisateur :
• Chargement d’un minimum
de données en amont
• Actio...
Réduire les points
de friction
La friction

Ce qui empêche nos utilisateurs /
consommateurs d’avancer
Techcrunch: Reduce Friction, Increase Happiness
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...
Anti friction services
Solution :
Customer development
Customer development /
customer communication

• Vital sur mobile
• Commentaires app stores = la jungle

• Communication d...
Trend: InApp feedback
• Eviter les commentaires négatifs sur les app
stores
• Récupérer retours et suggestions, le tout
av...
InApp feedback
Etes-vous satisfait ?
InApp feedback
Etes-vous satisfait ?

Oui

Notez l’app !

App store
InApp feedback
Etes-vous satisfait ?

Oui

Notez l’app !

App store

Non

Donnez-nous votre
feedback
InApp feedback
Etes-vous satisfait ?

Oui

Notez l’app !

App store

Non

Donnez-nous votre
feedback
Hub des capteurs
Le Web
des objets connectés
Adidas miCoach
Suivi entrainement
sportif

miCoach
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 => mess...
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.1

Maîtrise du temps

0.3

Prévoir l’aveni...
Pouvoir

Version

Transmission de pensée

1.0

Omniscience

0.8

Télékinésie

0.1

Maîtrise du temps

0.3

Prévoir l’aveni...
Donnez du (super)pouvoir
à vos utilisateurs !
Pouvoir

Version

Transmission de pensée

1.0

Omniscience

0.8

Télékinésie

0.1

Maîtrise du temps

0.3

Prévoir l’aveni...
Mobile & Social
Réseaux sociaux

• 819M d’utilisateurs mobiles Facebook
• 60 à 80% des utilisateurs deTwitter
Réseaux sociaux

• 819M d’utilisateurs mobiles Facebook
• 60 à 80% des utilisateurs deTwitter
• Intégrés nativement
Facebook AppCenter
Social2App
Social2App

AppStore

Les partages génèrent des downloads
Social2App

AppStore

App
Social2App

AppStore

Smart App
Banner
App
Social2App
• Mécanique « partage  consommation »

• Puissant, moteur d’acquisition et de
rétention
• Moteur de croissance...
Facilité d’utilisation
Quelques don’ts
En mettre trop
Transposer ou encapsuler
du web
= vouloir faire rentrer
le web dans le mobile

@tomiahonen
Fire and Forget
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...
Ne pas réinventer
la roue
• Apple, Google, MS… ont investi des
millions dans l’UI/UX des OS
• Utilisez les guidelines / co...
Ne pas adapter
par plateforme
Getting traction
Apps que les gens aiment –
Qu’est ce qui est le plus
important ?
+ important

• Speed!
• 1ère impression
• Accomplir des tâches facilement
Cycle de vie
Découverte
(app store)
Cycle de vie
Découverte
(app store)

1ère ouverture /
1ères impressions
Cycle de vie
Découverte
(app store)

1ère ouverture /
1ères impressions

Tâches simples
Cycle de vie
Découverte
(app store)

1ère ouverture /
1ères impressions

Tâches simples

Tâches
Complexes
Cycle de vie
Découverte
(app store)

1ère ouverture /
1ères impressions

Mise à jour

Tâches simples

Tâches
Complexes
Cycle de vie
Découverte
(app store)

1ère ouverture /
1ères impressions

Mise à jour

Tâches simples

Tâches
Complexes
On boarding
Mettre plus de travail sur les
1ers contacts avec le service
(login, inscription, home, …)
On boarding
•

Tester régulièrement l’expérience
pour un nouvel utilisateur

•

Upsell features / call to action
Accomplir des tâches
facilement
Etapes
• Mobile Ready : Web services / APIs !

• Démarche produit
• Prototype fonctionnel

• Alpha / Beta
Démarche produit
• Regarder ce que font les autres
(compétiteurs, apps similaires, autres
domaines, …)
• Reviews sur les a...
Personas
• Personnages fictifs qui ont des vrais
problèmes
• Issus du monde réel (interviews, data, …)
• Prisme pour pense...
Personas

Source : http://mobile.smashingmagazine.com/2013/07/04/top-ten-app-part-1-idea-and-design/
Répondre au 3 principaux
use cases
• Les problèmes que votre service résout /
points de friction résolus via mobile
• Rech...
Répondre au 3 principaux
use cases
• Les problèmes que votre service résout /
points de friction résolus via mobile
• Rech...
Ordre de conception
• Cas d’usages prioritaires
Ordre de conception
• Cas d’usages prioritaires

• Cas d’usages secondaires
Ordre de conception
• Cas d’usages prioritaires

• Cas d’usages secondaires
• Choix de navigation
(home, topbar, menu, …)
Ordre de conception
• Cas d’usages prioritaires

• Cas d’usages secondaires
• Choix de navigation
(home, topbar, menu, …)
Ordre de conception
• Cas d’usages prioritaires

• Cas d’usages secondaires
• Choix de navigation
(home, topbar, menu, …)
...
Flux

Home

News

Profil
Flux

Home

News

Profil
Flux

Home

News

Profil
Flux

Home

News

Profil
Flux VS Ecran
Concevoir des flux
plutôt que des écrans
Design Studio
• Conception en team (pluri-disciplinaire)

• Extraire les bonnes idées
• Sketching
Design Studio : tellemen...
Itérer sur l’UI

• Commencer avec une UI simple
• Evoluer au fur et à mesure
• Se garder de vouloir obtenir tout de suite
...
Animations et effets ‘Wow!’
• Plus tard

• Ca ne fait pas le produit
• Tjrs plus impactant que prévu niveau charge
(réglag...
Nice but costly

Menu Path

Timer Path
Nice but costly

Menu Linkedin
Customisation
ex. Toolbar

Message Mail

Message Viadeo

Playlist Deezer
Prototype fonctionnel

• Explorer les pbs techniques
• Réduire les risques
• Tests utilisateurs

• Faire Alpha / Bêta test...
Prototype fonctionnel

• Explorer les pbs techniques
• Réduire les risques
• Tests utilisateurs

• Faire Alpha / Bêta test...
Mobile 1st

Source : Infographie UX by Octo : Responsive et Mobile First
Clarity.fm

Web Desktop
Produit mobile
Produit mobile
Produit mobile
Produit mobile
Produit mobile
Prochain SlideShare
Chargement dans…5
×

Produit mobile

1 155 vues

Publié le

Les slides du workshop "Produit mobile", qui fait partie du programme "ThinkMobile Workshops for Startups" - cf http://www.thinkmobile.fr

0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 155
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
87
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Produit mobile

  1. 1. Mobile Product Alexandre Jubien @AlexJubien
  2. 2. myself@moi.me
  3. 3. myself@moi.me Pioneer of mobile development
  4. 4. myself@moi.me 2003 - 2007 Games Apps
  5. 5. myself@moi.me 2008 - 2012 Deezer (main competitor of Spotify) Viadeo (main competitor of Linkedin)
  6. 6. ThinkMobile Mobile & Tablets Consulting 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. 7. Mobile Product = Product
  8. 8. Mobile Product = Product • Qui sont vos utilisateurs ? • Qui sont vos clients ? • Quel(s) problème(s) ont-ils ? • Quelles sont les solutions ? • …
  9. 9. Product that people love = Build the right product + Build it right
  10. 10. Product that people love = Customer development / Lean + Build it right
  11. 11. Product that people love = Customer development / Lean + Agile / Scrum
  12. 12. Product that people love = Customer development / Lean + Agile / Scrum SVPG.com (Silicon Valley Product Group)
  13. 13. Lean Startup • • • • • Livre d’Eric Ries, mouvement Lean ‘‘Fail fast, suceed faster’’ Rencontrer les vrais besoins Pivots Eviter le gâchis
  14. 14. Philosophie Lean • Processus de 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. 15. Build – Measure – Learn
  16. 16. MVP • • • • Minimum Viable Product Preuve de concept Valider les hypothèses, décrouvrir On itère dessus ensuite
  17. 17. Release early • Se confronter au plus tôt :  Aux utilisateurs  Aux problèmes  Aux risques • Rationaliser, prouver, confronter attention aux intuitions !
  18. 18. http://fr.slideshare.net/brainmates/what-is-product-management-4905498
  19. 19. Agile • SCRUM, Kanban, eXtreme Programming… • Des pratiques et des outils pas trop embêtants, que l’équipe choisit d’utiliser
  20. 20. SCRUM • • • • • Vidéo Scrum in under 10 mns Sprints de 2 semaines (reco) Features in Product Backlog Rituels : daily / weekly, sprint planing, démos Rétrospectives
  21. 21. Itératif = droit au changement changement B A C
  22. 22. Lean, Agile, Design Thinking… Un point commun : l’équipe pluri-disciplinaire / la collaboration d’experts de métiers différents
  23. 23. Lean, Agile, Design Thinking… Un point commun : l’équipe pluri-disciplinaire / la collaboration d’experts de métiers différents => Inclure les développeurs !
  24. 24. Transition
  25. 25. Smartphones ?
  26. 26. Smartphones ? 45%
  27. 27. Trafic web mondial ?
  28. 28. Trafic web mondial ? 10 à 20%
  29. 29. Plus de SIMs activées que d’hommes sur terre Mobile guru @TomiAhonen
  30. 30. Plus adopté que le stylo !!! Mobile guru @TomiAhonen
  31. 31. Révolutionnaire
  32. 32. Pourquoi ?
  33. 33. Partout, tout le temps
  34. 34. Même là – 75% !
  35. 35. Parité
  36. 36. There’s an app for that
  37. 37. 1er appareil connecté qu’on a toujours sur soi
  38. 38. Compagnon de vie
  39. 39. Compagnon de vie Vie = gens moments lieux objets
  40. 40. Compagnon de vie Vie = gens moments lieux objets Facebook Path Foursquare Pinterest
  41. 41. Design for interruption PC/Tablet = Scubadiving Mobile = Snorkeling Rachel @Hinman
  42. 42. Design for interruption • Attention partielle • Prévoir les interruptions => sauvegarder les états • Prévoir le retour à l’application
  43. 43. 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)
  44. 44. Monde digital / Monde physique
  45. 45. Monde digital / monde physique
  46. 46. Code barre
  47. 47. Code barre Chasse aux trésors Scanbucks
  48. 48. Code barre Comparateur de prix Prixing
  49. 49. QR Code 30% http://bit.ly/AlexJubien
  50. 50. QR Code • • • • http://bit.ly/AlexJubien Catalogue papier (But) Magazines (Inrocks) Affiches Emballage Produits (colle Pater) • Street marketing • …
  51. 51. Réalité augmentée
  52. 52. Réalité augmentée Géoloc
  53. 53. Réalité augmentée Géoloc M-Paiement
  54. 54. Réalité augmentée M-Commerce Géoloc M-Paiement
  55. 55. M Commerce Tesco virtual supermarket in a subway station - South Korea
  56. 56. Ancrez dans le monde réel
  57. 57. Butler mode • John Paul
  58. 58. Butler mode • John Paul • Et si votre service était une personne ? • Ex Deezer, Viadeo
  59. 59. Instantanéité
  60. 60. Météo TV 5h
  61. 61. Météo TV Web 5h 5m
  62. 62. Météo TV Web Mobile 5h 5m 5s
  63. 63. Vos désirs exaucés
  64. 64. Vos désirs exaucés Envie d’écouter une musique Deezer 5s
  65. 65. Vos désirs exaucés Envie d’écouter une musique 5s Besoin d’appeler un contact pro 5s Deezer Viadeo
  66. 66. Quelle est la plus grosse contrainte ?
  67. 67. Réseaux mobiles • 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
  68. 68. 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, …
  69. 69. 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 !
  70. 70. Latence temps
  71. 71. Latence temps 2G : jusqu’à 5 secondes !
  72. 72. Latence 1 sec 2 sec 3 sec
  73. 73. Latence => Grouping 1 sec 2 sec 3 sec
  74. 74. Grouping + compression (zip) 1 sec 2 sec 3 sec
  75. 75. 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
  76. 76. Vitesse perçue A minima, améliorer la perception de l’utilisateur : • Chargement d’un minimum de données en amont • Actions possibles
  77. 77. 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
  78. 78. Réduire les points de friction
  79. 79. La friction Ce qui empêche nos utilisateurs / consommateurs d’avancer
  80. 80. Techcrunch: Reduce Friction, Increase Happiness
  81. 81. Techcrunch: Reduce Friction, Increase Happiness Location de voiture entre particuliers Pb = récupérer les clés
  82. 82. Techcrunch: Reduce Friction, Increase Happiness Location de voiture entre particuliers Pb = récupérer les clés Getaround Carkit
  83. 83. Anti friction services
  84. 84. Solution : Customer development
  85. 85. Customer development / customer communication • Vital sur mobile • Commentaires app stores = la jungle • Communication directe / support • Learn
  86. 86. 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
  87. 87. InApp feedback Etes-vous satisfait ?
  88. 88. InApp feedback Etes-vous satisfait ? Oui Notez l’app ! App store
  89. 89. InApp feedback Etes-vous satisfait ? Oui Notez l’app ! App store Non Donnez-nous votre feedback
  90. 90. InApp feedback Etes-vous satisfait ? Oui Notez l’app ! App store Non Donnez-nous votre feedback
  91. 91. Hub des capteurs
  92. 92. Le Web des objets connectés
  93. 93. Adidas miCoach Suivi entrainement sportif miCoach
  94. 94. Thermostat Nest
  95. 95. On ajoute des capteurs, on se rajoute des pouvoirs
  96. 96. Des supers pouvoirs ?
  97. 97. Qui est télépathe ?
  98. 98. Transmission de pensée 1.0 : • Latence de 30 secondes • Nécessite de parler à voie haute • Ne marche pas toujours => messagerie
  99. 99. Pouvoirs
  100. 100. 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
  101. 101. Pouvoir Version Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.1 Maîtrise du 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
  102. 102. Pouvoir Version Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.1 Maîtrise du 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
  103. 103. Donnez du (super)pouvoir à vos utilisateurs !
  104. 104. Pouvoir Version Transmission de pensée 1.0 Omniscience 0.8 Télékinésie 0.1 Maîtrise du 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
  105. 105. Mobile & Social
  106. 106. Réseaux sociaux • 819M d’utilisateurs mobiles Facebook • 60 à 80% des utilisateurs deTwitter
  107. 107. Réseaux sociaux • 819M d’utilisateurs mobiles Facebook • 60 à 80% des utilisateurs deTwitter • Intégrés nativement
  108. 108. Facebook AppCenter
  109. 109. Social2App
  110. 110. Social2App AppStore Les partages génèrent des downloads
  111. 111. Social2App AppStore App
  112. 112. Social2App AppStore Smart App Banner App
  113. 113. Social2App • Mécanique « partage  consommation » • Puissant, moteur d’acquisition et de rétention • Moteur de croissance virale • Un peu lourd techniquement / coûteux
  114. 114. Facilité d’utilisation
  115. 115. Quelques don’ts
  116. 116. En mettre trop
  117. 117. Transposer ou encapsuler du web
  118. 118. = vouloir faire rentrer le web dans le mobile @tomiahonen
  119. 119. Fire and Forget
  120. 120. Vouloir (trop) innover sur l’UI/UX
  121. 121. 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, …
  122. 122. Ne pas réinventer la roue • 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
  123. 123. Ne pas adapter par plateforme
  124. 124. Getting traction
  125. 125. Apps que les gens aiment – Qu’est ce qui est le plus important ?
  126. 126. + important • Speed! • 1ère impression • Accomplir des tâches facilement
  127. 127. Cycle de vie Découverte (app store)
  128. 128. Cycle de vie Découverte (app store) 1ère ouverture / 1ères impressions
  129. 129. Cycle de vie Découverte (app store) 1ère ouverture / 1ères impressions Tâches simples
  130. 130. Cycle de vie Découverte (app store) 1ère ouverture / 1ères impressions Tâches simples Tâches Complexes
  131. 131. Cycle de vie Découverte (app store) 1ère ouverture / 1ères impressions Mise à jour Tâches simples Tâches Complexes
  132. 132. Cycle de vie Découverte (app store) 1ère ouverture / 1ères impressions Mise à jour Tâches simples Tâches Complexes
  133. 133. On boarding Mettre plus de travail sur les 1ers contacts avec le service (login, inscription, home, …)
  134. 134. On boarding • Tester régulièrement l’expérience pour un nouvel utilisateur • Upsell features / call to action
  135. 135. Accomplir des tâches facilement
  136. 136. Etapes • Mobile Ready : Web services / APIs ! • Démarche produit • Prototype fonctionnel • Alpha / Beta
  137. 137. Démarche produit • Regarder ce 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, …
  138. 138. Personas • Personnages fictifs qui 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)
  139. 139. Personas Source : http://mobile.smashingmagazine.com/2013/07/04/top-ten-app-part-1-idea-and-design/
  140. 140. Répondre au 3 principaux 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, …)
  141. 141. Répondre au 3 principaux 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
  142. 142. Ordre de conception • Cas d’usages prioritaires
  143. 143. Ordre de conception • Cas d’usages prioritaires • Cas d’usages secondaires
  144. 144. Ordre de conception • Cas d’usages prioritaires • Cas d’usages secondaires • Choix de navigation (home, topbar, menu, …)
  145. 145. Ordre de conception • Cas d’usages prioritaires • Cas d’usages secondaires • Choix de navigation (home, topbar, menu, …)
  146. 146. Ordre de conception • Cas d’usages prioritaires • Cas d’usages secondaires • Choix de navigation (home, topbar, menu, …) • Patterns des sous-écrans • Ecrans des contenus
  147. 147. Flux Home News Profil
  148. 148. Flux Home News Profil
  149. 149. Flux Home News Profil
  150. 150. Flux Home News Profil
  151. 151. Flux VS Ecran Concevoir des flux plutôt que des écrans
  152. 152. Design Studio • Conception en team (pluri-disciplinaire) • Extraire les bonnes idées • Sketching Design Studio : tellement UX … tellement créatif … tellement agile !
  153. 153. 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
  154. 154. 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
  155. 155. Nice but costly Menu Path Timer Path
  156. 156. Nice but costly Menu Linkedin
  157. 157. Customisation ex. Toolbar Message Mail Message Viadeo Playlist Deezer
  158. 158. Prototype fonctionnel • Explorer les pbs techniques • Réduire les risques • Tests utilisateurs • Faire Alpha / Bêta tester
  159. 159. Prototype fonctionnel • Explorer les pbs techniques • Réduire les risques • Tests utilisateurs • Faire Alpha / Bêta tester
  160. 160. Mobile 1st Source : Infographie UX by Octo : Responsive et Mobile First
  161. 161. Clarity.fm Web Desktop

×