eb02 ergonomie creation graphique d un site web et processus agile de developpement
DESCRIPTION
Ergonomie, création graphique d'un site web et processus agile de développementLaurent Moulager et Alexandre BillonTRANSCRIPT
Mardi 17 Novembre 2009Paris, la Défense
������������� ����������
������������������
Laurent MOULAGER, Directeur de créationValtech Agency
Alexandre BILLON, Consultant confirmé CSMValtech Technology
Valtech Technology
CRÉATION GRAPHIQUECRÉATION GRAPHIQUE&&
AGILITÉAGILITÉ
LE CHOC DES CULTURES ?
CONTEXTE du PROJET :CONTEXTE du PROJET :
AFPA(Agence de Formation Pour Adulte)(Agence de Formation Pour Adulte)
FAVORISER LA RECONVERSION DES DEMANDEURS D’EMPLOI
UN SITE INTERNETUN SITE INTERNETPour permettre un auto diagnostic préalable
LES ENJEUX : LES ENJEUX : DEFINIR UNE SOLUTION D’APPARIEMENT DES
METIERS EN MODE AGILE
PROPOSER UNE INTERFACE ATTRAYANTE, ATTRAYANTE,
FACILE A PRENDRE EN MAIN PAR DES UTILISATEURS NON EXPERTSPAR DES UTILISATEURS NON EXPERTS
L’ÉQUIPE :
UN PRODUCT OWNER AFPA UN PRODUCT OWNER AFPA
+UNE EQUIPE ERGONOMIE & EXPERIENCE UNE EQUIPE ERGONOMIE & EXPERIENCE
UTILISATEUR
+UNE ÉQUIPE DE DÉVELOPPEMENT AGILEUNE ÉQUIPE DE DÉVELOPPEMENT AGILEScrum Master, Développeurs, Web Designer
DEUX DEMARCHES :
LE PROCESSUS AGILE ITERATIF DE DEVELOPPEMENTSDEVELOPPEMENTS
++
ERGONOMIE ET CREATION
Mr CONCEPTIONMr CONCEPTIONC’EST UN ENSEMBLE DE C’EST UN ENSEMBLE DE
PLUSIEURS PROFILSPLUSIEURS PROFILS
Mr CONCEPTIONMr CONCEPTIONC’EST UN ENSEMBLE DE C’EST UN ENSEMBLE DE
PLUSIEURS PROFILSPLUSIEURS PROFILS
L’ERGONOME
Mr CONCEPTIONMr CONCEPTIONC’EST UN ENSEMBLE DE C’EST UN ENSEMBLE DE
PLUSIEURS PROFILSPLUSIEURS PROFILS
LE DIRECTEUR ARTISTIQUE L’ERGONOME
Mr CONCEPTIONMr CONCEPTIONC’EST UN ENSEMBLE DE C’EST UN ENSEMBLE DE
PLUSIEURS PROFILSPLUSIEURS PROFILS
LE DIRECTEUR ARTISTIQUE L’ERGONOME LE CONSULTANT MÉTIER
��������������
����� ��������� ������������������� � �������� ����� ��������� ������������������� � ��������
�
LA COMPRÉHENSION MÉTIER�
���� ��������������� ����� ��������������� �
LA COMPRÉHENSION DU MÉTIERLA COMPRÉHENSION DU MÉTIER
LES FONCTIONALITÉSLES FONCTIONALITÉSLES FONCTIONNALITÉS
LA COMPRÉHENSION DU MÉTIERLA COMPRÉHENSION DU MÉTIER
LES FONCTIONALITÉSLA COMPRÉHENSION DE LES FONCTIONALITÉSLA COMPRÉHENSION DE L’UTILISATEUR
LA COMPRÉHENSION DE L’UTILISATEUR
L’UTILISATEUR
LA COMPRÉHENSION DU MÉTIERLA COMPRÉHENSION DU MÉTIER
LES FONCTIONALITÉSLES FONCTIONALITÉS
LA COMPRÉHENSION DE L’UTILISATEUR
L’EXPÉRIENCE UTILISATEURL’UTILISATEUR
L’EXPÉRIENCE UTILISATEUR
LA CONSTRUCTION ET LA REPRÉSENTATION VISUELLEREPRÉSENTATION VISUELLE
Mr CONCEPTIONMr CONCEPTIONINTEGRE PLUSIEURS CONCEPTSINTEGRE PLUSIEURS CONCEPTS
LA REPRÉSENTATION VISUELLE
Mr RÉALISATIONMr RÉALISATIONC’EST UN ENSEMBLE DE C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
Mr RÉALISATIONMr RÉALISATIONC’EST UN ENSEMBLE DE C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
LE FACILITATEUR
Mr RÉALISATIONMr RÉALISATIONC’EST UN ENSEMBLE DE C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
LE DÉVELOPPEUR LE FACILITATEUR
Mr RÉALISATIONMr RÉALISATIONC’EST UN ENSEMBLE DE C’EST UN ENSEMBLE DE
PLUSIEURS PROFILS
LE DÉVELOPPEUR LE FACILITATEUR LE WEB DESIGNER
Mr RÉALISATIONMr RÉALISATIONS’APPUIE SUR :S’APPUIE SUR :
SCRUM
Mr RÉALISATIONMr RÉALISATIONS’APPUIE SUR :S’APPUIE SUR :
UNE MÉTHODE AGILE : UNE MÉTHODE AGILE : SCRUMSCRUM
Mr RÉALISATIONMr RÉALISATIONS’APPUIE SUR :S’APPUIE SUR :
DES OUTILS ET PRATIQUES MODERNES DE MODERNES DE
DÉVELOPPEMENTSDÉVELOPPEMENTS
SCRUM SCRUM
PRODUCT BACKLOGPRODUCT BACKLOG
SPRINT BACKLOGSPRINT BACKLOG
DAILY SCRUM MEETINGDAILY SCRUM MEETING
SCRUM SCRUM
CYCLE ITÉRATIF DE CYCLE ITÉRATIF DE DÉVELOPPEMENTS POUR DÉVELOPPEMENTS POUR
L’AFPA : L’AFPA : 1 LIVRABLE TOUTES LES 3 SEMAINES
SCRUM SCRUM
DÉMODÉMORÉTROSPECTIVERÉTROSPECTIVE
����� ������������������ � ��������
����� ������������������ � ��������
DES FRAMEWORKS ÉTABLISDES FRAMEWORKS ÉTABLIS
����� ������������������ � ��������
����� ������������������ � ��������
DES FRAMEWORKS ÉTABLISDES FRAMEWORKS ÉTABLIS
UNE PLATEFORME D’INTÉGRATION UNE PLATEFORME D’INTÉGRATION CONTINUE CONTINUE
����� ������������������ � ��������
����� ������������������ � ��������
DES FRAMEWORKS ÉTABLISDES FRAMEWORKS ÉTABLIS
UNE PLATEFORME D’INTÉGRATION UNE PLATEFORME D’INTÉGRATION CONTINUE CONTINUE
LES DÉVELOPPEMENTS DIRIGÉS PAR LES TESTS : TDD / TDRPAR LES TESTS : TDD / TDR
COLLABORATIONCOLLABORATIONCOLLABORATION
PHASAGE : PHASAGE :
LES ITERATIONS AVANT DE DISPOSER DES LES ITERATIONS AVANT DE DISPOSER DES ÉCRANS
IT1 IT2 IT3 IT4 IT5
SANS CHARTEAVEC CHARTEAVEC CHARTE
APPLICATIONS « BLANCHES » & TDR
Mr CONCEPTIONWORKSHOPSWORKSHOPS
BÂTIR L’INTERFACE
BÂTIR L’INTERFACEBÂTIR L’INTERFACE
IT1 IT2 IT3 IT4 IT5
SCHÉMA IDÉAL
UNE VALIDATION DE L’INTERFACE GRAPHIQUE
QUI INTERVIENT ASSEZ TÔT
IT0
SCHÉMA IDÉAL QUI INTERVIENT ASSEZ TÔT
BÂTIR L’INTERFACEBÂTIR L’INTERFACE
IT1 IT2 IT3 IT4 IT5
3 WORKSHOPS POUR METTRE
UNE VALIDATION DE L’INTERFACE GRAPHIQUE UTILISÉE EN RÉALISATIONPOUR METTRE
AU POINTUTILISÉE EN RÉALISATION
METTRE TOUT LE MONDE D’ACCORDD’ACCORD
QU’EST CE QU’ON A OFFRIR À METTRE TOUT LE MONDE D’ACCORD
QU’EST CE QU’ON A OFFRIR À L’UTILISATEUR
COMMENT LUI OFFRIR ?
METTRE TOUT LE MONDE METTRE TOUT LE MONDE D’ACCORDD’ACCORD
LE MOMENT UNIQUE OÙ TOUS LES LE MOMENT UNIQUE OÙ TOUS LES ACTEURS SONT ENSEMBLEACTEURS SONT ENSEMBLE
MR CONCEPTION
METTRE TOUT LE MONDE METTRE TOUT LE MONDE D’ACCORDD’ACCORD
LE MOMENT UNIQUE OÙ TOUS LES LE MOMENT UNIQUE OÙ TOUS LES ACTEURS SONT ENSEMBLEACTEURS SONT ENSEMBLE
MR CONCEPTION MR REALISATION
METTRE TOUT LE MONDE METTRE TOUT LE MONDE D’ACCORDD’ACCORD
LE MOMENT UNIQUE OÙ TOUS LES LE MOMENT UNIQUE OÙ TOUS LES ACTEURS SONT ENSEMBLEACTEURS SONT ENSEMBLE
MR CONCEPTION MR REALISATION MR LE CLIENT
METTRE TOUT LE MONDE METTRE TOUT LE MONDE D’ACCORDD’ACCORD
POUR SERVIR L’UTILISATEUR:POUR SERVIR L’UTILISATEUR:CE QU’ON A À LUI OFFRIRCE QU’ON A À LUI OFFRIRET COMMENT LUI OFFRIRET COMMENT LUI OFFRIR
METTRE TOUT LE MONDE METTRE TOUT LE MONDE D’ACCORDD’ACCORD
POUR SERVIR L’UTILISATEUR:POUR SERVIR L’UTILISATEUR:CE QU’ON A À LUI OFFRIRCE QU’ON A À LUI OFFRIRET COMMENT LUI OFFRIRET COMMENT LUI OFFRIR
CHOISIR LE MODE DE RÉPONSEDONNER DES PRIORITÉSDONNER DES PRIORITÉS
POUR SIMPLIFIERPOUR SIMPLIFIER
ÊTRE D’ACCORD ETSAVOIR LE FAIRESAVOIR LE FAIRE
ÊTRE D’ACCORD ETSAVOIR LE FAIRESAVOIR LE FAIRE
L’OCCASION UNIQUE DE SAVOIR :L’OCCASION UNIQUE DE SAVOIR :- SI ON PEUT LE FAIRE- SI ON PEUT LE FAIRE
- COMMENT LE METTRE EN OEUVRE
ÊTRE D’ACCORD ETSAVOIR LE FAIRESAVOIR LE FAIRE
L’OCCASION UNIQUE DE SAVOIR :L’OCCASION UNIQUE DE SAVOIR :- SI ON PEUT LE FAIRE- SI ON PEUT LE FAIRE
- COMMENT LE METTRE EN OEUVRE
CRÉER UNE INTERFACE CRÉER UNE INTERFACE RÉALISABLERÉALISABLE
INTÉGRER L’UTILISATEURDANS LA CONCEPTIONDANS LA CONCEPTION
POURQUOI UNE LISTE ?POUR UNE INTERFACE UTILISABLEPOURQUOI UNE LISTE ?POURQUOI PAS UN SCHÉMA ?POUR UNE INTERFACE UTILISABLE
POURQUOI PAS UN SCHÉMA ?POURQUOI UN BOUTON OU TEXTE POURQUOI UN BOUTON OU TEXTE
?
INTÉGRER L’UTILISATEURDANS LA CONCEPTIONDANS LA CONCEPTION
UNE LISTE, MAIS LAQUELLE ?UNE LISTE, MAIS LAQUELLE ?
1/ POMME2/ RAISIN2/ RAISIN3/ FRAISE3/ FRAISE
INTÉGRER L’UTILISATEURDANS LA CONCEPTIONDANS LA CONCEPTION
UNE LISTE, MAIS LAQUELLE ?UNE LISTE, MAIS LAQUELLE ?
1/ POMME2/ RAISIN
1. POMME
2.2/ RAISIN3/ FRAISE
2. RAISIN
3.3/ FRAISE 3. FRAISE
INTÉGRER L’UTILISATEURDANS LA CONCEPTIONDANS LA CONCEPTION
UNE LISTE, MAIS LAQUELLE ?UNE LISTE, MAIS LAQUELLE ?
1/ POMME2/ RAISIN
1. POMME
2.2/ RAISIN3/ FRAISE
2. RAISIN
3.3/ FRAISE 3. FRAISE
INTÉGRER L’UTILISATEURDANS LA CONCEPTIONDANS LA CONCEPTION
UN BOUTON ? UN LIEN ?UN BOUTON ? UN LIEN ?
> CLIQUER ICI
INTÉGRER L’UTILISATEURDANS LA CONCEPTIONDANS LA CONCEPTION
UN BOUTON ? UN LIEN ?UN BOUTON ? UN LIEN ?
Le texte ci dessous
> CLIQUER ICI
Le texte ci dessous m’indique où cliquer
JE CLIQUE ICI >
INTÉGRER L’UTILISATEURDANS LA CONCEPTIONDANS LA CONCEPTION
UN BOUTON ? UN LIEN ?UN BOUTON ? UN LIEN ?
Le texte ci dessous
> CLIQUER ICI
Le texte ci dessous m’indique où cliquer
JE CLIQUE ICI > CLICK
AJUSTEMENTSAJUSTEMENTSAJUSTEMENTS
Mr CONCEPTIONCINÉMATIQUESCINÉMATIQUES
UN NECESSAIRE BESOIN DE DÉCOMPOSITIONDÉCOMPOSITION
CLARIFIER ET IDENTIFIER DES CLARIFIER ET IDENTIFIER DES RÉSULTATS CONCRETSRÉSULTATS CONCRETS
POUR LE CLIENT
UN NECESSAIRE BESOIN DE DÉCOMPOSITIONDÉCOMPOSITION
CLARIFIER ET IDENTIFIER DES CLARIFIER ET IDENTIFIER DES RÉSULTATS CONCRETSRÉSULTATS CONCRETS
POUR LE CLIENT
POUR L’UTILISATEURPOUR L’UTILISATEUR
CÔTÉ CLIENT
J’IDENTIFIE MON MÉTIERMON MÉTIER
(RÉFÉRENTIEL)
CÔTÉ CLIENT
JE CALCULE LES COMPÉTENCES
TRANSFÉRABLES
J’IDENTIFIE MON MÉTIER TRANSFÉRABLES
(MOTEUR)
MON MÉTIER(RÉFÉRENTIEL)
CÔTÉ CLIENT
JE CALCULE LES COMPÉTENCES
TRANSFÉRABLES
J’IDENTIFIE MON MÉTIER
JE LISTE DES RÉPONSE
PROFILÉESTRANSFÉRABLES(MOTEUR)
MON MÉTIER(RÉFÉRENTIEL)
PROFILÉES(FORMATIONS)
CÔTÉ CLIENT
JE CALCULE LES COMPÉTENCES
TRANSFÉRABLES
J’IDENTIFIE MON MÉTIER
JE LISTE DES RÉPONSE
PROFILÉESTRANSFÉRABLES(MOTEUR)
MON MÉTIER(RÉFÉRENTIEL)
PROFILÉES(FORMATIONS)
CÔTÉ UTILISATEUR
CÔTÉ CLIENT
JE CALCULE LES COMPÉTENCES
TRANSFÉRABLES
J’IDENTIFIE MON MÉTIER
JE LISTE DES RÉPONSE
PROFILÉESTRANSFÉRABLES(MOTEUR)
MON MÉTIER(RÉFÉRENTIEL)
PROFILÉES(FORMATIONS)
CÔTÉ UTILISATEUR
JE DOIS SAISIR MES EXPÉRIENCES
PASSÉESPASSÉES(EMPLOI,MÉTIERS..)
CÔTÉ CLIENT
JE CALCULE LES COMPÉTENCES
TRANSFÉRABLES
J’IDENTIFIE MON MÉTIER
JE LISTE DES RÉPONSE
PROFILÉESTRANSFÉRABLES(MOTEUR)
MON MÉTIER(RÉFÉRENTIEL)
PROFILÉES(FORMATIONS)
CÔTÉ UTILISATEUR
J’IDENTIFIE LES COMPÉTENCES QUI ME SONT
JE DOIS SAISIR MES EXPÉRIENCES
PASSÉES ME SONT MONTRÉES (BILAN)
PASSÉES(EMPLOI,MÉTIERS..)
CÔTÉ CLIENT
JE CALCULE LES COMPÉTENCES
TRANSFÉRABLES
J’IDENTIFIE MON MÉTIER
JE LISTE DES RÉPONSE
PROFILÉESTRANSFÉRABLES(MOTEUR)
MON MÉTIER(RÉFÉRENTIEL)
PROFILÉES(FORMATIONS)
CÔTÉ UTILISATEUR
J’IDENTIFIE LES COMPÉTENCES QUI ME SONT
JE DOIS SAISIR MES EXPÉRIENCES
PASSÉES
J’IDENTIFIE MON POTENTIEL, LES FORMATIONSME SONT
MONTRÉES (BILAN)PASSÉES
(EMPLOI,MÉTIERS..)
FORMATIONS(ORIENTATION)
DANS LA PEAU DE DANS LA PEAU DE L’UTILISATEURL’UTILISATEUR
POUR CORRESPONDRE À SON CONTEXTE D’UTILISATIONCONTEXTE D’UTILISATION
SON NIVEAU DE COMPÉTENCESSON NIVEAU DE COMPÉTENCESSON ENVIRONNEMENTSON ENVIRONNEMENT
VOIRVOIR« SENTIR » L’INFORMATION« SENTIR » L’INFORMATION
IDENTIFIER LES PAGESIDENTIFIER LES PAGESLES FONCTIONS, LES TÂCHESLES FONCTIONS, LES TÂCHES
LES INFORMATIONS DEMANDÉESLES INFORMATIONS DEMANDÉESLES INFORMATIONS RESTITUÉES
Mr RÉALISATIONNAVIGATIONNAVIGATION
ÉMERGENCE DE LA ÉMERGENCE DE LA NAVIGATION NAVIGATION
ENTRE LES PAGESENTRE LES PAGES
ÉMERGENCE DE LA ÉMERGENCE DE LA NAVIGATION NAVIGATION
ENTRE LES PAGESENTRE LES PAGES
DANS LA PAGE
L’APPARIEMENT DES L’APPARIEMENT DES METIERSMETIERS
LE MOTEUR LE MOTEUR D’ÉVOLUTIONSD’ÉVOLUTIONS
L’APPARIEMENT DES L’APPARIEMENT DES METIERSMETIERS
LE MOTEUR LE MOTEUR D’EVOLUTIONSD’EVOLUTIONS
L’APPARIEMENT DES L’APPARIEMENT DES METIERSMETIERS
LE MOTEUR LE MOTEUR D’EVOLUTIONSD’EVOLUTIONS
Mr CONCEPTIONASPECTS VISUELSASPECTS VISUELS
À QUOI RESSEMBLE MON INTERFACEINTERFACE
DES MODES DE FONCTIONNEMENT DES MODES DE FONCTIONNEMENT ISSUS DU LUDIQUE
DE L’UNIVERS INTERACTIF DU TACTILE
COMMENT ELLE RÉAGITUNE ACTION SUR L’ÉCRAN UNE ACTION SUR L’ÉCRAN
ENTRAÎNE UNE RESTITUTION ENTRAÎNE UNE RESTITUTION IMMÉDIATE
COMMENT ELLE PARLECOULEURS, VISUELS, RENDUS COULEURS, VISUELS, RENDUS GRAPHIQUES, MOUVEMENTS, GRAPHIQUES, MOUVEMENTS,
ANIMATIONS
Mr RÉALISATIONCHOIX TECHNOLOGIQUESCHOIX TECHNOLOGIQUES
CHALLENGESCHALLENGESCHALLENGES
LES CHOIX LES CHOIX TECHNOLOGIQUESLES CHOIX TECHNOLOGIQUESTECHNOLOGIQUESLES CHOIX TECHNOLOGIQUES
Mr CONCEPTIONREPRÉSENTATIONSREPRÉSENTATIONS
L’IMAGE POUR COMPRENDRE
L’IMAGEL’IMAGEPOUR REMPLACER LES
MOTSMOTSL’IMAGEL’IMAGE
POUR MARQUER L’ESPRITPOUR MARQUER L’ESPRIT
L’IMAGE POUR COMPRENDREL’IMAGE POUR REMPLACER LES L’IMAGE POUR REMPLACER LES
MOTSMOTSL’IMAGE POUR MARQUER L’ESPRITL’IMAGE POUR MARQUER L’ESPRIT
DÉMODÉMO
POUR TERMINERPOUR TERMINER
MerciMerciQuestions – RéponsesQuestions – Réponses