cour2 design d'interaction
Post on 06-Dec-2014
479 Views
Preview:
DESCRIPTION
TRANSCRIPT
Design d’intéractionCours #2
Tuesday, September 20, 2011
Avez-vous fait vos devoirs?
Tuesday, September 20, 2011
Évaluer 3 designs
(Choisir au moins un design d’interface)
Quels sont les objectif(s)
Comment auriez-vous innové ce design?
Devoir
Tuesday, September 20, 2011
Processus de design d’un produit
Tuesday, September 20, 2011
Waterfall (classique)
Tuesday, September 20, 2011
Waterfall
http://en.wikipedia.org/wiki/Waterfall_modelTuesday, September 20, 2011
Waterfall
Tuesday, September 20, 2011
Livrables
Requirements
★ Brief (Collecte d'informations)
★ Collecte et analyse des metrics (Données du site)
★ Audit du site (Étude d'utilisabilité 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 d'utilisation)
★ Wireframes (Croquis d'écrans)
★ PDD
★ Test utilisateurs
Tuesday, September 20, 2011
Personas
Tuesday, September 20, 2011
Wireframes
Tuesday, September 20, 2011
PDD aka Project Design Document
Tuesday, September 20, 2011
Livrables
V Design
★ Brainstorm (collecte d'idées inspirantes)
★ Maquettes graphiques (visualisation précise du résultat final)
★ Itérations
★ Prototypage
Tuesday, 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 ligne
Tuesday, September 20, 2011
Agile
Tuesday, September 20, 2011
UX Agile
http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html
Tuesday, September 20, 2011
UX Agile
http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html
Tuesday, 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 DesignLe design UX est un champ du design d'expérience. Il concerne la création des modèles architecturaux et interactifs qui affectent l'expérience-utilisateur dans un appareil ou un système.
Étant donné son caractère subjectif, l'expérience-utilisateur ne peut être designée. On doit plutôt designer en fonction de l'expérience-utilisateur, en essayant d'activer certains types d'expérience. La portée de cette pratique couvre « tous les aspects de l'interaction des utilisateurs avec le produit, incluant la façon dont il sera perçu, maîtrisé et utilisé. »
Tuesday, September 20, 2011
ErgonomieOn nomme ergonomie « l'étude scientifique de la relation entre l'homme et ses moyens, méthodes et milieux de travail » et l'application de ses connaissances à la conception de systèmes « qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité par le plus grand nombre. »
Tuesday, September 20, 2011
Tuesday, September 20, 2011
GabaritsLe modèle (ou gabarit) permet de construire les pages d'un site web selon une trame (un squelette) de page identique constituée d'éléments modifiables
Tuesday, September 20, 2011
PatternsLes patrons sont des solutions aux problèmes communs.
Tuesday, September 20, 2011
PatternsChaque patron a 4 composantes:
1. un titre
2. un problème
3. un contexte
4. une solution
Tuesday, September 20, 2011
Les patterns peuvent être combinés ensemble
Tuesday, September 20, 2011
Jeu.
Tuesday, September 20, 2011
Dessinez-moi un Wizywig
Tuesday, September 20, 2011
WYSIWYGProblè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
WYSIWYGWhat You See Is What You Get
Tuesday, September 20, 2011
WYSIWYGSolutions 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 manipulation
Tuesday, 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 Meter
Tuesday, September 20, 2011
Solutions apportées:
• Indique clairement à l’utilisateur si le mot
de passe est assez sécuritaire
• Informe et sécurise l’utilisateur
Password Strength Meter
Tuesday, September 20, 2011
Dessinez-moi un caroussel
Tuesday, 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 ne s’exprime comme ça!!!
Tuesday, September 20, 2011
Caroussel
Tuesday, September 20, 2011
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’utilisateur
Caroussel
Tuesday, September 20, 2011
Dessinez-moi un fil d’ariane
Tuesday, September 20, 2011
Problème:
“Je veux savoir où je suis dans ce site.”
Fil d’ariane a.k.a Breadcrumb
Tuesday, September 20, 2011
Fil d’ariane a.k.a Breadcrumb
Tuesday, September 20, 2011
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 principales
Fil d’ariane a.k.a Breadcrumb
Tuesday, September 20, 2011
Dessinez-moi un accordéon
Tuesday, September 20, 2011
Problème:
“Je veux pouvoir survoler l’information
principale d’abord.”
Accordéon
Attention!
Personne ne s’exprime comme ça!!!
Tuesday, September 20, 2011
Accordéon
Tuesday, September 20, 2011
Accordéon
Tuesday, September 20, 2011
Solutions apportées:
• Permet la navigation rapide et
thématique
• Permet d’afficher des options de
navigation tout en ayant une interface
épurée
Accordéon
Tuesday, September 20, 2011
Sprint
Tuesday, September 20, 2011
Dessinez-moi un menu déroulant
Tuesday, September 20, 2011
Problème:
“Je veux naviguer ce site facilement.”
Menu déroulant aka dropdown menu (Select)
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
Problème:
“Je veux naviguer ce site facilement.”
Menu déroulant (nav) aka navigational dropdown menu
Tuesday, September 20, 2011
Menu déroulant (nav) aka navigational dropdown menu
Tuesday, September 20, 2011
Dessinez-moi un .toggle()
Tuesday, September 20, 2011
Toggle vrs. Check Box
Tuesday, September 20, 2011
Toggle vrs. Check Boxl’un ou l’autre peut être l’un et l’autre
Tuesday, September 20, 2011
Arbo.
Tuesday, September 20, 2011
Arbo. Web site : Accueil
Groupe d’informa7on A Groupe d’informa7on B Groupe d’informa7on C Groupe d’informa7on D
Sous-‐groupe A1 Sous-‐groupe A2
Sec7on A2
Sec7on B1 Sec7on C1
Sec7on B2 Sec7on C2
Sous-‐groupe D1 Sous-‐groupe D2
Sec7on D1
Sec7on D1’
Sec7on C3
Recherche
Thèmes communs
Thèmes 1
Thèmes 2
Thèmes 3
Thèmes 4
CommunautéForum de
conversa7onUGC
Tuesday, September 20, 2011
Navigation principaleL’objectif de cet exercice :
★ Organiser le contenu principal
★ S’addresser au 80% des utilisateurs
★ Avoir un objectif principale
Web site : Accueil
Groupe d’informa7on A Groupe d’informa7on B Groupe d’informa7on C Groupe d’informa7on D
Recherche
Tuesday, September 20, 2011
Navigation secondaire
Tuesday, September 20, 2011
Navigation secondaireL’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 contenu
Tuesday, September 20, 2011
Audit de contenuL’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
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 confondants
Tuesday, September 20, 2011
Tri de carte
Tuesday, September 20, 2011
Tri de carteL’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 site
Tuesday, September 20, 2011
Tri de carteDeux 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_guide
Tuesday, September 20, 2011
À vous de jouer!
Tuesday, September 20, 2011
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 prochaine
Atelier
Tuesday, September 20, 2011
top related