Le Prototypage Agile (Agile Tour Toulouse 2011)

Prototypage Agile / AgileTour Toulouse 2011

Prototypage Agile

1

par Philippe ChaurandAgileTour Toulouse 2011

@anomes

PIA PIA

www.pia-conseil.com

http://www.pia-conseil.com

http://www.pia-conseil.com


Mon Objectif

2

Hello !Je suis ingénieur IHM

Prototyper pour créer de la valeurPrototyper pour créer utile et utilisablePrototyper dans une équipe agile


Qui est PIA ?

3

Cabinet de conseil en système d'information,

spécialiste de l’expérience utilisateur

et des usages innovants.

Prototypage Agile / AgileTour Toulouse 2011 4

ENTREPRISES

EDITEURS & IT

RÉALISATIONCONSEIL


Focus sur Eskimo

5

e-skimo.com

http://blog.pia-conseil.com/



Exemple de composants adaptatifs

6

e-skimo.com




Prototypage Agile


Mon plan

8

L’approche de PIA Créer de la valeur Créer utile et utilisable

vous êtes ici sortie

vue d’ensemble prototypage & cas pratique



L’approche de PIA

9



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

10



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

11



L’utilisateur au centre de nos 2 axes

12

créer utile et utilisable

prototyper

tester

développer

tester

créer de la valeur

propositionde valeurs

bénéfices

dialogueet tests



L’équipe impliquée partout

13


prototyper

tester

développer

tester

créer de la valeur


bénéfices

dialogueet tests



Parallèle avecDavid Guetta

14



LA bonne note de David Guetta

15



La méthodologie Guetta

16

proposition de valeurs

une ambiance rock’n rollpopulaire & vendeur

bénéficesrevenus & célébrité

créer de la valeur

prototyper

développerdans l’avion

tester tester

dans le taxi

en concert avec Fred Rister

créer populaire et dansant

1 jour



17

Et avec une seule note !



Pour aller plus loin

18

Product developmentCustomer development



19

Créer de la valeur



Engager la conversationavec l’utilisateur et/ou le client

utilisateur = client (B2C)utilisateur ≠ client (B2B)

20

Pourquoi ?



Démarrer le premier axe

21

créer de la valeur


L’utilisateur impliqué dès le début en mode collaboratif



L’exemple de Sharypic.COM

22

Pic-tweetez avec#att11

L’idée : rassembler les photos d’un évènement.

Proposition de valeur

les photos suratt11.sharypic.com



Notre 1er outil : les personas (simplifiées)

23

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éphaneC'est un commercial de 27 ans, à l'aise avec les différents services en ligne, mais sans être à la pointe.Il utilise quotidiennement le mail et Facebook. Il achète et fait un maximum de démarches en ligne (par exemple, ses impôts).Il possède un portable sous Windows et iPhone avec lequel il prend souvent des photos via Instagram. Surtout lors de ses matchs de foot le samedi matin !

PierreC'est un infirmier de 52 ans.Intéressé par internet, il y est à l'aise. Il pratique la photo numérique régulièrement, et cherche à faire partager sa production via son compte Picasa. Cependant, les gens autour de lui n'ont que peu de contact avec l'informatique.Il possède une tour sous Windows et un appareil photo compact.

MyriamC'est une étudiante de 21 ans.Elle possède un Reflex et utilise Lightroom.Entre amis, elle poste ses photos sur Facebook, mais travaille plus certaines d'entre elles pour les partager sur Flickr. Elle utilise un portable sous Windows, mais pense à acheter un MacBook pour Noël.

Julien (ami de Stéphane)C'est un jeune ingénieur de 25 ans. Il est féru de technologie, qu'il aime faire découvrir à ses amis, ce qui le valorise en société.Il aime tester les nouveautés mais subsiste chez lui une barrière à l'achat et une méfiance du spam.Il possède un MacBookPro, un Androïd (avec lequel il prend quelques photos de temps en temps) et un compte Facebook.

JeanneC'est une secrétaire de 47 ans, sans compte Facebook et pas très intéressée par internet.Elle a une forte barrière à l'achat en ligne.Elle possède une tour sous Windows.



Notre 2nd outil : les scenarii d’usage

24

Bien comprendre le besoin, avant de chercher une solution

UC.1 Rassembler les photos dʼun évènement sur Sharypic

Scénario principal

1. Julien propose à Stéphane de tester Sharypic2. Stéphane découvre Sharypic et crée un compte3. Stéphane crée un évènement pour le mariage de ce weekend4. Stéphane enrichit lʼévènement avec ses propres photos5. Stéphane avertit Pierre que des photos sont sur Sharypic6. Pierre ajoute ses propres photos via upload7. Pierre en parle à Jeanne8. Jeanne décide dʼimprimer un album photo9. 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 Facebook2. Myriam consulte les photos de lʼévènement3. Myriam ajoute une photo via Facebook

7a. Pierre connecte son appareil photo1. Le système détecte automatiquement lʼappareil2. Le système demande à Pierre les photos à ajouter

Acteur principal Stéphane

Pré-conditions Julien a découvert le service par le bouche à oreille ou Twitter et il a été séduit.



Notre baromètre : les entretiens

25

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



Exemple de premiers jets

26

Organize Comment Invite

SHAREthe photos of your event

in one single place



Itérer

27

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



Le résultat de Sharypic.COM

28

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



Cette proposition de valeur est un prototype !

Une vision grossière maisvalorisée du produit

29



Communiquer avec ce prototype

30

Propositionde valeurs

InvestisseursL’équipe

Utilisateurs

intérêt

essencefaisabilité

★ partager une vision★ rationnaliser★ prioriser★ planifier



D’autres exemples

31



Engager la conversation !

32

Vos utilisateurs sont les meilleurs vendeurs !



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

34

Il existe donc un MVP,un Minimum Viable Product

+

+

User Story

+



Commencer par le MVP

35

prototyper

tester

développer

tester

créer de la valeur


+ MVP



Rassembler : la réunion de co-design

36

Explorer. Faire fonctionner. Pas d’ergonomie.



Je consolide : cinématiques & zonings

37

Organiser et structurer l’information.



Je consolide : les patterns d’interface

38

Ne pas réinventer la roue.



Resultat : des prototypes d’interface

39

<HTML>papier



Consolidons encore : le design visuel

40

C’est la partie la plus aboutie de l’ergonomie.Si peu de compétence : RESTER SIMPLE !



Un résultat plus abouti

41



Organisation du travail

42

réunion de co-design

cinematiqueszoningspatterns

visual design

prototypes d’interface



Tester

43

Mode opératoire

★ présenter un contexte★ donner un objectif★ observer / inciter la pensée à voix haute★ questions ouvertes

<HTML>papier



Développer rapidement

44

Petits lots. Petites itérations de 0 à 2 semaines.

le prototype fonctionnel perpétuel

avant après



Test en direct ...

45

“ Est-ce que tu pourrais ajouter la photo de Super Mario ? ”



Et recommencer ...

46

prototyper

tester

développer

tester

créer de la valeur

un produit agile

Tester cette valeur


Conclusion

47


A retenir

48

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


Chouchoutez vos utilisateurs ce sont les meilleurs vendeurs !

Chouchoutez vos co-équipiers vous aurez du plaisir à travailler ensemble !


Slides, bibliographie et making-ofbientôt disponibles sur le blog PIA

blog.pia-conseil.com

50


Notre formation Prototypage

51

formation.pia-conseil.com


Merci beaucoup !

52


Le système a planté. Avez vous des questions ?

Technology

Le Prototypage Agile (Agile Tour Toulouse 2011)