UX methode-paris web

  • Published on
    31-Oct-2014

  • View
    27

  • Download
    1

DESCRIPTION

Prsentation de la mthode UX en 5 niveaux. Prsentation Paris Web 2010.

Transcript

1. *CONCEVOIR POUR LEXPERIENCE UTILISATEUR RVISION POUR TOUS 2. QUEL EST VOTRE PROCESS DE CONCEPTION ? DESIGN Panique non Validation oui Livr enClient retard INSPIR PAR : smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/ 3. DesignContenu UX/IA Business Technologie 4. Design FormeContenu FondObjectif Business FonctionTechnologie 5. Design FormeContenu FondObjectif Business FonctionTechnologie 6. 5 NIVEAUX 1. DECOUVERTE 2. CONCEPT 3. ORGANISATION 4. DESIGN 5. MANAGEMENT DE PRODUCTION 7. *1 DECOUVERTE 8. Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTE 9. Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTE 10. Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTE Audit- Sources: contenus, experience Businessanalyst- Besoins: audit, demande...- Equipe: capacit, organisation... 11. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTE Audit- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 12. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTE Audit- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 13. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTE Audit- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 14. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTEBenchmark - Collecte, capture, Auditveille applique- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 15. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTEBenchmark - Collecte, capture, Auditveille applique- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 16. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif+QualitatifDCOUVERTEBenchmark - Collecte, capture, Auditveille applique- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 17. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif GRILLE DE SYNTHSE+QualitatifDCOUVERTEBenchmark - Collecte, capture, Auditveille applique- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 18. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif GRILLE DE SYNTHSE+QualitatifDCOUVERTEBenchmark - Collecte, capture, Auditveille applique- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 19. Recherches Modles Utilisateurs Utilisateurs - Segments: march- Personas: comportements - Sources: metrics, analyses...- Scnario dusage: outil conceptuel - Recherches: ethnographie... Quantitatif GRILLE DE SYNTHSE+QualitatifDCOUVERTEBenchmark - Collecte, capture, Auditveille applique- Sources: contenus, experienceBusiness analyst- Besoins: audit, demande...- Equipe: capacit, organisation... 20. * 2 CONCEPT 21. IdeatioDIDES GENERATIONn - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...CONCEPT 22. IdeatioDIDES GENERATIONn - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ... CONCEPTsource: http://www.learninglab.jumpassociates.com/?p=113 23. IdeatioDIDES GENERATIONn - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...CONCEPT source: adaptive path 24. IdeatioDIDES GENERATIONn - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...CONCEPT source: http://weizhou.wordpress.com/2008/07/07/prototype/ 25. IdeatioDIDES GENERATIONn - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...CONCEPT 26. IdeatioDIDES GENERATIONn - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...CONCEPT 27. IdeatioDIDESn GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) - Cestner la boite - Desig - ...CONCEPT 28. Stratgie IdeatioDIDESndensemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides 29. Stratgie IdeatioDIDESndensemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides 30. Stratgie IdeatioDIDESndensemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides 31. Stratgie IdeatioDIDESndensemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides 32. Stratgie IdeatioDIDESndensemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides 33. Stratgie IdeatioDIDESndensemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides 34. Stratgie IdeatioDIDESndensemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides 35. Stratgie IdeatioDIDESndensemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpri Modlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides 36. Stratgie IdeatioDIDESn densemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpriModlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides VisualisationPrincipes:- Construirerapidementdensemble une vision- VisualiserMthode:CROQUIS 37. 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.... 38. 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.... 39. 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.... 40. Stratgie IdeatioDIDESn densemble GENERATION - Diviser par questi/ons ence - Scnaritelling / boarding o dusage dexpriModlisation - Storyquoi la page daccueil (par persona) Stratgie desStratgie - Cestner la boite - Desig contenus Fonctionnelle - ...CONCEPT+ modles hybrides VisualisationPrincipes:- Construirerapidementdensemble une vision- VisualiserMthode:CROQUIS 41. *3 ORGANISATION 42. Primotre foncti nnel Definition des fonctions, des formats, des principes dinteraction... ORGANISATION 43. Primotre foncti nnel Definition des fonctions, des formats, des principes dinteraction... ORGANISATION 44. Primotre foncti nnel Definition des fonctions, des formats, des principes dinteraction... ORGANISATION 45. Primotre foncti nnel Definition des fonctions, des formats, des principes dinteraction... ORGANISATION 46. Primotrefoncti nnel Definition des fonctions, des formats, des principes dinteraction... ORGANISATION Objectifs: - lister rles fonctions ent - obteniun un accord cli - fairmatiobudgetproduction e esti n deet une 47. Primotre foncti nnel Definition des fonctions,Management desContenus des formats, des principes dinteraction... Tableau Matrice des de pageORGANISATION contenus 48. Primotre foncti nnel Definition des fonctions,Management desContenus des formats, des principes dinteraction... Tableau Matrice des de pageORGANISATION contenus 49. Primotre foncti nnel Definition des fonctions,Management desContenus des formats, des principes dinteraction... Tableau Matrice des de pageORGANISATION contenus 50. Primotre foncti nnel Definition des fonctions,Management desContenus des formats, des principes dinteraction... Tableau Matrice des de pageORGANISATION contenus 51. Primotre foncti nnel Definition des fonctions,Management desContenus des formats, des principes dinteraction...TableauMatrice des de page ORGANISATION contenus Structure Plan de siteArborescenceLogiqueMthode:Mthode:densemble -Vue dtailletableurschma -Nommageou arbre -Rfrences 52. Primotre foncti nnel Definition des fonctions,Management desContenus des formats, des principes dinteraction...TableauMatrice des de page ORGANISATION contenus Structure Plan de siteArborescenceLogiqueMthode:Mthode:densemble -Vue dtailletableurschma -Nommageou arbre -Rfrences 53. Primotre foncti nnel Definition des fonctions,Management desContenus des formats, des principes dinteraction...TableauMatrice des de page ORGANISATION contenus Structure Plan de siteArborescenceLogiqueMthode:Mthode:densemble -Vue dtailletableurschma -Nommageou arbre -Rfrences 54. * 4 DESIGN 55. Desiognnelfoncti n Shmas deFlux structure` logiques (wireframes)DESIGN 56. Desiognnelfoncti n Shmas deFlux structure` logiques (wireframes)DESIGN 57. Desiognnelfoncti n Shmas deFlux structure` logiques (wireframes)DESIGN 58. Desiognnelfoncti n Shmas deFlux structure` logiques (wireframes)DESIGN 59. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets 60. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets 61. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets 62. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets 63. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets 64. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets 65. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets Prototype 66. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objetsPrototypeBassedfinition - Papier - Balsamiq 67. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyennedfinitiondfinition - Papier - Wiqruablescli eframes - Balsamiq - Demo client Flash ou autre 68. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyenne Hautedfinitiondfinitiondfinition - Papier - Wiqruables - Prototype decli eframesdveloppement - Balsamiq - Demo client HTML/CSS/DOMou FLASH Flash ou autre 69. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets Prototype 70. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objetsPrototypeBassedfinition - Papier - Balsamiq 71. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyennedfinitiondfinition - Papier - Wiqruablescli eframes - Balsamiq - Demo client Flash ou autre 72. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyenne Hautedfinitiondfinitiondfinition - Papier - Wiqruables - Prototype decli eframesdveloppement - Balsamiq - Demo client HTML/CSS/DOMou FLASH Flash ou autre 73. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets Prototype 74. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objetsPrototypeBassedfinition - Papier - Balsamiq 75. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyennedfinitiondfinition - Papier - Wiqruablescli eframes - Balsamiq - Demo client Flash ou autre 76. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyenne Hautedfinitiondfinitiondfinition - Papier - Wiqruables - Prototype decli eframesdveloppement - Balsamiq - Demo client HTML/CSS/DOMou FLASH Flash ou autre 77. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyenne Hautedfinitiondfinitiondfinition - Papier - Wiqruables - Prototype decli eframesdveloppement - Balsamiq - Demo client HTML/CSS/DOMou FLASH Flash ou autre 78. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyenne Hautedfinitiondfinitiondfinition - Papier - Wiqruables - Prototype decli eframesdveloppement - Balsamiq - Demo client HTML/CSS/DOMou FLASH Flash ou autre 79. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototypeBasse Moyenne Hautedfinitiondfinitiondfinition - Papier - Wiqruables - Prototype decli eframesdveloppement - Balsamiq - Demo client HTML/CSS/DOMou FLASH Flash ou autre 80. Desiognnel foncti nd Design on,interactiShmas de Flux Charte Comportements dinteractionstructure`logiques(wireframes)DESIGN des objetsPrototype InterfaceBasse Moyenne Hautedfinitiondfinitiondfinition Lisibilit Composants(technologie) (fond) - Papier - Wiqruables - Prototype decli eframesdveloppement Grille Navigation - Balsamiq - Demo client HTML/CSS/DOM(forme) (fonction)ou FLASH Flash ou autre 81. *5 MANAGEMENT DE PRODUCTION 82. Specifications ProductionProduction Specifications Fonctionnelles graphique de contenus techniquesMANAGEMENT DE PRODUCTION 83. SpecificationsProductionProduction Specifications Fonctionnellesgraphique de contenus techniques MANAGEMENT DE PRODUCTIONPRODUCTION DES SHEMAS DESTRUCTURE (WIREFRAMES)- a fairefier STATUS - a modi- valid 84. SpecificationsProductionProduction Specifications Fonctionnellesgraphique de contenus techniques MANAGEMENT DE PRODUCTIONPRODUCTION DES SHEMAS DESTRUCTURE (WIREFRAMES)- a fairefier STATUS - a modi- valid 85. SpecificationsProductionProduction Specifications Fonctionnellesgraphique de contenus techniques MANAGEMENT DE PRODUCTIONPRODUCTION GABARITS & OBJETS DES SHEMAS DE Objectifs:STRUCTURE (WIREFRAMES) - Ratimnalisle dveloppement o er les gabarits - Opti iser- a fairefierModlisation Description des STATUS - a modi de lorganisation composants- validdes gabarits 86. SpecificationsProductionProduction Specifications Fonctionnellesgraphique de contenus techniques MANAGEMENT DE PRODUCTIONPRODUCTION GABARITS & OBJETS DES SHEMAS DE Objectifs:STRUCTURE (WIREFRAMES) - Ratimnalisle dveloppement o er les gabarits - Opti iser- a fairefierModlisation Description des STATUS - a modi de lorganisation composants- validdes gabarits 87. SpecificationsProductionProduction Specifications Fonctionnellesgraphique de contenus techniques MANAGEMENT DE PRODUCTIONPRODUCTION GABARITS & OBJETS DES SHEMAS DE Objectifs:STRUCTURE (WIREFRAMES) - Ratimnalisle dveloppement o er les gabarits - Opti iser- a fairefierModlisation Description des STATUS - a modi de lorganisation composants- validdes gabarits 88. SpecificationsProduction Production Specifications Fonctionnellesgraphiquede contenus techniquesarchitecte ndinformatiochef de ITRATIONprojet designer dinterface MANAGEMENT DE PRODUCTIONPRODUCTIONGABARITS & OBJETS DES SHEMAS DEObjectifs:STRUCTURE (WIREFRAMES)- Ratimnalisle dveloppemento er les gabarits- Opti iser- a fairefierModlisation Description des STATUS - a modi de lorganisation composants- validdes gabarits 89. * Conclusion 90. AGILIT DU PROCESSUS Dcouverte ConceptOrganisationDesignProduction Niveau dengagementNiveau dengagementDegrs de dfinition Inspir par UX Matters: http://tiny.cc/ux-process-source 91. AGILIT DU PROCESSUS Dcouverte Concept Organisation DesignProduction Niveau dengagementNiveau dengagement ITERATIONS 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 92. * Discutons sur.. @activeside #parisweb linkedin.com/in/mingasson slideshare.net/activeside design.activeside.net