Ergonomie, création graphique d'un site web et processus agile de développement Laurent Moulager et Alexandre Billon

1. Mardi 17 Novembre 2009
Paris, la Défense
Laurent MOULAGER,
Directeur de création
Valtech Agency
laurent.moulager@valtech-agency.fr
Alexandre BILLON,
Consultant confirmé CSM
Valtech Technology
alexandre.billon@valtech.fr

2. CRÉATION GRAPHIQUE
&
AGILITÉ
LE CHOC DES CULTURES ?

3. CONTEXTE du PROJET :
AFPA
(Agence de Formation Pour Adulte)
FAVORISER LA RECONVERSION DES DEMANDEURS D’EMPLOI
UN SITE INTERNET
Pour permettre un auto diagnostic préalable

4. LES ENJEUX :
DEFINIR UNE SOLUTION D’APPARIEMENT DES
METIERS EN MODE AGILE
PROPOSER UNE INTERFACE
ATTRAYANTE,
FACILE A PRENDRE EN MAIN
PAR DES UTILISATEURS NON EXPERTS

5. L’ÉQUIPE :
UN PRODUCT OWNER AFPA
+
UNE EQUIPE ERGONOMIE & EXPERIENCE
UTILISATEUR
+
UNE ÉQUIPE DE DÉVELOPPEMENT AGILE
Scrum Master, Développeurs, Web Designer

6. DEUX DEMARCHES :
LE PROCESSUS AGILE ITERATIF DE
DEVELOPPEMENTS
+
ERGONOMIE ET CREATION

7. Mr CONCEPTION
C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS

8. Mr CONCEPTION
C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
L’ERGONOME

9. Mr CONCEPTION
C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
LE DIRECTEUR ARTISTIQUE L’ERGONOME

10. Mr CONCEPTION
C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
LE DIRECTEUR ARTISTIQUE L’ERGONOME LE CONSULTANT MÉTIER

11. LA COMPRÉHENSION MÉTIER

12. LA COMPRÉHENSION DU MÉTIER
LES FONCTIONALITÉS
LES FONCTIONNALITÉS

13. LA COMPRÉHENSION DU MÉTIER
LES FONCTIONALITÉS
LA COMPRÉHENSION DE
L’UTILISATEUR
LA COMPRÉHENSION DE
L’UTILISATEUR

14. LA COMPRÉHENSION DU MÉTIER
LES FONCTIONALITÉS
L’EXPÉRIENCE UTILISATEUR
LA COMPRÉHENSION DE
L’UTILISATEUR
L’EXPÉRIENCE UTILISATEUR
LA CONSTRUCTION ET LA
REPRÉSENTATION VISUELLE

15. Mr CONCEPTION
INTEGRE PLUSIEURS CONCEPTS
LA REPRÉSENTATION VISUELLE

16. Mr RÉALISATION
C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS

17. Mr RÉALISATION
C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
LE FACILITATEUR

18. Mr RÉALISATION
C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
LE DÉVELOPPEUR LE FACILITATEUR

19. Mr RÉALISATION
C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
LE DÉVELOPPEUR LE FACILITATEUR LE WEB DESIGNER

20. Mr RÉALISATION
S’APPUIE SUR :

21. SCRUM

22. Mr RÉALISATION
S’APPUIE SUR :
UNE MÉTHODE AGILE :
SCRUM

23. Mr RÉALISATION
S’APPUIE SUR :
DES OUTILS ET PRATIQUES
MODERNES DE
DÉVELOPPEMENTS

24. SCRUM
PRODUCT BACKLOG
SPRINT BACKLOG
DAILY SCRUM MEETING

25. SCRUM
CYCLE ITÉRATIF DE
DÉVELOPPEMENTS POUR
L’AFPA :
1 LIVRABLE TOUTES LES 3 SEMAINES

26. SCRUM
DÉMO
RÉTROSPECTIVE

27. DES FRAMEWORKS ÉTABLIS

28. DES FRAMEWORKS ÉTABLIS
UNE PLATEFORME D’INTÉGRATION
CONTINUE

29. DES FRAMEWORKS ÉTABLIS
UNE PLATEFORME D’INTÉGRATION
CONTINUE
LES DÉVELOPPEMENTS DIRIGÉS
PAR LES TESTS : TDD / TDR

30. COLLABORATION

31. PHASAGE :
LES ITERATIONS AVANT DE DISPOSER DES
ÉCRANS
IT1 IT2 IT3 IT4 IT5
SANS CHARTE
AVEC CHARTE
APPLICATIONS « BLANCHES » & TDR

32. Mr CONCEPTION
WORKSHOPS

33. BÂTIR L’INTERFACE

34. BÂTIR L’INTERFACE
IT1 IT2 IT3 IT4 IT5
IT0
UNE VALIDATION DE
L’INTERFACE GRAPHIQUE
SCHÉMA IDÉAL QUI INTERVIENT ASSEZ TÔT

35. BÂTIR L’INTERFACE
IT1 IT2 IT3 IT4 IT5
UNE VALIDATION DE
3 WORKSHOPS L’INTERFACE GRAPHIQUE
POUR METTRE UTILISÉE EN RÉALISATION
AU POINT

36. METTRE TOUT LE MONDE
D’ACCORD
METTRE TOUT LE MONDE D’ACCORD
QU’EST CE QU’ON A OFFRIR À
L’UTILISATEUR
COMMENT LUI OFFRIR ?

37. METTRE TOUT LE MONDE
D’ACCORD
LE MOMENT UNIQUE OÙ TOUS LES
ACTEURS SONT ENSEMBLE
MR CONCEPTION

38. METTRE TOUT LE MONDE
D’ACCORD
LE MOMENT UNIQUE OÙ TOUS LES
ACTEURS SONT ENSEMBLE
MR CONCEPTION MR REALISATION

39. METTRE TOUT LE MONDE
D’ACCORD
LE MOMENT UNIQUE OÙ TOUS LES
ACTEURS SONT ENSEMBLE
MR CONCEPTION MR REALISATION MR LE CLIENT

40. METTRE TOUT LE MONDE
D’ACCORD
POUR SERVIR L’UTILISATEUR:
CE QU’ON A À LUI OFFRIR
ET COMMENT LUI OFFRIR

41. METTRE TOUT LE MONDE
D’ACCORD
POUR SERVIR L’UTILISATEUR:
CE QU’ON A À LUI OFFRIR
ET COMMENT LUI OFFRIR
CHOISIR LE MODE DE RÉPONSE
DONNER DES PRIORITÉS

42. POUR SIMPLIFIER

43. ÊTRE D’ACCORD ET
SAVOIR LE FAIRE

44. ÊTRE D’ACCORD ET
SAVOIR LE FAIRE
L’OCCASION UNIQUE DE SAVOIR :
- SI ON PEUT LE FAIRE
- COMMENT LE METTRE EN OEUVRE

45. ÊTRE D’ACCORD ET
SAVOIR LE FAIRE
L’OCCASION UNIQUE DE SAVOIR :
- SI ON PEUT LE FAIRE
- COMMENT LE METTRE EN OEUVRE
CRÉER UNE INTERFACE
RÉALISABLE

46. INTÉGRER L’UTILISATEUR
DANS LA CONCEPTION
POURQUOI UNE LISTE ?
POUR UNE INTERFACE UTILISABLE
POURQUOI PAS UN SCHÉMA ?
POURQUOI UN BOUTON OU TEXTE
?

47. INTÉGRER L’UTILISATEUR
DANS LA CONCEPTION
UNE LISTE, MAIS LAQUELLE ?
1/ POMME
2/ RAISIN
3/ FRAISE

48. INTÉGRER L’UTILISATEUR
DANS LA CONCEPTION
UNE LISTE, MAIS LAQUELLE ?
1/ POMME 1. POMME
2/ RAISIN 2. RAISIN
3/ FRAISE 3. FRAISE

49. INTÉGRER L’UTILISATEUR
DANS LA CONCEPTION
UNE LISTE, MAIS LAQUELLE ?
1/ POMME 1. POMME
2/ RAISIN 2. RAISIN
3/ FRAISE 3. FRAISE

50. INTÉGRER L’UTILISATEUR
DANS LA CONCEPTION
UN BOUTON ? UN LIEN ?
> CLIQUER ICI

51. INTÉGRER L’UTILISATEUR
DANS LA CONCEPTION
UN BOUTON ? UN LIEN ?
Le texte ci dessous
m’indique où cliquer
> CLIQUER ICI
JE CLIQUE ICI >

52. INTÉGRER L’UTILISATEUR
DANS LA CONCEPTION
UN BOUTON ? UN LIEN ?
Le texte ci dessous
m’indique où cliquer
> CLIQUER ICI CLICK
JE CLIQUE ICI >

53. AJUSTEMENTS

54. Mr CONCEPTION
CINÉMATIQUES

55. UN NECESSAIRE BESOIN DE
DÉCOMPOSITION
CLARIFIER ET IDENTIFIER DES
RÉSULTATS CONCRETS
POUR LE CLIENT

56. UN NECESSAIRE BESOIN DE
DÉCOMPOSITION
CLARIFIER ET IDENTIFIER DES
RÉSULTATS CONCRETS
POUR LE CLIENT
POUR L’UTILISATEUR

57. CÔTÉ CLIENT
J’IDENTIFIE
MON MÉTIER
(RÉFÉRENTIEL)

58. CÔTÉ CLIENT
J’IDENTIFIE JE CALCULE LES
COMPÉTENCES
MON MÉTIER TRANSFÉRABLES
(RÉFÉRENTIEL) (MOTEUR)

59. CÔTÉ CLIENT
J’IDENTIFIE JE CALCULE LES JE LISTE DES
COMPÉTENCES RÉPONSE
MON MÉTIER TRANSFÉRABLES PROFILÉES
(RÉFÉRENTIEL) (MOTEUR) (FORMATIONS)

60. CÔTÉ CLIENT
J’IDENTIFIE JE CALCULE LES JE LISTE DES
COMPÉTENCES RÉPONSE
MON MÉTIER TRANSFÉRABLES PROFILÉES
(RÉFÉRENTIEL) (MOTEUR) (FORMATIONS)
CÔTÉ UTILISATEUR

61. CÔTÉ CLIENT
J’IDENTIFIE JE CALCULE LES JE LISTE DES
COMPÉTENCES RÉPONSE
MON MÉTIER TRANSFÉRABLES PROFILÉES
(RÉFÉRENTIEL) (MOTEUR) (FORMATIONS)
CÔTÉ UTILISATEUR
JE DOIS SAISIR MES
EXPÉRIENCES
PASSÉES
(EMPLOI,MÉTIERS..)

62. CÔTÉ CLIENT
J’IDENTIFIE JE CALCULE LES JE LISTE DES
COMPÉTENCES RÉPONSE
MON MÉTIER TRANSFÉRABLES PROFILÉES
(RÉFÉRENTIEL) (MOTEUR) (FORMATIONS)
CÔTÉ UTILISATEUR
JE DOIS SAISIR MES J’IDENTIFIE LES
EXPÉRIENCES COMPÉTENCES QUI
PASSÉES ME SONT
(EMPLOI,MÉTIERS..) MONTRÉES (BILAN)

63. CÔTÉ CLIENT
J’IDENTIFIE JE CALCULE LES JE LISTE DES
COMPÉTENCES RÉPONSE
MON MÉTIER TRANSFÉRABLES PROFILÉES
(RÉFÉRENTIEL) (MOTEUR) (FORMATIONS)
CÔTÉ UTILISATEUR
JE DOIS SAISIR MES J’IDENTIFIE LES J’IDENTIFIE MON
EXPÉRIENCES COMPÉTENCES QUI POTENTIEL, LES
PASSÉES ME SONT FORMATIONS
(EMPLOI,MÉTIERS..) MONTRÉES (BILAN) (ORIENTATION)

64. DANS LA PEAU DE
L’UTILISATEUR
POUR CORRESPONDRE À SON
CONTEXTE D’UTILISATION
SON NIVEAU DE COMPÉTENCES
SON ENVIRONNEMENT

65. VOIR
« SENTIR » L’INFORMATION
IDENTIFIER LES PAGES
LES FONCTIONS, LES TÂCHES
LES INFORMATIONS DEMANDÉES
LES INFORMATIONS RESTITUÉES

66. Mr RÉALISATION
NAVIGATION

67. ÉMERGENCE DE LA
NAVIGATION
ENTRE LES PAGES

68. ÉMERGENCE DE LA
NAVIGATION
ENTRE LES PAGES
DANS LA PAGE

70. L’APPARIEMENT DES
METIERS
LE MOTEUR
D’ÉVOLUTIONS

71. L’APPARIEMENT DES
METIERS
LE MOTEUR
D’EVOLUTIONS

72. L’APPARIEMENT DES
METIERS
LE MOTEUR
D’EVOLUTIONS

73. Mr CONCEPTION
ASPECTS VISUELS

74. À QUOI RESSEMBLE MON
INTERFACE
DES MODES DE FONCTIONNEMENT
ISSUS DU LUDIQUE
DE L’UNIVERS INTERACTIF
DU TACTILE

77. COMMENT ELLE RÉAGIT
UNE ACTION SUR L’ÉCRAN
ENTRAÎNE UNE RESTITUTION
IMMÉDIATE

79. COMMENT ELLE PARLE
COULEURS, VISUELS, RENDUS
GRAPHIQUES, MOUVEMENTS,
ANIMATIONS

81. Mr RÉALISATION
CHOIX TECHNOLOGIQUES

82. CHALLENGES

83. LES CHOIX
TECHNOLOGIQUES
LES CHOIX TECHNOLOGIQUES

84. Mr CONCEPTION
REPRÉSENTATIONS

85. L’IMAGE POUR COMPRENDRE
L’IMAGE
POUR REMPLACER LES
MOTS
L’IMAGE
POUR MARQUER L’ESPRIT

86. L’IMAGE POUR COMPRENDRE
L’IMAGE POUR REMPLACER LES
MOTS
L’IMAGE POUR MARQUER L’ESPRIT

87. DÉMO

88. POUR TERMINER

89. Merci
Questions – Réponses