Cour2 Design d'interaction

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’interface) Quels sont les objectif(s) Comment auriez-vous innové ce design?Tuesday, September 20, 2011

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) ★ 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

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

PersonasTuesday, September 20, 2011

WireframesTuesday, September 20, 2011

PDD aka Project Design DocumentTuesday, September 20, 2011

Livrables V Design ★ Brainstorm (collecte didées inspirantes) ★ Maquettes graphiques (visualisation précise du résultat final) ★ Itérations ★ PrototypageTuesday, September 20, 2011

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

Livrables Test / Analyse ★ Environement de test ★ Test utilisateurs ★ Modifications design (ux et v) ★ Déploiement ★ Modifications et tests ★ Mise en ligneTuesday, September 20, 2011

AgileTuesday, September 20, 2011

UX Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.htmlTuesday, September 20, 2011

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

Glossaire.Tuesday, September 20, 2011

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

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

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

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 identique constituée déléments modiﬁablesTuesday, September 20, 2011

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 4. une solutionTuesday, September 20, 2011

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 HTML pour le faire.”Tuesday, September 20, 2011

WYSIWYG What You See Is What You GetTuesday, September 20, 2011

WYSIWYG Solutions apportées: • Donner à l’utilisateur une idée du résultat ﬁnal de son intéraction • Facilite l’édition du contenu en ligne ainsi que sa manipulationTuesday, September 20, 2011

Dessinez-moi un Password Strength MeterTuesday, September 20, 2011

Password Strength Meter Problème: “Je veux pouvoir indiquer à mon utilisateur que son mot de passe est safe.”Tuesday, September 20, 2011

Password Strength MeterTuesday, September 20, 2011

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

Dessinez-moi un carousselTuesday, September 20, 2011

Caroussel Problème: “Je veux avoir une idée du contenu qu’oﬀre ce site.”Tuesday, September 20, 2011

Caroussel Problème: “Je veux avoir une idée du contenu qu’oﬀre ce site.” Attention! Personne ne s’exprime comme ça!!!Tuesday, September 20, 2011

CarousselTuesday, September 20, 2011

Caroussel Solutions apportées: • Permet d’économiser l’espace sur une page et d’oﬀrir une série de contenu navigable • Facilite la promotion de contenu qui autrement n’aurait pas été visible à l’utilisateurTuesday, September 20, 2011

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, 2011

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 chemin • Si l’utilisateur arrive sur la page par une recherche, il peut naviguer vers des sections principalesTuesday, September 20, 2011

Dessinez-moi un accordéonTuesday, September 20, 2011

Accordéon Problème: “Je veux pouvoir survoler l’information principale d’abord.” Attention! Personne ne s’exprime comme ça!!!Tuesday, September 20, 2011

AccordéonTuesday, September 20, 2011

Accordéon Solutions apportées: • Permet la navigation rapide et thématique • Permet d’aﬃcher des options de navigation tout en ayant une interface épuréeTuesday, September 20, 2011

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 20, 2011

Menu déroulant aka dropdown menu (Select)Tuesday, September 20, 2011

Dessinez-moi un menu déroulant de navigationTuesday, September 20, 2011

Menu déroulant (nav) aka navigational dropdown menu Problème: “Je veux naviguer ce site facilement.”Tuesday, September 20, 2011

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 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

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

Navigation secondaireTuesday, September 20, 2011

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

Audit du contenuTuesday, September 20, 2011

Audit de contenu L’objectif de cet exercice : ★ Connaître le contenu ★ Créer des liens entre diﬀérentes sections ★ Comprendre la dynamique du site ★ Comprendre comment ce site ce construit ★ Regroupement des grands contenus ★ “Card sorting”Tuesday, September 20, 2011

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

Tri de carteTuesday, September 20, 2011

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

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

À vous de jouer!Tuesday, September 20, 2011

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

Cour2 Design d'interaction

by celinecelines semaan vernon on Sep 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 431

Statistics

Cour2 Design d’interaction — Presentation Transcript