Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Le Prototypage Agile (Agile Tour Toulouse 2011)
1. www.pia-conseil.com
Prototypage Agile
PIA PIA
par Philippe Chaurand @anomes
AgileTour Toulouse 2011
Prototypage Agile / AgileTour Toulouse 2011 1
2. Mon Objectif
Hello !
Je suis ingénieur IHM
Prototyper pour créer de la valeur
Prototyper pour créer utile et utilisable
Prototyper dans une équipe agile
Prototypage Agile / AgileTour Toulouse 2011 2
3. Qui est PIA ?
Cabinet de conseil en système d'information,
spécialiste de l’expérience utilisateur
et des usages innovants.
Prototypage Agile / AgileTour Toulouse 2011 3
8. Mon plan
L’approche de PIA Créer de la valeur Créer utile et utilisable
vue d’ensemble prototypage & cas pratique
vous êtes ici sortie
Prototypage Agile / AgileTour Toulouse 2011 8
9. L’approche de PIA Créer de la valeur Créer utile et utilisable
L’approche de PIA
Prototypage Agile / AgileTour Toulouse 2011 9
10. L’approche de PIA Créer de la valeur Créer utile et utilisable
Mais : qu’est-ce que prototyper ?
C’est une démarche issue de la culture de l’échec :
• être prêt à échouer pour progresser
• explorer puis sélectionner
Prototypage Agile / AgileTour Toulouse 2011 10
11. L’approche de PIA Créer de la valeur Créer utile et utilisable
prototypage Agile ?
Prototyper c’est :
• donner une vision du produit
• vérifier les hypothèses et réagir
• affiner par itération
• communiquer et collaborer ensemble
Le prototypage est intrinsèquement lié à l’agilité.
Prototypage Agile / AgileTour Toulouse 2011 11
12. L’approche de PIA Créer de la valeur Créer utile et utilisable
L’utilisateur au centre de nos 2 axes
créer de la valeur créer utile et utilisable
proposition prototyper
de valeurs
tester tester
dialogue
et tests
développer
bénéfices
Prototypage Agile / AgileTour Toulouse 2011 12
13. L’approche de PIA Créer de la valeur Créer utile et utilisable
L’équipe impliquée partout
créer de la valeur créer utile et utilisable
proposition prototyper
de valeurs
tester tester
dialogue
et tests
développer
bénéfices
Prototypage Agile / AgileTour Toulouse 2011 13
14. L’approche de PIA Créer de la valeur Créer utile et utilisable
Parallèle avec
David Guetta
Prototypage Agile / AgileTour Toulouse 2011 14
15. L’approche de PIA Créer de la valeur Créer utile et utilisable
LA bonne note de David Guetta
Prototypage Agile / AgileTour Toulouse 2011 15
16. L’approche de PIA Créer de la valeur Créer utile et utilisable
La méthodologie Guetta
créer de la valeur créer populaire et dansant
proposition de valeurs
prototyper
une ambiance rock’n roll dans le taxi
populaire & vendeur
tester tester
1 jour avec Fred Rister
en concert
bénéfices développer
revenus & célébrité
dans l’avion
Prototypage Agile / AgileTour Toulouse 2011 16
17. L’approche de PIA Créer de la valeur Créer utile et utilisable
Et avec une seule note !
Prototypage Agile / AgileTour Toulouse 2011 17
18. L’approche de PIA Créer de la valeur Créer utile et utilisable
Pour aller plus loin
Customer development Product development
Prototypage Agile / AgileTour Toulouse 2011 18
19. L’approche de PIA Créer de la valeur Créer utile et utilisable
Créer de la valeur
Prototypage Agile / AgileTour Toulouse 2011 19
20. L’approche de PIA Créer de la valeur Créer utile et utilisable
Pourquoi ?
Engager la conversation
avec l’utilisateur et/ou le client
utilisateur = client (B2C)
utilisateur ≠ client (B2B)
Prototypage Agile / AgileTour Toulouse 2011 20
21. L’approche de PIA Créer de la valeur Créer utile et utilisable
Démarrer le premier axe
créer de la valeur
créer utile et utilisable
L’utilisateur impliqué dès le début en mode collaboratif
Prototypage Agile / AgileTour Toulouse 2011 21
22. L’approche de PIA Créer de la valeur Créer utile et utilisable
L’exemple de Sharypic.COM
L’idée : rassembler les
photos d’un évènement.
e va leur
Pic-tweetez avec
p osit ion d
Pro
#att11
les photos sur
att11.sharypic.com
Prototypage Agile / AgileTour Toulouse 2011 22
23. L’approche de PIA Créer de la valeur Créer utile et utilisable
Notre 1er outil : les personas (simplifiées)
Des profils contextualisés pour développer l’empathie
★ A créer et partager en équipe
★ Explorer puis en sélectionner 4 ou 5
★ Autres personas : les side-personas et out-personas
Stéphane
C'est un commercial de 27 ans, à l'aise avec les différents services en ligne,
Pierre
mais sans être à la pointe.
C'est un infirmier de 52 ans.
Il utilise quotidiennement le mail et Facebook. Il achète et fait un maximum de
démarches en ligne (par exemple,l'aise. Il pratique la photo numérique
Intéressé par internet, il y est à ses impôts).
Myriam
régulièrement, et cherche Windows et iPhone avec lequel il prend souvent
un portable sous à faire partager sa production via son compte Picasa.
Il possèdeC'est une étudiante de 21 ans.
des photos viapossède un(ami de et utilise ses matchs de foot le samedi matin !
Cependant, les gens autour delui n'ont Lightroom. contact avec
Elle Instagram. Surtout Stéphane) peu de
Julien Reflex lors de que
l'informatique. C'est un jeune ingénieur de 25 ans. Il est férutravaille plus certaines
Entre amis, elle poste ses photos sur Facebook, mais de technologie, qu'il aime faire
Il possède une tour sous Windows et un appareil photo compact.
d'entre elles pour lesses amis, sur qui le valorise en société.
découvrir à partager ce Flickr. Elle utilise un portable sous Windows,
Il Jeanne
aime tester les nouveautés mais subsiste chez lui une barrière à l'achat et
mais pense à acheter un MacBook pour Noël.
une méfiance du spam. 47 ans, sans compte Facebook et pas très intéressée
C'est une secrétaire de
Il par internet. MacBookPro, un Androïd (avec lequel il prend quelques photos
possède un
de temps en temps) et unàcompte Facebook.
Elle a une forte barrière l'achat en ligne.
Elle possède une tour sous Windows.
Prototypage Agile / AgileTour Toulouse 2011 23
24. L’approche de PIA Créer de la valeur Créer utile et utilisable
Notre 2nd outil : les scenarii d’usage
Bien comprendre le besoin, avant de chercher une solution
UC.1 Rassembler les photos dʼun évènement sur Sharypic
Acteur principal Stéphane
Pré-conditions Julien a découvert le service par le bouche
à oreille ou Twitter et il a été séduit.
Scénario principal
1. Julien propose à Stéphane de tester Sharypic
2. Stéphane découvre Sharypic et crée un compte
3. Stéphane crée un évènement pour le mariage de ce weekend
4. Stéphane enrichit lʼévènement avec ses propres photos
5. Stéphane avertit Pierre que des photos sont sur Sharypic
6. Pierre ajoute ses propres photos via upload
7. Pierre en parle à Jeanne
8. Jeanne décide dʼimprimer un album photo
9. Pierre aide Jeanne à imprimer lʼalbum photo
Etapes alternatives
5a. Stéphane avertit Myriam que des photos sont sur Sharypic
1. Myriam se connecte via Facebook
2. Myriam consulte les photos de lʼévènement
3. Myriam ajoute une photo via Facebook
7a. Pierre connecte son appareil photo
1. Le système détecte automatiquement lʼappareil
2. Le système demande à Pierre les photos à ajouter
Prototypage Agile / AgileTour Toulouse 2011 24
25. L’approche de PIA Créer de la valeur Créer utile et utilisable
Notre baromètre : les entretiens
Les personas/scenarii ne sont qu’un référentiel, qu’il faut tester.
Vérifier l’intuition.
“ Si j'avais demandé à mes clients ce
qu'ils souhaitaient, ils m'auraient dit :
un cheval plus rapide. “
l’effet focus group selon Henry Ford
Prototypage Agile / AgileTour Toulouse 2011 25
26. L’approche de PIA Créer de la valeur Créer utile et utilisable
Exemple de premiers jets
SHARE
the photos of your event
in one single place
Organize Comment Invite
Prototypage Agile / AgileTour Toulouse 2011 26
27. L’approche de PIA Créer de la valeur Créer utile et utilisable
Itérer
Définir des critères de réussite (DoD)
★ l’équipe est tombée d’accord
★ beaucoup de contacts
★ des promesses d’achat
★ un time-to-market respecté
★ l’instinct
“ Tu m'emmerde... avec ta question ! “
l’instinct selon Marc Lièvremont
Prototypage Agile / AgileTour Toulouse 2011 27
28. L’approche de PIA Créer de la valeur Créer utile et utilisable
Le résultat de Sharypic.COM
★ Une illustration qui exprime le contexte
★ Le pitch de la valeur apportée
★ Un exemple de l’interface
★ Un point d’entrée pour “voir”
★ Un point d’entrée pour “tester”
★ Proposition de valeur plus détaillée
★ Un moyen pour entrer du feedback
C’est ce qui va être vendu.
L’expression doit en être limpide.
Prototypage Agile / AgileTour Toulouse 2011 28
29. L’approche de PIA Créer de la valeur Créer utile et utilisable
Cette proposition de valeur est un prototype !
Une vision grossière mais
valorisée du produit
Prototypage Agile / AgileTour Toulouse 2011 29
30. L’approche de PIA Créer de la valeur Créer utile et utilisable
Communiquer avec ce prototype
Utilisateurs
★ partager une vision
★ rationnaliser intérêt
★ prioriser
★ planifier
Proposition
de valeurs
faisabilité essence
L’équipe Investisseurs
Prototypage Agile / AgileTour Toulouse 2011 30
31. L’approche de PIA Créer de la valeur Créer utile et utilisable
D’autres exemples
Prototypage Agile / AgileTour Toulouse 2011 31
32. L’approche de PIA Créer de la valeur Créer utile et utilisable
Engager la conversation !
Vos utilisateurs sont les meilleurs vendeurs !
Prototypage Agile / AgileTour Toulouse 2011 32
33. L’approche de PIA Créer de la valeur Créer utile et utilisable
Créer utile et utilisable
Prototypage Agile / AgileTour Toulouse 2011 33
34. L’approche de PIA Créer de la valeur Créer utile et utilisable
Où en sommes-nous ?
+
★ Les utilisateurs sont impliqués
★ La proposition de valeurs les intéresse
★ L’équipe est fédérée autour de cette vision
★ Les US sont créées et priorisées
Il existe donc un MVP, +
un Minimum Viable Product
+
User Story
Prototypage Agile / AgileTour Toulouse 2011 34
35. L’approche de PIA Créer de la valeur Créer utile et utilisable
Commencer par le MVP
créer de la valeur
proposition prototyper
de valeurs
+
MVP tester tester
développer
Prototypage Agile / AgileTour Toulouse 2011 35
36. L’approche de PIA Créer de la valeur Créer utile et utilisable
Rassembler : la réunion de co-design
Explorer. Faire fonctionner. Pas d’ergonomie.
Prototypage Agile / AgileTour Toulouse 2011 36
37. L’approche de PIA Créer de la valeur Créer utile et utilisable
Je consolide : cinématiques & zonings
Organiser et structurer l’information.
Prototypage Agile / AgileTour Toulouse 2011 37
38. L’approche de PIA Créer de la valeur Créer utile et utilisable
Je consolide : les patterns d’interface
Ne pas réinventer la roue.
Prototypage Agile / AgileTour Toulouse 2011 38
39. L’approche de PIA Créer de la valeur Créer utile et utilisable
Resultat : des prototypes d’interface
papier <HTML>
Prototypage Agile / AgileTour Toulouse 2011 39
40. L’approche de PIA Créer de la valeur Créer utile et utilisable
Consolidons encore : le design visuel
C’est la partie la plus aboutie de l’ergonomie.
Si peu de compétence : RESTER SIMPLE !
Prototypage Agile / AgileTour Toulouse 2011 40
41. L’approche de PIA Créer de la valeur Créer utile et utilisable
Un résultat plus abouti
Prototypage Agile / AgileTour Toulouse 2011 41
42. L’approche de PIA Créer de la valeur Créer utile et utilisable
Organisation du travail
cinematiques
zonings
réunion de co-design patterns prototypes d’interface
visual design
Prototypage Agile / AgileTour Toulouse 2011 42
43. L’approche de PIA Créer de la valeur Créer utile et utilisable
Tester
Mode opératoire
★ présenter un contexte
★ donner un objectif
★ observer / inciter la pensée à voix haute
★ questions ouvertes
papier <HTML>
Prototypage Agile / AgileTour Toulouse 2011 43
44. L’approche de PIA Créer de la valeur Créer utile et utilisable
Développer rapidement
Petits lots. Petites itérations de 0 à 2 semaines.
le prototype fonctionnel perpétuel
avant après
Prototypage Agile / AgileTour Toulouse 2011 44
45. L’approche de PIA Créer de la valeur Créer utile et utilisable
Test en direct ...
“ Est-ce que tu pourrais ajouter la photo de Super Mario ? ”
Prototypage Agile / AgileTour Toulouse 2011 45
46. L’approche de PIA Créer de la valeur Créer utile et utilisable
Et recommencer ...
créer de la valeur
un produit agile
prototyper
Tester cette valeur
tester tester
développer
Prototypage Agile / AgileTour Toulouse 2011 46
48. A retenir
Créer de la valeur pour engager la conversation avec l’utilisateur
Tester cette valeur grâce à de très courtes itérations
Se servir des prototypes créés pour communiquer en interne/externe
Prototypage Agile / AgileTour Toulouse 2011 48
49. Chouchoutez vos co-équipiers
vous aurez du plaisir à travailler ensemble !
Chouchoutez vos utilisateurs
ce sont les meilleurs vendeurs !
Prototypage Agile / AgileTour Toulouse 2011 49
50. Slides, bibliographie et making-of
bientôt disponibles sur le blog PIA
blog.pia-conseil.com
Prototypage Agile / AgileTour Toulouse 2011 50