2. Avez-vous
fait vos
devoirs?
Tuesday, September 20, 2011
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. Processus de
design d’un produit
Tuesday, September 20, 2011
5. Waterfall (classique)
Tuesday, September 20, 2011
6. Waterfall
http://en.wikipedia.org/wiki/Waterfall_model
Tuesday, September 20, 2011
8. 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
9. 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
15. 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
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. UX Design
Le 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
23. Ergonomie
On 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
25. Gabarits
Le 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
26. Patterns
Les patrons sont des solutions aux problèmes
communs.
Tuesday, September 20, 2011
27. Patterns
Chaque patron a 4 composantes:
1. un titre
2. un problème
3. un contexte
4. une solution
Tuesday, September 20, 2011
28. Les patterns
peuvent être
combinés
ensemble
Tuesday, September 20, 2011
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. WYSIWYG
What You See Is What You Get
Tuesday, September 20, 2011
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 manipulation
Tuesday, September 20, 2011
34. Dessinez-moi un
Password Strength
Meter
Tuesday, September 20, 2011
35. Password
Strength Meter
Problème:
“Je veux pouvoir indiquer à mon utilisateur
que son mot de passe est safe.”
Tuesday, September 20, 2011
36. Password
Strength Meter
Tuesday, September 20, 2011
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’utilisateur
Tuesday, September 20, 2011
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’utilisateur
Tuesday, September 20, 2011
44. Fil d’ariane a.k.a Breadcrumb
Problème:
“Je veux savoir où je suis dans ce site.”
Tuesday, September 20, 2011
45. Fil d’ariane a.k.a Breadcrumb
Tuesday, September 20, 2011
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 principales
Tuesday, September 20, 2011
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
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ée
Tuesday, September 20, 2011
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
conversa7on
Tuesday, September 20, 2011
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
D
Tuesday, September 20, 2011
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
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. 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
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 site
Tuesday, September 20, 2011
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_guide
Tuesday, September 20, 2011
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 prochaine
Tuesday, September 20, 2011