1. * CONCEVOIR POURLEXPERIENCE UTILISATEURRVISION POUR TOUS

2. QUEL EST VOTRE PROCESS DE CONCEPTION ? DESIGNPanique non Validation oui Livr en Client retardINSPIR PAR : smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/ 3. DesignContenu UX/IA BusinessTechnologie 4. DesignFormeContenu FondObjectif Business Fonction Technologie 5. DesignFormeContenu FondObjectif Business Fonction Technologie 6. 5 NIVEAUX1. DECOUVERTE2. CONCEPT3. ORGANISATION4. DESIGN5. MANAGEMENT DE PRODUCTION 7. *1DECOUVERTE 8. RecherchesUtilisateurs- Sources: metrics, analyses...- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTE 9. RecherchesUtilisateurs- Sources: metrics, analyses...- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTE 10. RecherchesUtilisateurs- Sources: metrics, analyses...- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTEAudit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacit, organisation... 11. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTEAudit - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 12. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTEAudit - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 13. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTEAudit - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 14. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTE Benchmark- Collecte, capture,Auditveille applique - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 15. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTE Benchmark- Collecte, capture,Auditveille applique - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 16. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif +QualitatifDCOUVERTE Benchmark- Collecte, capture,Auditveille applique - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 17. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif GRILLE DESYNTHSE +QualitatifDCOUVERTE Benchmark- Collecte, capture,Auditveille applique - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 18. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif GRILLE DESYNTHSE +QualitatifDCOUVERTE Benchmark- Collecte, capture,Auditveille applique - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 19. Recherches Modles UtilisateursUtilisateurs - Segments: march - Personas: comportements- Sources: metrics, analyses...- Scnario dusage: outil conceptuel- Recherches: ethnographie...Quantitatif GRILLE DESYNTHSE +QualitatifDCOUVERTE Benchmark- Collecte, capture,Auditveille applique - Sources: contenus, experienceBusinessanalyst - Besoins: audit, demande... - Equipe: capacit, organisation... 20. *2CONCEPT 21. IdeatioDIDESGENERATION n- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpri- Storyquoi la page daccueil (par persona)- Cestner la boite- Desig- ...CONCEPT 22. IdeatioDIDESGENERATION n- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpri- Storyquoi la page daccueil (par persona)- Cestner la boite- Desig- ... CONCEPT source: http://www.learninglab.jumpassociates.com/?p=113 23. IdeatioDIDESGENERATION n- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpri- Storyquoi la page daccueil (par persona)- Cestner la boite- Desig- ...CONCEPTsource: adaptive path 24. IdeatioDIDESGENERATION n- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpri- Storyquoi la page daccueil (par persona)- Cestner la boite- Desig- ...CONCEPTsource: http://weizhou.wordpress.com/2008/07/07/prototype/ 25. IdeatioDIDESGENERATION n- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpri- Storyquoi la page daccueil (par persona)- Cestner la boite- Desig- ...CONCEPT 26. IdeatioDIDESGENERATION n- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpri- Storyquoi la page daccueil (par persona)- Cestner la boite- Desig- ...CONCEPT 27. IdeatioDIDES nGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona)- Cestner la boite- Desig- ...CONCEPT 28. StratgieIdeatioDIDES ndensembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides 29. StratgieIdeatioDIDES ndensembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides 30. StratgieIdeatioDIDES ndensembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides 31. StratgieIdeatioDIDES ndensembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides 32. StratgieIdeatioDIDES ndensembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides 33. StratgieIdeatioDIDES ndensembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides 34. StratgieIdeatioDIDES ndensembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides 35. StratgieIdeatioDIDES ndensembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpriModlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides 36. StratgieIdeatioDIDES n densembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpri Modlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides Visualisation Principes: - Construirerapidementdensembleune vision - Visualiser Mthode:CROQUIS 37. Stratgie IdeatioDIDESn densemble GENERATION Principes:- gnrer pasplusmauvaisespossible le dides Modlisation- iparticipaants: de trop, ni trop peu l nyidesStratgie des Stratgie- prendre toutnien notecontenusFonctionnelle- Mthode: CONCEPT+ modles hybrides- Usages/Objectifs Business- avant-pendant-aprs l (pour mon persona)- cestner lalaboite daccuei quoi page- desig ons- questi- ...Visualisation Principes: - Construirerapidementdensembleune vision - VisualiserMthode: CROQUIS + schmas.... 38. Stratgie IdeatioDIDESn densemble GENERATION Principes:- gnrer pasplusmauvaisespossible le dides Modlisation- iparticipaants: de trop, ni trop peu l nyidesStratgie des Stratgie- prendre toutnien notecontenusFonctionnelle- Mthode: CONCEPT+ modles hybrides- Usages/Objectifs Business- avant-pendant-aprs l (pour mon persona)- cestner lalaboite daccuei quoi page- desig ons- questi- ...Visualisation Principes: - Construirerapidementdensembleune vision - VisualiserMthode: CROQUIS + schmas.... 39. Stratgie IdeatioDIDESn densemble GENERATION Principes:- gnrer pasplusmauvaisespossible le dides Modlisation- iparticipaants: de trop, ni trop peu l nyidesStratgie des Stratgie- prendre toutnien notecontenusFonctionnelle- Mthode: CONCEPT+ modles hybrides- Usages/Objectifs Business- avant-pendant-aprs l (pour mon persona)- cestner lalaboite daccuei quoi page- desig ons- questi- ...Visualisation Principes: - Construirerapidementdensembleune vision - VisualiserMthode: CROQUIS + schmas.... 40. StratgieIdeatioDIDES n densembleGENERATION- Diviser par questi/ons ence- Scnaritelling / boardingo dusage dexpri Modlisation- Storyquoi la page daccueil (par persona) Stratgie desStratgie- Cestner la boite- Desig contenus Fonctionnelle- ...CONCEPT+ modles hybrides Visualisation Principes: - Construirerapidementdensembleune vision - Visualiser Mthode:CROQUIS 41. *3ORGANISATION 42. Primotrefoncti nnelDefinition des fonctions,des formats, des principesdinteraction... ORGANISATION 43. Primotrefoncti nnelDefinition des fonctions,des formats, des principesdinteraction... ORGANISATION 44. Primotrefoncti nnelDefinition des fonctions,des formats, des principesdinteraction... ORGANISATION 45. Primotrefoncti nnelDefinition des fonctions,des formats, des principesdinteraction... ORGANISATION 46. Primotre foncti nnelDefinition des fonctions,des formats, des principesdinteraction... ORGANISATIONObjectifs:- lister rles fonctions ent- obteniun un accord cli- fairmatiobudgetproductioneesti n de et une 47. Primotrefoncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction...TableauMatrice des de page ORGANISATION contenus 48. Primotrefoncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction...TableauMatrice des de page ORGANISATION contenus 49. Primotrefoncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction...TableauMatrice des de page ORGANISATION contenus 50. Primotrefoncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction...TableauMatrice des de page ORGANISATION contenus 51. Primotrefoncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction... Tableau Matrice des de pageORGANISATION contenusStructurePlan de siteArborescence LogiqueMthode: Mthode:densemble -Vue dtailletableur schma -Nommageou arbre-Rfrences 52. Primotrefoncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction... Tableau Matrice des de pageORGANISATION contenusStructurePlan de siteArborescence LogiqueMthode: Mthode:densemble -Vue dtailletableur schma -Nommageou arbre-Rfrences 53. Primotrefoncti nnelDefinition des fonctions, Management des Contenusdes formats, des principesdinteraction... Tableau Matrice des de pageORGANISATION contenusStructurePlan de siteArborescence LogiqueMthode: Mthode:densemble -Vue dtailletableur schma -Nommageou arbre-Rfrences 54. *4DESIGN 55. Desiognnel foncti nShmas deFluxstructure` logiques(wireframes)DESIGN 56. Desiognnel foncti nShmas deFluxstructure` logiques(wireframes)DESIGN 57. Desiognnel foncti nShmas deFluxstructure` logiques(wireframes)DESIGN 58. Desiognnel foncti nShmas deFluxstructure` logiques(wireframes)DESIGN 59. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objets 60. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objets 61. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objets 62. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objets 63. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objets 64. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objets 65. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objetsPrototype 66. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets Prototype Basse dfinition- Papier- Balsamiq 67. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne dfinitiondfinition- Papier - Wiqruables cli eframes- Balsamiq - Demo clientFlash ou autre 68. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne Haute dfinitiondfinitiondfinition- Papier - Wiqruables - Prototype de cli eframesdveloppement- Balsamiq - Demo client HTML/CSS/DOM ou FLASHFlash ou autre 69. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objetsPrototype 70. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets Prototype Basse dfinition- Papier- Balsamiq 71. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne dfinitiondfinition- Papier - Wiqruables cli eframes- Balsamiq - Demo clientFlash ou autre 72. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne Haute dfinitiondfinitiondfinition- Papier - Wiqruables - Prototype de cli eframesdveloppement- Balsamiq - Demo client HTML/CSS/DOM ou FLASHFlash ou autre 73. Desiognnel foncti nd Design on,interactiShmas deFluxCharte Comportements dinteractionstructure` logiques(wireframes)DESIGN des objetsPrototype 74. Desiognnelfoncti nd Design on ,interacti Shmas deFluxCharteComportements dinteraction structure` logiques (wireframes)DESIGN des objets Prototype Basse dfinition- Papier- Balsamiq 75. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne dfinitiondfinition- Papier - Wiqruables cli eframes- Balsamiq - Demo clientFlash ou autre 76. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne Haute dfinitiondfinitiondfinition- Papier - Wiqruables - Prototype de cli eframesdveloppement- Balsamiq - Demo client HTML/CSS/DOM ou FLASHFlash ou autre 77. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne Haute dfinitiondfinitiondfinition- Papier - Wiqruables - Prototype de cli eframesdveloppement- Balsamiq - Demo client HTML/CSS/DOM ou FLASHFlash ou autre 78. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne Haute dfinitiondfinitiondfinition- Papier - Wiqruables - Prototype de cli eframesdveloppement- Balsamiq - Demo client HTML/CSS/DOM ou FLASHFlash ou autre 79. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Basse Moyenne Haute dfinitiondfinitiondfinition- Papier - Wiqruables - Prototype de cli eframesdveloppement- Balsamiq - Demo client HTML/CSS/DOM ou FLASHFlash ou autre 80. Desiognnelfoncti nd Design on ,interacti Shmas de Flux CharteComportements dinteraction structure`logiques (wireframes)DESIGN des objets Prototype Interface Basse Moyenne Haute dfinitiondfinitiondfinition Lisibilit Composants (technologie)(fond)- Papier - Wiqruables - Prototype de cli eframesdveloppement Grille Navigation- Balsamiq - Demo client HTML/CSS/DOM (forme) (fonction) ou FLASHFlash ou autre 81. * 5MANAGEMENT DEPRODUCTION 82. Specifications ProductionProduction SpecificationsFonctionnelles graphique de contenus techniques MANAGEMENT DE PRODUCTION 83. SpecificationsProductionProduction SpecificationsFonctionnellesgraphique de contenus techniquesMANAGEMENT DE PRODUCTION PRODUCTIONDES SHEMAS DE STRUCTURE(WIREFRAMES) - a fairefierSTATUS - a modi - valid 84. SpecificationsProductionProduction SpecificationsFonctionnellesgraphique de contenus techniquesMANAGEMENT DE PRODUCTION PRODUCTIONDES SHEMAS DE STRUCTURE(WIREFRAMES) - a fairefierSTATUS - a modi - valid 85. SpecificationsProductionProduction SpecificationsFonctionnellesgraphique de contenus techniquesMANAGEMENT DE PRODUCTION PRODUCTION GABARITS & OBJETSDES SHEMAS DE Objectifs: STRUCTURE(WIREFRAMES)- Ratimnalisle dveloppemento er les gabarits- Opti iser - a fairefierModlisation Description desSTATUS - a modi de lorganisation composants - validdes gabarits 86. SpecificationsProductionProduction SpecificationsFonctionnellesgraphique de contenus techniquesMANAGEMENT DE PRODUCTION PRODUCTION GABARITS & OBJETSDES SHEMAS DE Objectifs: STRUCTURE(WIREFRAMES)- Ratimnalisle dveloppemento er les gabarits- Opti iser - a fairefierModlisation Description desSTATUS - a modi de lorganisation composants - validdes gabarits 87. SpecificationsProductionProduction SpecificationsFonctionnellesgraphique de contenus techniquesMANAGEMENT DE PRODUCTION PRODUCTION GABARITS & OBJETSDES SHEMAS DE Objectifs: STRUCTURE(WIREFRAMES)- Ratimnalisle dveloppemento er les gabarits- Opti iser - a fairefierModlisation Description desSTATUS - a modi de lorganisation composants - validdes gabarits 88. SpecificationsProduction Production SpecificationsFonctionnellesgraphiquede contenus techniques architecte n dinformatio chef de ITRATION projet designerdinterfaceMANAGEMENT DE PRODUCTION PRODUCTIONGABARITS & OBJETSDES SHEMAS DEObjectifs: STRUCTURE(WIREFRAMES) - Ratimnalisle dveloppement o er les gabarits - Opti iser - a fairefierModlisation Description desSTATUS - a modi de lorganisation composants - validdes gabarits 89. *Conclusion 90. AGILIT DU PROCESSUSDcouverte ConceptOrganisationDesignProductionNiveau dengagement Niveau dengagement Degrs de dfinitionInspir par UX Matters: http://tiny.cc/ux-process-source 91. AGILIT DU PROCESSUSDcouverte Concept Organisation DesignProductionNiveau dengagement Niveau dengagementITERATIONS Degrs de dfinition- Recherches - Ideation- Primtre - Schmas de structure - Specificationsutilisateurs - Esquisses fonctionnel fonctionelles- Personas - Management des- Flux logiques - Production graphique - Modlisation de la contenus - Rdaction- benchmarkstratgie editorialefonctionnelle - Production decomptitif etet fonctionnelle - Structure de sitecontenusfonctionnel- Ralisation de prototypeInspir par UX Matters: http://tiny.cc/ux-process-source 92. *Discutons sur..@activeside #parisweblinkedin.com/in/mingassonslideshare.net/activesidedesign.activeside.net