Eb02 Ergonomie Creation Graphique D Un Site Web Et Processus Agile De Developpement

Mardi 17 Novembre 2009Paris, la Défense

������������� ����������

������������������

Laurent MOULAGER, Directeur de créationValtech Agency

laurent.moulager@valtech-agency.fr

Alexandre BILLON, Consultant confirmé CSMValtech Technology

laurent.moulager@valtech-agency.fr

Valtech Technology

alexandre.billon@valtech.fr

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