Successfully reported this slideshow.

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

1,450 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 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. 2. CRÉATION GRAPHIQUE & AGILITÉ LE CHOC DES CULTURES ?
  3. 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. 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. 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. 6. DEUX DEMARCHES : LE PROCESSUS AGILE ITERATIF DE DEVELOPPEMENTS + ERGONOMIE ET CREATION
  7. 7. Mr CONCEPTION C’EST UN ENSEMBLE DE PLUSIEURS PROFILS
  8. 8. Mr CONCEPTION C’EST UN ENSEMBLE DE PLUSIEURS PROFILS L’ERGONOME
  9. 9. Mr CONCEPTION C’EST UN ENSEMBLE DE PLUSIEURS PROFILS LE DIRECTEUR ARTISTIQUE L’ERGONOME
  10. 10. Mr CONCEPTION C’EST UN ENSEMBLE DE PLUSIEURS PROFILS LE DIRECTEUR ARTISTIQUE L’ERGONOME LE CONSULTANT MÉTIER
  11. 11. LA COMPRÉHENSION MÉTIER
  12. 12. LA COMPRÉHENSION DU MÉTIER LES FONCTIONALITÉS LES FONCTIONNALITÉS
  13. 13. LA COMPRÉHENSION DU MÉTIER LES FONCTIONALITÉS LA COMPRÉHENSION DE L’UTILISATEUR LA COMPRÉHENSION DE L’UTILISATEUR
  14. 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. 15. Mr CONCEPTION INTEGRE PLUSIEURS CONCEPTS LA REPRÉSENTATION VISUELLE
  16. 16. Mr RÉALISATION C’EST UN ENSEMBLE DE PLUSIEURS PROFILS
  17. 17. Mr RÉALISATION C’EST UN ENSEMBLE DE PLUSIEURS PROFILS LE FACILITATEUR
  18. 18. Mr RÉALISATION C’EST UN ENSEMBLE DE PLUSIEURS PROFILS LE DÉVELOPPEUR LE FACILITATEUR
  19. 19. Mr RÉALISATION C’EST UN ENSEMBLE DE PLUSIEURS PROFILS LE DÉVELOPPEUR LE FACILITATEUR LE WEB DESIGNER
  20. 20. Mr RÉALISATION S’APPUIE SUR :
  21. 21. SCRUM
  22. 22. Mr RÉALISATION S’APPUIE SUR : UNE MÉTHODE AGILE : SCRUM
  23. 23. Mr RÉALISATION S’APPUIE SUR : DES OUTILS ET PRATIQUES MODERNES DE DÉVELOPPEMENTS
  24. 24. SCRUM PRODUCT BACKLOG SPRINT BACKLOG DAILY SCRUM MEETING
  25. 25. SCRUM CYCLE ITÉRATIF DE DÉVELOPPEMENTS POUR L’AFPA : 1 LIVRABLE TOUTES LES 3 SEMAINES
  26. 26. SCRUM DÉMO RÉTROSPECTIVE
  27. 27. DES FRAMEWORKS ÉTABLIS
  28. 28. DES FRAMEWORKS ÉTABLIS UNE PLATEFORME D’INTÉGRATION CONTINUE
  29. 29. DES FRAMEWORKS ÉTABLIS UNE PLATEFORME D’INTÉGRATION CONTINUE LES DÉVELOPPEMENTS DIRIGÉS PAR LES TESTS : TDD / TDR
  30. 30. COLLABORATION
  31. 31. PHASAGE : LES ITERATIONS AVANT DE DISPOSER DES ÉCRANS IT1 IT2 IT3 IT4 IT5 SANS CHARTE AVEC CHARTE APPLICATIONS « BLANCHES » & TDR
  32. 32. Mr CONCEPTION WORKSHOPS
  33. 33. BÂTIR L’INTERFACE
  34. 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. 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. 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. 37. METTRE TOUT LE MONDE D’ACCORD LE MOMENT UNIQUE OÙ TOUS LES ACTEURS SONT ENSEMBLE MR CONCEPTION
  38. 38. METTRE TOUT LE MONDE D’ACCORD LE MOMENT UNIQUE OÙ TOUS LES ACTEURS SONT ENSEMBLE MR CONCEPTION MR REALISATION
  39. 39. METTRE TOUT LE MONDE D’ACCORD LE MOMENT UNIQUE OÙ TOUS LES ACTEURS SONT ENSEMBLE MR CONCEPTION MR REALISATION MR LE CLIENT
  40. 40. METTRE TOUT LE MONDE D’ACCORD POUR SERVIR L’UTILISATEUR: CE QU’ON A À LUI OFFRIR ET COMMENT LUI OFFRIR
  41. 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. 42. POUR SIMPLIFIER
  43. 43. ÊTRE D’ACCORD ET SAVOIR LE FAIRE
  44. 44. ÊTRE D’ACCORD ET SAVOIR LE FAIRE L’OCCASION UNIQUE DE SAVOIR : - SI ON PEUT LE FAIRE - COMMENT LE METTRE EN OEUVRE
  45. 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. 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. 47. INTÉGRER L’UTILISATEUR DANS LA CONCEPTION UNE LISTE, MAIS LAQUELLE ? 1/ POMME 2/ RAISIN 3/ FRAISE
  48. 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. 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. 50. INTÉGRER L’UTILISATEUR DANS LA CONCEPTION UN BOUTON ? UN LIEN ? > CLIQUER ICI
  51. 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. 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. 53. AJUSTEMENTS
  54. 54. Mr CONCEPTION CINÉMATIQUES
  55. 55. UN NECESSAIRE BESOIN DE DÉCOMPOSITION CLARIFIER ET IDENTIFIER DES RÉSULTATS CONCRETS POUR LE CLIENT
  56. 56. UN NECESSAIRE BESOIN DE DÉCOMPOSITION CLARIFIER ET IDENTIFIER DES RÉSULTATS CONCRETS POUR LE CLIENT POUR L’UTILISATEUR
  57. 57. CÔTÉ CLIENT J’IDENTIFIE MON MÉTIER (RÉFÉRENTIEL)
  58. 58. CÔTÉ CLIENT J’IDENTIFIE JE CALCULE LES COMPÉTENCES MON MÉTIER TRANSFÉRABLES (RÉFÉRENTIEL) (MOTEUR)
  59. 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. 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. 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. 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. 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. 64. DANS LA PEAU DE L’UTILISATEUR POUR CORRESPONDRE À SON CONTEXTE D’UTILISATION SON NIVEAU DE COMPÉTENCES SON ENVIRONNEMENT
  65. 65. VOIR « SENTIR » L’INFORMATION IDENTIFIER LES PAGES LES FONCTIONS, LES TÂCHES LES INFORMATIONS DEMANDÉES LES INFORMATIONS RESTITUÉES
  66. 66. Mr RÉALISATION NAVIGATION
  67. 67. ÉMERGENCE DE LA NAVIGATION ENTRE LES PAGES
  68. 68. ÉMERGENCE DE LA NAVIGATION ENTRE LES PAGES DANS LA PAGE
  69. 69. L’APPARIEMENT DES METIERS LE MOTEUR D’ÉVOLUTIONS
  70. 70. L’APPARIEMENT DES METIERS LE MOTEUR D’EVOLUTIONS
  71. 71. L’APPARIEMENT DES METIERS LE MOTEUR D’EVOLUTIONS
  72. 72. Mr CONCEPTION ASPECTS VISUELS
  73. 73. À QUOI RESSEMBLE MON INTERFACE DES MODES DE FONCTIONNEMENT ISSUS DU LUDIQUE DE L’UNIVERS INTERACTIF DU TACTILE
  74. 74. COMMENT ELLE RÉAGIT UNE ACTION SUR L’ÉCRAN ENTRAÎNE UNE RESTITUTION IMMÉDIATE
  75. 75. COMMENT ELLE PARLE COULEURS, VISUELS, RENDUS GRAPHIQUES, MOUVEMENTS, ANIMATIONS
  76. 76. Mr RÉALISATION CHOIX TECHNOLOGIQUES
  77. 77. CHALLENGES
  78. 78. LES CHOIX TECHNOLOGIQUES LES CHOIX TECHNOLOGIQUES
  79. 79. Mr CONCEPTION REPRÉSENTATIONS
  80. 80. L’IMAGE POUR COMPRENDRE L’IMAGE POUR REMPLACER LES MOTS L’IMAGE POUR MARQUER L’ESPRIT
  81. 81. L’IMAGE POUR COMPRENDRE L’IMAGE POUR REMPLACER LES MOTS L’IMAGE POUR MARQUER L’ESPRIT
  82. 82. DÉMO
  83. 83. POUR TERMINER
  84. 84. Merci Questions – Réponses

×