62
COMMENT DESIGNER POUR L’EXPERIENCE UTILISATEUR ? RÉVISION POUR TOUS * lundi 4 octobre 2010

5 phases du Design pour l'Experience Utilisateur

Embed Size (px)

DESCRIPTION

Designer pour l'Experience Utilisateur en 5 phases (révision pour tous)

Citation preview

  • 1. *COMMENT DESIGNER POURLEXPERIENCE UTILISATEUR ? RVISION POUR TOUS lundi 4 octobre 2010

2. SOMMAIRE 1. DECOUVERTE 2. CONCEPT LES ETAPES3. ORGANISATION 4. DESIGN 5. SUIVI DE PRODUCTION +CONCLUSION 6. PROCESSUS DENSEMBLElundi 4 octobre 2010 3. *1DECOUVERTElundi 4 octobre 2010 4. RecherchesUtilisateurs - Sources: data, stats, analyses, tudes... - Recherches: ein, terviews, ethnographi benchmarkcomparatif...- Tests:eanalyses de taches,intervi ws...DCOUVERTE Quantitatif +Qualitatif lundi 4 octobre 2010 5. RecherchesUtilisateurs - Sources: data, stats, analyses, tudes... - Recherches: ein, terviews, ethnographi benchmarkcomparatif...- Tests:eanalyses de taches,intervi ws...DCOUVERTE QuantitatifAudit +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant, Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 6. RecherchesModles UtilisateursUtilisateurs- Segments: comprehension du march- Personas: comprehension des comportements - Sources: data, stats,- Scnario dusage: outil conceptuel analyses, tudes... - Recherches: ein, terviews, ethnographi benchmarkcomparatif...- Tests:eanalyses de taches,intervi ws...DCOUVERTE QuantitatifAudit +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant, Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 7. RecherchesModles UtilisateursUtilisateurs- Segments: comprehension du march- Personas: comprehension des comportements - Sources: data, stats,- Scnario dusage: outil conceptuel analyses, tudes... - Recherches: ein, terviews, ethnographi benchmarkcomparatif...- Tests:eanalyses de taches,intervi ws...DCOUVERTE QuantitatifAudit +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant, Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 8. RecherchesModles UtilisateursUtilisateurs- Segments: comprehension du march- Personas: comprehension des comportements - Sources: data, stats,- Scnario dusage: outil conceptuel analyses, tudes... - Recherches: ein, terviews, ethnographi benchmarkcomparatif...- Tests:eanalyses de taches,DCOUVERTEintervi ws... Quantitatif Benchmark- Collecte, capture,Auditveille applique +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant, Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 9. Recherches Modles UtilisateursUtilisateurs - Segments: comprehension du march - Personas: comprehension des comportements - Sources: data, stats, - Scnario dusage: outil conceptuel analyses, tudes... - Recherches: ein, terviews, ethnographi benchmarkcomparatif...- Tests:eanalyses de taches,DCOUVERTEintervi ws... QuantitatifBenchmarkAudit- Collecte, queFonctionnel capture,veille appli +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant,Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 10. RecherchesModles UtilisateursUtilisateurs- Segments: comprehension du march- Personas: comprehension des comportements - Sources: data, stats,- Scnario dusage: outil conceptuel analyses, tudes... - Recherches: ein, terviews, ethnographi benchmarkcomparatif...- Tests:eanalyses de taches,DCOUVERTEintervi ws... Quantitatif BenchmarkAudit - Collecte, capture, veille applique +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant, Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 11. RecherchesModles UtilisateursUtilisateurs- Segments: comprehension du march- Personas: comprehension des comportements - Sources: data, stats,- Scnario dusage: outil conceptuel analyses, tudes...Besoins - Recherches: ein, terviews, ethnographi benchmarkGRILLE DE Disponibilitmarchcomparatif... SYNTHSE- Tests:eanalyses de taches,DCOUVERTE Faisabilit (Tech., Budget...)intervi ws... Quantitatif BenchmarkAudit - Collecte, capture, veille applique +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant, Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 12. RecherchesModles UtilisateursUtilisateurs- Segments: comprehension du march- Personas: comprehension des comportements - Sources: data, stats,- Scnario dusage: outil conceptuel analyses, tudes...Besoins - Recherches: ein, terviews, ethnographi benchmarkGRILLE DE Disponibilitmarchcomparatif... SYNTHSE- Tests:eanalyses de taches,DCOUVERTE Faisabilit (Tech., Budget...)intervi ws... Quantitatif BenchmarkAudit - Collecte, capture, veille applique +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant, Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 13. RecherchesModles UtilisateursUtilisateurs- Segments: comprehension du march- Personas: comprehension des comportements - Sources: data, stats,- Scnario dusage: outil conceptuel analyses, tudes...Besoins - Recherches: ein, terviews, ethnographi benchmarkGRILLE DE Disponibilitmarchcomparatif... SYNTHSE- Tests:eanalyses de taches,DCOUVERTE Faisabilit (Tech., Budget...)intervi ws... QuantitatifBenchmarkAudit Fonctionnel Contenus +Qualitatif - Sources: contenus, data, - Collecte, capture,veille appliqueBusinessexperienceanalyst- Besoins: audit de lexistant,Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 14. RecherchesModles UtilisateursUtilisateurs- Segments: comprehension du march- Personas: comprehension des comportements - Sources: data, stats,- Scnario dusage: outil conceptuel analyses, tudes...Besoins - Recherches: ein, terviews, ethnographi benchmarkGRILLE DE Disponibilitmarchcomparatif... SYNTHSE- Tests:eanalyses de taches,DCOUVERTE Faisabilit (Tech., Budget...)intervi ws... Quantitatif BenchmarkAudit - Collecte, capture, veille applique +Qualitatif - Sources: contenus, data,experienceBusinessanalyst- Besoins: audit de lexistant, Consultingdemande client, technologie- Equipe: capacit, organisation, Conduite du Objectifsducationchangement businesslundi 4 octobre 2010 15. *2CONCEPTlundi 4 octobre 2010 16. IdeatioDIDESGENERATION nPrincipes: - gnrer pasplusmauvaisespossiblele dides - iparticipaants: de trop, ni trop peul nyides - prendre toutnien note -Mthode:CONCEPT - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...lundi 4 octobre 2010 17. IdeatioDIDESGENERATION nPrincipes: - gnrer pasplusmauvaisespossiblele dides - iparticipaants: de trop, ni trop peul nyides - prendre toutnien note -Mthode:CONCEPT - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...source: http://www.learninglab.jumpassociates.com/?p=113lundi 4 octobre 2010 18. IdeatioDIDESGENERATION nPrincipes: - gnrer pasplusmauvaisespossiblele dides - iparticipaants: de trop, ni trop peul nyides - prendre toutnien note -Mthode:CONCEPT - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...source: adaptive pathlundi 4 octobre 2010 19. IdeatioDIDESGENERATION nPrincipes: - gnrer pasplusmauvaisespossiblele dides - iparticipaants: de trop, ni trop peul nyides - prendre toutnien note -Mthode: CONCEPT - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...source: http://weizhou.wordpress.com/2008/07/07/prototype/lundi 4 octobre 2010 20. IdeatioDIDESGENERATION nPrincipes: - gnrer pasplusmauvaisespossiblele dides - iparticipaants: de trop, ni trop peul nyides - prendre toutnien note -Mthode:CONCEPT - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...lundi 4 octobre 2010 21. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele dides Modlisation - iparticipaants: de trop, ni trop peul nyides Stratgie desStratgie - prendre toutnien note contenus Fonctionnelle -Mthode:CONCEPT+ modles hybrides - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...lundi 4 octobre 2010 22. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele dides Modlisation - iparticipaants: de trop, ni trop peul nyides Stratgie desStratgie - prendre toutnien note contenus Fonctionnelle -Mthode:CONCEPT+ modles hybrides - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...lundi 4 octobre 2010 23. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele dides Modlisation - iparticipaants: de trop, ni trop peul nyides Stratgie desStratgie - prendre toutnien note contenus Fonctionnelle -Mthode:CONCEPT+ modles hybrides - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...lundi 4 octobre 2010 24. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele dides Modlisation - iparticipaants: de trop, ni trop peul nyides Stratgie desStratgie - prendre toutnien note contenus Fonctionnelle -Mthode:CONCEPT+ modles hybrides - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...lundi 4 octobre 2010 25. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele dides Modlisation - iparticipaants: de trop, ni trop peul nyides Stratgie desStratgie - prendre toutnien note contenus Fonctionnelle -Mthode:CONCEPT+ modles hybrides - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...lundi 4 octobre 2010 26. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele didesModlisation - iparticipaants: de trop, ni trop peul nyidesStratgie des Stratgie - prendre toutnien notecontenusFonctionnelle -Mthode: CONCEPT+ modles hybrides - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...VisualisationPrincipes:- Construirerapidementdensemble une vision- Visualiser Mthode: CROQUIS+ schmas.... lundi 4 octobre 2010 27. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele didesModlisation - iparticipaants: de trop, ni trop peul nyidesStratgie des Stratgie - prendre toutnien notecontenusFonctionnelle -Mthode: CONCEPT+ modles hybrides - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...VisualisationPrincipes:- Construirerapidementdensemble une vision- Visualiser Mthode: CROQUIS+ schmas.... lundi 4 octobre 2010 28. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele didesModlisation - iparticipaants: de trop, ni trop peul nyidesStratgie des Stratgie - prendre toutnien notecontenusFonctionnelle -Mthode: CONCEPT+ modles hybrides - Usages/Objectifs Business - avant-pendant-aprs l (pour mon persona) - cestner lalaboite daccueiquoi page - desig ons - questi - ...VisualisationPrincipes:- Construirerapidementdensemble une vision- Visualiser Mthode: CROQUIS+ schmas.... lundi 4 octobre 2010 29. StratgieIdeatioDIDES n densembleGENERATIONPrincipes: - gnrer pasplusmauvaisespossiblele didesModlisation - iparticipaants: de trop, ni trop peul nyidesStratgie des Stratgie - prendre toutnien notecontenusFonctionnelle -Mthode: CONCEPT+ modles hybrides - Diviser par questi/ons ence (par persona) - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...VisualisationPrincipes:- Construirerapidementdensemble une vision- Visualiser Mthode: CROQUIS+ schmas.... lundi 4 octobre 2010 30. *3ORGANISATIONlundi 4 octobre 2010 31. Primotre foncti nnelDefinition des fonctions,des formats, des principesdinteraction...mini-schemas ORGANISATIONObjectifs:- lister lesrelations,et leurs fonctions- obtenir(sansaccord du unclient le perdredans les details),- fairmatiobudgetlaet unee unesti n deproduction lundi 4 octobre 2010 32. Primotre foncti nnelDefinition des fonctions,des formats, des principesdinteraction...mini-schemas ORGANISATIONObjectifs:- lister lesrelations,et leurs fonctions- obtenir(sansaccord du unclient le perdredans les details),- fairmatiobudgetlaet unee unesti n deproduction lundi 4 octobre 2010 33. Primotre foncti nnelDefinition des fonctions,des formats, des principesdinteraction...mini-schemas ORGANISATIONObjectifs:- lister lesrelations,et leurs fonctions- obtenir(sansaccord du unclient le perdredans les details),- fairmatiobudgetlaet unee unesti n deproduction lundi 4 octobre 2010 34. Primotre foncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction...Tableaumini-schemasMatrice des de page ORGANISATION contenusObjectifs:- lister lesrelations,et leurs fonctions- obtenir(sansaccord du unclient le perdredans les details),- fairmatiobudgetlaet unee unesti n deproduction lundi 4 octobre 2010 35. Primotre foncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction...Tableaumini-schemasMatrice des de page ORGANISATION contenusObjectifs:- lister lesrelations,et leurs fonctions- obtenir(sansaccord du unclient le perdredans les details),- fairmatiobudgetlaet unee unesti n deproduction lundi 4 octobre 2010 36. Primotre foncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction...Tableaumini-schemasMatrice des de page ORGANISATION contenusObjectifs:- lister lesrelations,et leurs fonctions- obtenir(sansaccord du unclient le perdredans les details),- fairmatiobudgetlaet unee unesti n deproduction lundi 4 octobre 2010 37. Primotre foncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction... Tableaumini-schemas Matrice des de pageORGANISATION contenusObjectifs:- lister lesrelations,et leurs fonctionsStructure- obtenir(sansaccord du un Plan de siteArborescenceclient le perdre LogiqueMthode:dans les details), densemble -Vue dtailletableur- fairmatiobudgetlaet unee unesti n de Mthode: schma -Nommageou arbreproduction-Rfrences lundi 4 octobre 2010 38. Primotre foncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction... Tableaumini-schemas Matrice des de pageORGANISATION contenus + Optimisation Moteur de Recherche + Flux oprationnel ditorialObjectifs:- lister lesrelations,et leurs fonctionsStructure- obtenir(sansaccord du un Plan de siteArborescenceclient le perdre Logique Mthode:dans les details), densemble -Vue dtaille tableur- fairmatiobudgetlaet unee unesti n de Mthode: schma -Nommage ou arbreproduction-Rfrences lundi 4 octobre 2010 39. Primotre foncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction... Tableaumini-schemas Matrice des de pageORGANISATION contenusObjectifs:- lister lesrelations,et leurs fonctionsStructure- obtenir(sansaccord du un Plan de siteArborescenceclient le perdre LogiqueMthode:dans les details), densemble -Vue dtailletableur- fairmatiobudgetlaet unee unesti n de Mthode: schma -Nommageou arbreproduction-Rfrences lundi 4 octobre 2010 40. *4DESIGNlundi 4 octobre 2010 41. Architectured,information Shmas deFlux structure` logiques (wireframes)DESIGNlundi 4 octobre 2010 42. Architectured,information Shmas deFlux structure` logiques (wireframes)DESIGNlundi 4 octobre 2010 43. Architectured,information Shmas deFlux structure` logiques (wireframes)DESIGNlundi 4 octobre 2010 44. Architectured,information Shmas deFlux structure` logiques (wireframes)DESIGNlundi 4 octobre 2010 45. Architectured,information Shmas deFlux structure` logiques (wireframes)DESIGNlundi 4 octobre 2010 46. Architectured,information d Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets lundi 4 octobre 2010 47. Architectured,information d Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets lundi 4 octobre 2010 48. Architectured,information d Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets lundi 4 octobre 2010 49. Architectured,information d Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets lundi 4 octobre 2010 50. Architectured,informationd Design on,interacti Shmas deFlux Charte Comportements dinteraction structure` logiques (wireframes)DESIGNdes objetsPrototype Basse Moyenne Haute dfinitiondfinitiondfinition - Papier- Wiqruables cli eframes - Prototype de dveloppement - Balsamiq- SimulationHTML/CSS/DOM ou FLASHFlash ou autre lundi 4 octobre 2010 51. Architectured,informationd Design on,interacti Shmas deFlux Charte Comportements dinteraction structure` logiques (wireframes)DESIGNdes objetsPrototype Basse Moyenne Haute dfinitiondfinitiondfinition - Papier- Wiqruables cli eframes - Prototype de dveloppement - Balsamiq- SimulationHTML/CSS/DOM ou FLASHFlash ou autre lundi 4 octobre 2010 52. Architectured,informationd Design on,interacti Shmas deFlux Charte Comportements dinteraction structure` logiques (wireframes)DESIGNdes objetsPrototype Basse Moyenne Haute dfinitiondfinitiondfinition - Papier- Wiqruables cli eframes - Prototype de dveloppement - Balsamiq- SimulationHTML/CSS/DOM ou FLASHFlash ou autre lundi 4 octobre 2010 53. *5SUIVI DE PRODUCTIONlundi 4 octobre 2010 54. Specifications ProductionProduction SpecificationsFonctionnelles graphique de contenus techniquesSUIVI DE PRODUCTIONlundi 4 octobre 2010 55. SpecificationsProductionProduction SpecificationsFonctionnellesgraphique de contenus techniques SUIVI DE PRODUCTIONPRODUCTIONGABARITS & OBJETS DES SHEMAS DEObjectifs:STRUCTURE (WIREFRAMES)- Ratimnalisle dveloppemento er les gabarits- Opti iser - a fairefierModlisation Description desSTATUS - a modi de lorganisation composants - validdes gabarits lundi 4 octobre 2010 56. SpecificationsProductionProduction SpecificationsFonctionnellesgraphique de contenus techniques SUIVI DE PRODUCTIONPRODUCTIONGABARITS & OBJETS DES SHEMAS DEObjectifs:STRUCTURE (WIREFRAMES)- Ratimnalisle dveloppemento er les gabarits- Opti iser - a fairefierModlisation Description desSTATUS - a modi de lorganisation composants - validdes gabarits lundi 4 octobre 2010 57. SpecificationsProductionProduction SpecificationsFonctionnellesgraphique de contenus techniques SUIVI DE PRODUCTIONPRODUCTIONGABARITS & OBJETS DES SHEMAS DEObjectifs:STRUCTURE (WIREFRAMES)- Ratimnalisle dveloppemento er les gabarits- Opti iser - a fairefierModlisation Description desSTATUS - a modi de lorganisation composants - validdes gabarits lundi 4 octobre 2010 58. Specifications ProductionProduction SpecificationsFonctionnelles graphique de contenus techniques Designer dinterface Chef de projet + techno.ITERATIONArchitectedinformationSUIVI DE PRODUCTIONPRODUCTION GABARITS & OBJETS DES SHEMAS DE Objectifs:STRUCTURE (WIREFRAMES) - Ratimnalisle dveloppement o er les gabarits - Opti iser - a fairefier Modlisation Description desSTATUS - a modide lorganisation composants - valid des gabarits lundi 4 octobre 2010 59. *6PROCESSUSDENSEMBLE (CONCLUSION) cest presque fini... ;-) lundi 4 octobre 2010 60. AGILIT DU PROCESSUS Dcouverte ConceptOrganisationDesignProduction Niveau dengagementNiveau dengagementDegrs de dfinition Inspir par UX Matters: http://tiny.cc/ux-process-source lundi 4 octobre 2010 61. AGILIT DU PROCESSUS Dcouverte Concept Organisation DesignProduction Niveau dengagementNiveau dengagementITERATION Degrs de dfinition - Recherches - Ideation- Primtre - Schmas destructure- Specifications utilisateurs - Esquisses fonctionnel fonctionelles - Personas - Management des- Flux logiques - Production graphique- Modlisation de la contenus - Rdaction - benchmarkstratgie editorialefonctionnelle - Production de comptitif etet fonctionnelle - Structure de sitecontenus fonctionnel- Ralisation deprototype Inspir par UX Matters: http://tiny.cc/ux-process-source lundi 4 octobre 2010 62. * attentionmerci de votre :-)Matthieu Mingasson Head of UX DesignLinkedin.com/in/mingasson lundi 4 octobre 2010