Design d’intéraction     Cours #2Tuesday, September 20, 2011
Avez-vous      fait vos      devoirs?Tuesday, September 20, 2011
Devoir                                Évaluer 3 designs                              (Choisir au moins un design d’interfa...
Processus de      design d’un produitTuesday, September 20, 2011
Waterfall               (classique)Tuesday, September 20, 2011
Waterfall                              http://en.wikipedia.org/wiki/Waterfall_modelTuesday, September 20, 2011
WaterfallTuesday, September 20, 2011
Livrables                              Requirements                              ★ Brief (Collecte dinformations)         ...
Livrables                              UX Design                              ★ Persona: (Utilisateurs-types)             ...
PersonasTuesday, September 20, 2011
WireframesTuesday, September 20, 2011
PDD                     aka Project Design DocumentTuesday, September 20, 2011
Livrables                              V Design                              ★ Brainstorm (collecte didées inspirantes)   ...
Livrables                              Implémentation (Production)                              ★ Documentation des exigen...
Livrables                              Test / Analyse                              ★ Environement de test                 ...
AgileTuesday, September 20, 2011
UX Agile                     http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.htmlTuesday, September...
UX Agile                     http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.htmlTuesday, September...
Agile                     http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html      http://www.slid...
Glossaire.Tuesday, September 20, 2011
UX     [User Experience Design]     Aspect du design qui répond à comment l’utilisateur va     utiliser, apprendre, et pec...
UX Design     Le design UX est un champ du design dexpérience. Il     concerne la création des modèles architecturaux et  ...
Ergonomie     On nomme ergonomie « létude scientifique de la relation     entre lhomme et ses moyens, méthodes et milieux ...
Tuesday, September 20, 2011
Gabarits     Le modèle (ou gabarit) permet de construire les pages     dun site web selon une trame (un squelette) de page...
Patterns     Les patrons sont des solutions aux problèmes     communs.Tuesday, September 20, 2011
Patterns     Chaque patron a 4 composantes:           1. un titre           2. un problème           3. un contexte       ...
Les patterns      peuvent être      combinés      ensembleTuesday, September 20, 2011
Jeu.Tuesday, September 20, 2011
Dessinez-moi un                                  WizywigTuesday, September 20, 2011
WYSIWYG     Problème:     “Je veux pouvoir écrire du texte et ajouter     des images, mais je ne sais pas écrire du     HT...
WYSIWYG     What You See Is What You GetTuesday, September 20, 2011
WYSIWYG     Solutions apportées:        • Donner à l’utilisateur une idée du              résultat final de son intéraction...
Dessinez-moi un                              Password Strength                                    MeterTuesday, September ...
Password      Strength Meter     Problème:     “Je veux pouvoir indiquer à mon utilisateur     que son mot de passe est sa...
Password      Strength MeterTuesday, September 20, 2011
Password      Strength Meter     Solutions apportées:        • Indique clairement à l’utilisateur si le mot              d...
Dessinez-moi un                                 carousselTuesday, September 20, 2011
Caroussel     Problème:     “Je veux avoir une idée du contenu qu’offre     ce site.”Tuesday, September 20, 2011
Caroussel     Problème:     “Je veux avoir une idée du contenu qu’offre     ce site.”         Attention!         Personne n...
CarousselTuesday, September 20, 2011
Caroussel     Solutions apportées:        • Permet d’économiser l’espace sur une              page et d’offrir une série de...
Dessinez-moi un fil                                   d’arianeTuesday, September 20, 2011
Fil d’ariane            a.k.a Breadcrumb     Problème:     “Je veux savoir où je suis dans ce site.”Tuesday, September 20,...
Fil d’ariane            a.k.a BreadcrumbTuesday, September 20, 2011
Fil d’ariane              a.k.a Breadcrumb     Solutions apportées:        • Permet à l’utilisateur de retrouver son      ...
Dessinez-moi un                                 accordéonTuesday, September 20, 2011
Accordéon     Problème:     “Je veux pouvoir survoler l’information     principale d’abord.”         Attention!         Pe...
AccordéonTuesday, September 20, 2011
AccordéonTuesday, September 20, 2011
Accordéon     Solutions apportées:        • Permet la navigation rapide et              thématique        • Permet d’affiche...
SprintTuesday, September 20, 2011
Dessinez-moi un                              menu déroulantTuesday, September 20, 2011
Menu déroulant      aka dropdown menu (Select)     Problème:     “Je veux naviguer ce site facilement.”Tuesday, September ...
Menu déroulant      aka dropdown menu (Select)Tuesday, September 20, 2011
Dessinez-moi un                              menu déroulant de                                 navigationTuesday, Septembe...
Menu déroulant (nav)      aka navigational dropdown menu     Problème:     “Je veux naviguer ce site facilement.”Tuesday, ...
Menu déroulant (nav)      aka navigational dropdown menuTuesday, September 20, 2011
Dessinez-moi                               un .toggle()Tuesday, September 20, 2011
Toggle Check Box        vrs.Tuesday, September 20, 2011
Toggle Check Box        vrs.     l’un ou l’autre                 peut être l’un et l’autreTuesday, September 20, 2011
Arbo.Tuesday, September 20, 2011
Arbo.                                                                                  Web	  site	  :	  Accueil           ...
Navigation principale       L’objectif de cet exercice :       ★         Organiser le contenu principal       ★         S’...
Navigation secondaireTuesday, September 20, 2011
Navigation secondaire                 L’objectif de cet exercice :                 ★      Trouver	  l’informa7on	  clé	  à...
Audit du      contenuTuesday, September 20, 2011
Audit de contenu                              L’objectif de cet exercice :                              ★   Connaître le c...
Audit de contenu   ★      Arborescence principale : Accueil, Société,          musique, ...   ★      Arborescence secondai...
Tri de carteTuesday, September 20, 2011
Tri de carte                              L’objectif de cet exercice :                              ★   Regrouper le conte...
Tri de carte                                                 Deux méthodes possibles:                                     ...
À vous de      jouer!Tuesday, September 20, 2011
Atelier                      Design et organisation 1                                   http://www.maisoncorbeil.com      ...
Prochain SlideShare
Chargement dans…5
×

Cour2 Design d'interaction

829 vues

Publié le

Voici le deuxième cours que j'ai donné au Collège Salette

Publié dans : Design
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
829
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
24
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cour2 Design d'interaction

  1. 1. Design d’intéraction Cours #2Tuesday, September 20, 2011
  2. 2. Avez-vous fait vos devoirs?Tuesday, September 20, 2011
  3. 3. Devoir Évaluer 3 designs (Choisir au moins un design d’interface) Quels sont les objectif(s) Comment auriez-vous innové ce design?Tuesday, September 20, 2011
  4. 4. Processus de design d’un produitTuesday, September 20, 2011
  5. 5. Waterfall (classique)Tuesday, September 20, 2011
  6. 6. Waterfall http://en.wikipedia.org/wiki/Waterfall_modelTuesday, September 20, 2011
  7. 7. WaterfallTuesday, September 20, 2011
  8. 8. Livrables Requirements ★ Brief (Collecte dinformations) ★ Collecte et analyse des metrics (Données du site) ★ Audit du site (Étude dutilisabilité des éléments existants) ★ Ethnographie ou entrevues (Définir le profil utilisateurs) ★ Benchmarking (Marché/Concurrence) ★ Card sorting (Le tri par cartes)Tuesday, September 20, 2011
  9. 9. Livrables UX Design ★ Persona: (Utilisateurs-types) ★ Plans du site et inventaire des contenus / arborescence ★ UseCase (Scénarios dutilisation) ★ Wireframes (Croquis décrans) ★ PDD ★ Test utilisateursTuesday, September 20, 2011
  10. 10. PersonasTuesday, September 20, 2011
  11. 11. WireframesTuesday, September 20, 2011
  12. 12. PDD aka Project Design DocumentTuesday, September 20, 2011
  13. 13. Livrables V Design ★ Brainstorm (collecte didées inspirantes) ★ Maquettes graphiques (visualisation précise du résultat final) ★ Itérations ★ PrototypageTuesday, September 20, 2011
  14. 14. Livrables Implémentation (Production) ★ Documentation des exigences d’affaires ★ Déclinaisons infographiques ★ Découpage ★ Intégration CSS/HTML ★ Programmation (Back end)Tuesday, September 20, 2011
  15. 15. Livrables Test / Analyse ★ Environement de test ★ Test utilisateurs ★ Modifications design (ux et v) ★ Déploiement ★ Modifications et tests ★ Mise en ligneTuesday, September 20, 2011
  16. 16. AgileTuesday, September 20, 2011
  17. 17. UX Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.htmlTuesday, September 20, 2011
  18. 18. UX Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.htmlTuesday, September 20, 2011
  19. 19. Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html http://www.slideshare.net/mgiudice/humancentered-design-meets-agile-development-presentation-625465Tuesday, September 20, 2011
  20. 20. Glossaire.Tuesday, September 20, 2011
  21. 21. UX [User Experience Design] Aspect du design qui répond à comment l’utilisateur va utiliser, apprendre, et pecevoir un produit. Ce domaine a les rascines dans l’ergonomie et l’aspect humain (human factor). L’objectif principal est de créer des systèmes entre l’homme et la machine de façon à créer une expérience intuitive et productive pour les deux. Ce domaine emprunte les lois et principes du Human Centered Design.Tuesday, September 20, 2011
  22. 22. UX Design Le design UX est un champ du design dexpérience. Il concerne la création des modèles architecturaux et interactifs qui affectent lexpérience-utilisateur dans un appareil ou un système. Étant donné son caractère subjectif, lexpérience-utilisateur ne peut être designée. On doit plutôt designer en fonction de lexpérience-utilisateur, en essayant dactiver certains types dexpérience. La portée de cette pratique couvre « tous les aspects de linteraction des utilisateurs avec le produit, incluant la façon dont il sera perçu, maîtrisé et utilisé. »Tuesday, September 20, 2011
  23. 23. Ergonomie On nomme ergonomie « létude scientifique de la relation entre lhomme et ses moyens, méthodes et milieux de travail » et lapplication de ses connaissances à la conception de systèmes « qui puissent être utilisés avec le maximum de confort, de sécurité et defficacité par le plus grand nombre. »Tuesday, September 20, 2011
  24. 24. Tuesday, September 20, 2011
  25. 25. Gabarits Le modèle (ou gabarit) permet de construire les pages dun site web selon une trame (un squelette) de page identique constituée déléments modifiablesTuesday, September 20, 2011
  26. 26. Patterns Les patrons sont des solutions aux problèmes communs.Tuesday, September 20, 2011
  27. 27. Patterns Chaque patron a 4 composantes: 1. un titre 2. un problème 3. un contexte 4. une solutionTuesday, September 20, 2011
  28. 28. Les patterns peuvent être combinés ensembleTuesday, September 20, 2011
  29. 29. Jeu.Tuesday, September 20, 2011
  30. 30. Dessinez-moi un WizywigTuesday, September 20, 2011
  31. 31. WYSIWYG Problème: “Je veux pouvoir écrire du texte et ajouter des images, mais je ne sais pas écrire du HTML pour le faire.”Tuesday, September 20, 2011
  32. 32. WYSIWYG What You See Is What You GetTuesday, September 20, 2011
  33. 33. WYSIWYG Solutions apportées: • Donner à l’utilisateur une idée du résultat final de son intéraction • Facilite l’édition du contenu en ligne ainsi que sa manipulationTuesday, September 20, 2011
  34. 34. Dessinez-moi un Password Strength MeterTuesday, September 20, 2011
  35. 35. Password Strength Meter Problème: “Je veux pouvoir indiquer à mon utilisateur que son mot de passe est safe.”Tuesday, September 20, 2011
  36. 36. Password Strength MeterTuesday, September 20, 2011
  37. 37. Password Strength Meter Solutions apportées: • Indique clairement à l’utilisateur si le mot de passe est assez sécuritaire • Informe et sécurise l’utilisateurTuesday, September 20, 2011
  38. 38. Dessinez-moi un carousselTuesday, September 20, 2011
  39. 39. Caroussel Problème: “Je veux avoir une idée du contenu qu’offre ce site.”Tuesday, September 20, 2011
  40. 40. Caroussel Problème: “Je veux avoir une idée du contenu qu’offre ce site.” Attention! Personne ne s’exprime comme ça!!!Tuesday, September 20, 2011
  41. 41. CarousselTuesday, September 20, 2011
  42. 42. Caroussel Solutions apportées: • Permet d’économiser l’espace sur une page et d’offrir une série de contenu navigable • Facilite la promotion de contenu qui autrement n’aurait pas été visible à l’utilisateurTuesday, September 20, 2011
  43. 43. Dessinez-moi un fil d’arianeTuesday, September 20, 2011
  44. 44. Fil d’ariane a.k.a Breadcrumb Problème: “Je veux savoir où je suis dans ce site.”Tuesday, September 20, 2011
  45. 45. Fil d’ariane a.k.a BreadcrumbTuesday, September 20, 2011
  46. 46. Fil d’ariane a.k.a Breadcrumb Solutions apportées: • Permet à l’utilisateur de retrouver son chemin • Si l’utilisateur arrive sur la page par une recherche, il peut naviguer vers des sections principalesTuesday, September 20, 2011
  47. 47. Dessinez-moi un accordéonTuesday, September 20, 2011
  48. 48. Accordéon Problème: “Je veux pouvoir survoler l’information principale d’abord.” Attention! Personne ne s’exprime comme ça!!!Tuesday, September 20, 2011
  49. 49. AccordéonTuesday, September 20, 2011
  50. 50. AccordéonTuesday, September 20, 2011
  51. 51. Accordéon Solutions apportées: • Permet la navigation rapide et thématique • Permet d’afficher des options de navigation tout en ayant une interface épuréeTuesday, September 20, 2011
  52. 52. SprintTuesday, September 20, 2011
  53. 53. Dessinez-moi un menu déroulantTuesday, September 20, 2011
  54. 54. Menu déroulant aka dropdown menu (Select) Problème: “Je veux naviguer ce site facilement.”Tuesday, September 20, 2011
  55. 55. Menu déroulant aka dropdown menu (Select)Tuesday, September 20, 2011
  56. 56. Dessinez-moi un menu déroulant de navigationTuesday, September 20, 2011
  57. 57. Menu déroulant (nav) aka navigational dropdown menu Problème: “Je veux naviguer ce site facilement.”Tuesday, September 20, 2011
  58. 58. Menu déroulant (nav) aka navigational dropdown menuTuesday, September 20, 2011
  59. 59. Dessinez-moi un .toggle()Tuesday, September 20, 2011
  60. 60. Toggle Check Box vrs.Tuesday, September 20, 2011
  61. 61. Toggle Check Box vrs. l’un ou l’autre peut être l’un et l’autreTuesday, September 20, 2011
  62. 62. Arbo.Tuesday, September 20, 2011
  63. 63. Arbo. Web  site  :  Accueil Recherche Groupe  d’informa7on  A Groupe  d’informa7on  B Groupe  d’informa7on  C Groupe  d’informa7on  D Sec7on  B1 Sec7on  C1 Thèmes  communs Sous-­‐groupe  A1 Sous-­‐groupe  A2 Sous-­‐groupe  D1 Sous-­‐groupe  D2 Thèmes  1 Sec7on  B2 Sec7on  C2 Thèmes  2 Sec7on  A2 Sec7on  D1 Thèmes  3 Sec7on  C3 Sec7on  D1’ Thèmes  4 Forum  de   Communauté UGC conversa7onTuesday, September 20, 2011
  64. 64. Navigation principale L’objectif de cet exercice : ★ Organiser le contenu principal ★ S’addresser au 80% des utilisateurs ★ Avoir un objectif principale Web  site  :  Accueil Recherche Groupe  d’informa7on  A Groupe  d’informa7on  B Groupe  d’informa7on  C Groupe  d’informa7on  DTuesday, September 20, 2011
  65. 65. Navigation secondaireTuesday, September 20, 2011
  66. 66. Navigation secondaire L’objectif de cet exercice : ★ Trouver  l’informa7on  clé  à  travers  tout  le  site ★ Contenir  des  sec7ons  cachées  (les  meLre  de  l’avant) ★ Créer  des  liens  vers  les  sites  partenaires  (ou  des  sites  externes)Tuesday, September 20, 2011
  67. 67. Audit du contenuTuesday, September 20, 2011
  68. 68. Audit de contenu L’objectif de cet exercice : ★ Connaître le contenu ★ Créer des liens entre différentes sections ★ Comprendre la dynamique du site ★ Comprendre comment ce site ce construit ★ Regroupement des grands contenus ★ “Card sorting”Tuesday, September 20, 2011
  69. 69. Audit de contenu ★ Arborescence principale : Accueil, Société, musique, ... ★ Arborescence secondaire correspondant ★ Détail du contenu (type, mise à jour) ★ Détail des éléments répétitifs ou confondantsTuesday, September 20, 2011
  70. 70. Tri de carteTuesday, September 20, 2011
  71. 71. Tri de carte L’objectif de cet exercice : ★ Regrouper le contenu sous de grande catégorie ★ Permettre de classer les éléments de navigation ★ Créer ou découvrir de nouvelles catégorie lors de la réorganisation de l’arborescence d’un siteTuesday, September 20, 2011
  72. 72. Tri de carte Deux méthodes possibles: ★ Première: Inviter un groupe à classer par catégorie non définit les différentes parties de contenu d’un site ★ Deuxième: Inviter un groupe à classer selon des catégories définies les différentes parties de contenu d’un site http://www.boxesandarrows.com/view/card_sorting_a_definitive_guideTuesday, September 20, 2011
  73. 73. À vous de jouer!Tuesday, September 20, 2011
  74. 74. Atelier Design et organisation 1 http://www.maisoncorbeil.com Faire un audit de contenu détaillé Préparer les éléments pour un tri de carte en groupe la semaine prochaineTuesday, September 20, 2011

×