Le design d'expérience utilisateur - Bases

1. * CONCEVOIR POUR L’EXPERIENCE UTILISATEUR RÉVISION POUR TOUS

2. QUEL EST VOTRE PROCESS DE CONCEPTION ? DESIGN Panique non Validation oui Livré en Client retard INSPIRÉ PAR : smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

3. Design Contenu UX/IA Business Technologie

4. Design Forme Contenu Fond Objectif Business Fonction Technologie

5. Design Forme Contenu Fond Objectif Business Fonction Technologie

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 + Qualitatif DÉCOUVERTE

9. Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE

10. Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Audit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...

11. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Audit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...

14. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...

17. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif GRILLE DE SYNTHÈSE + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...

20. * 2 CONCEPT

21. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT

22. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: http://www.learninglab.jumpassociates.com/?p=113

23. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: adaptive path

24. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: http://weizhou.wordpress.com/2008/07/07/prototype/

27. “IdeatioD’IDÉES n” GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT

28. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides

36. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS

37. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION Principes: - générer pasplusmauvaisespossible le d’idées Modélisation - iparticipaants: de trop, ni trop peu l n’y idées Stratégie des Stratégie - prendre toutnien note contenus Fonctionnelle - Méthode: CONCEPT + modèles hybrides - Usages/Objectifs Business - avant-pendant-après l (pour mon persona) - c’estner lalaboite d’accuei quoi page - desig ons - questi - ... Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS + schémas....

40. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS

41. *3 ORGANISATION

42. Périmoètre foncti nnel Definition des fonctions, des formats, des principes d’interaction... ORGANISATION

46. Périmoètre foncti nnel Definition des fonctions, des formats, des principes d’interaction... ORGANISATION Objectifs: - lister rles fonctions ent - obteniun un accord cli - fairmatiobudgetproduction e esti n de et une

47. Périmoètre foncti nnel Definition des fonctions, Management des Contenus des formats, des principes d’interaction... Tableau Matrice des de page ORGANISATION contenus

51. Périmoètre foncti nnel Definition des fonctions, Management des Contenus des formats, des principes d’interaction... Tableau Matrice des de page ORGANISATION contenus Structure Plan de site Arborescence Logique Méthode: Méthode: d’ensemble -Vue détaillée tableur schéma -Nommage ou arbre -Références

54. * 4 DESIGN

55. Desiognnel foncti n Shémas de Flux structure` logiques (wireframes) DESIGN

59. Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets

65. Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype

66. Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype Basse définition - Papier - Balsamiq

67. Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype Basse Moyenne définition définition - Papier - Wiqruables cli eframes - Balsamiq - Demo client Flash ou autre

68. Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype Basse Moyenne Haute définition définition définition - Papier - Wiqruables - Prototype de cli eframes développement - Balsamiq - Demo client HTML/CSS/DOM ou FLASH Flash ou autre

80. Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype Interface Basse Moyenne Haute définition définition définition Lisibilité Composants (technologie) (fond) - Papier - Wiqruables - Prototype de cli eframes développement Grille Navigation - Balsamiq - Demo client HTML/CSS/DOM (forme) (fonction) ou FLASH Flash ou autre

81. * 5 MANAGEMENT DE PRODUCTION

82. Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques MANAGEMENT DE PRODUCTION

83. Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques MANAGEMENT DE PRODUCTION PRODUCTION DES SHEMAS DE STRUCTURE (WIREFRAMES) - a fairefier STATUS - a modi - validé

84. Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques MANAGEMENT DE PRODUCTION PRODUCTION DES SHEMAS DE STRUCTURE (WIREFRAMES) - a fairefier STATUS - a modi - validé

85. Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques MANAGEMENT DE PRODUCTION PRODUCTION GABARITS & OBJETS DES SHEMAS DE Objectifs: STRUCTURE (WIREFRAMES) - Ratimnalisle développement o er les gabarits - Opti iser - a fairefier Modélisation Description des STATUS - a modi de l’organisation composants - validé des gabarits

88. Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques architecte n d’informatio chef de ITÉRATION projet designer d’interface MANAGEMENT DE PRODUCTION PRODUCTION GABARITS & OBJETS DES SHEMAS DE Objectifs: STRUCTURE (WIREFRAMES) - Ratimnalisle développement o er les gabarits - Opti iser - a fairefier Modélisation Description des STATUS - a modi de l’organisation composants - validé des gabarits

89. * Conclusion

90. AGILITÉ DU PROCESSUS Découverte Concept Organisation Design Production Niveau d’engagement Niveau d’engagement Degrés de définition Inspiré par UX Matters: http://tiny.cc/ux-process-source

91. AGILITÉ DU PROCESSUS Découverte Concept Organisation Design Production Niveau d’engagement Niveau d’engagement ITERATIONS Degrés de définition - Recherches - “Ideation” - Périmètre - Schémas de structure - Specifications utilisateurs - Esquisses fonctionnel fonctionelles - Personas - Management des - Flux logiques - Production graphique - Modélisation de la contenus - Rédaction - benchmark stratégie editoriale fonctionnelle - Production de compétitif et et fonctionnelle - Structure de site contenus fonctionnel - Réalisation de prototype 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

Le design d'expérience utilisateur - Bases

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (17)

Similar a Le design d'expérience utilisateur - Bases

Similar a Le design d'expérience utilisateur - Bases (20)

Más de Documation Gestion de l'information et du document numérique en entreprise

Más de Documation Gestion de l'information et du document numérique en entreprise (20)

Le design d'expérience utilisateur - Bases