Post on 13-Apr-2017
www.flupa.eu
Concevoir des interfaces utiles et utilisables
1
Alain Vagner - FLUPA
mardi 14 juin 2011
www.flupa.eu
FLUPA : France-Luxembourg Usability Professionals’ Association• Objectifs
•promouvoir l’ergonomie des IHM
•animer un réseau de professionnels
• Activités •Organisation de
Petits Déj’ et Ateliers•World Usability Day
• @assoFlupa2
mardi 14 juin 2011
www.flupa.eu
Qu’est-ce que l’ergonomie ?
3
mardi 14 juin 2011
www.flupa.eu
L’ergonomie c’est• du bon sens• l’IHM• un joli design graphique• choisir les bonnes couleurs• se mettre à la place des utilisateurs• ...
4
mardi 14 juin 2011
www.flupa.eu
L’ergonomie c’est• du bon sens• l’IHM• un joli design graphique• choisir les bonnes couleurs• se mettre à la place des utilisateurs• ...
4
mardi 14 juin 2011
www.flupa.eu
L’ergonomie
5
+Utilité Utilisabilité
mardi 14 juin 2011
www.flupa.eu
L’ergonomie
5
+Utilité Utilisabilité
Répond aux besoins fonctionnels des
utilisateurs
=
mardi 14 juin 2011
www.flupa.eu
L’ergonomie
5
+Utilité Utilisabilité
Répond aux besoins fonctionnels des
utilisateurs
=Facile d’utilisation
=
mardi 14 juin 2011
www.flupa.eu
Logique de conception vs
Logique d’utilisation
6
mardi 14 juin 2011
www.flupa.eu
Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
7
mardi 14 juin 2011
www.flupa.eu
Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
8
mardi 14 juin 2011
www.flupa.eu
Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
• Renforcer la sécurité
9
mardi 14 juin 2011
www.flupa.eu
Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
• Renforcer la sécurité
• Garantir la compétitivité (ROI)
10
mardi 14 juin 2011
www.flupa.eu
Qu’est-ce que l’utilisabilité ?(ISO 9241-11)
• « un système est utilisable lorsqu'il permet à l'utilisateur de réaliser sa tâche avec efficacité, efficience et satisfaction dans un contexte d'utilisation spécifié »
11
mardi 14 juin 2011
www.flupa.eu
Conception Centrée Utilisateurs :une démarche itérative (ISO 13407)
12
les exigencesne sont pas atteintes
Comprendre et spécifier les exigences utilisateurs
et organisationnelles
Produire des solutions de conception
Evaluer les solutions au regard des exigences
prédéfinies
FIN
les exigencessont atteintes
Comprendre et spécifier le contexte d’utilisation
Planifier le processus deconception centrée utilisateur
1
2
3
4
mardi 14 juin 2011
www.flupa.eu
5 méthodes incontournables
13
mardi 14 juin 2011
www.flupa.eu
Evaluer a posteriori
Evaluer a priori
Concevoir l’interface
Organiser l’information
14
Choisir sa cible
mardi 14 juin 2011
www.flupa.eu
Evaluer a posteriori
Evaluer a priori
Concevoir l’interface
Organiser l’information
15
Choisir sa cible
mardi 14 juin 2011
www.flupa.eu
Bien choisir sa cible
Définir le profilde ses utilisateurs
16
mardi 14 juin 2011
www.flupa.eu
Qui sont les utilisateurs ?• Motivations• Expériences• Compétences• Préférences
17
⇒ profil de l’utilisateur
mardi 14 juin 2011
www.flupa.eu
Quels terminaux utilisent-ils ?• périphériques d’entrée,
de sortie• contexte d’utilisation
(desktop, mobilité, ...)
18
⇒ profil duterminal
mardi 14 juin 2011
www.flupa.eu
À partir des profils...•interface unique gérant tous les cas•ou proposer des choix d’interfaces différents
(fonctionnalités, présentation)
19
Dotclear : rédacteur Dotclear : super administrateur
mardi 14 juin 2011
www.flupa.eu
Comment faire ?• Méthode des Personas
•Fiche d’identité d’une catégorie d’utilisateurs
•Storytelling : personnage fictif
• Entretien ou questionnaire
20
mardi 14 juin 2011
www.flupa.eu
Exemple de persona
21C
C a
ndyb
ardi
ll on
Flic
kr
mardi 14 juin 2011
www.flupa.eu
Exemple de persona
21C
C a
ndyb
ardi
ll on
Flic
kr
mardi 14 juin 2011
www.flupa.eu
Organiser l’information
Choisir sa cible
Evaluer a posteriori
Evaluer a priori
Concevoir l’interface
22
mardi 14 juin 2011
www.flupa.eu
Organiser l’information
Le tri de cartes
23
mardi 14 juin 2011
www.flupa.eu
Le tri de cartes• Comprendre comment
l’individu organise mentalement les informations
• Idéal pour définir la structure / navigation dans une application
24
mardi 14 juin 2011
www.flupa.eu
Le tri de cartes : procédure• sur 5 utilisateurs min :
•L’utilisateur regroupe par piles les cartes dont les contenus lui semblent proches
•Une fois les piles établies, il peut-être demandé de les nommer
• Analyser les résultats sur l’ensemble des tris
25
mardi 14 juin 2011
www.flupa.eu
Le tri de cartes : la carte• Une carte = un contenu ou une fonctionnalité
• + une description textuelle ou imagée si nécessaire
• ajouter un identifiant au dos pour faciliter l’analyse
26
mardi 14 juin 2011
www.flupa.eu
Tri de cartes : créer• De façon simple, papier/crayon
27
Panier
ContactMail
Archive
Adresse
Chercher
Payer News
Accueil
mardi 14 juin 2011
www.flupa.eu
Tri de cartes : participer• De façon simple, papier/crayon
28
Panier Contact
Archive
Adresse
Payer
Accueil
Chercher
News
mardi 14 juin 2011
www.flupa.eu
Tri de cartes : catégoriser• De façon simple, papier/crayon
29
Panier Contact
Archive
Adresse
Payer
Accueil
Chercher
News
Achat Contact Home Archive
mardi 14 juin 2011
www.flupa.eu
Tri de cartes : analyser
30
• analyse quantitative•clustering hiérarchique•traitement via tableur
ou websort• analyse qualitative
•noms des groupes
dendrogramme
mardi 14 juin 2011
www.flupa.eu
Tri de cartes• Via un outil en ligne
• Exemple: websort.net •Créer•Participer•Analyser
31
mardi 14 juin 2011
www.flupa.eu
Organiser l’information
Concevoir l’interface
Choisir sa cible
Evaluer a posteriori
Evaluer a priori
32
mardi 14 juin 2011
www.flupa.eu
Concevoir l’interface
Le maquettage
33
mardi 14 juin 2011
www.flupa.eu
Concevoir l’interface
34
Analyse ergonomique
Conception et développement
Déroulement du projet
Deg
ré d
’inte
rven
tion
Ergonomie de conception Ergonomie de correction
mardi 14 juin 2011
www.flupa.eu
Le maquettage• 2 types
•basse fidélité•haute fidélité
35
Maquette basse fidélité
Maquettehaute fidélité
mardi 14 juin 2011
www.flupa.eu
Maquette basse fidélité• autrement appelé
•Wireframe•Zoning•...
• intérêt•peu de détails•création / modification rapide•feedbacks sur l’essentiel
36
mardi 14 juin 2011
www.flupa.eu
Maquette basse fidélité•Papier / Crayon
37
CC
cel
inec
elin
es o
n Fl
ickr
mardi 14 juin 2011
www.flupa.eu
Maquette basse fidélité•Balsamiq Mockups (freemium)
38
mardi 14 juin 2011
www.flupa.eu
Maquette basse fidélité•Balsamiq Mockups (freemium)
38
mardi 14 juin 2011
www.flupa.eu
Maquette haute fidélité• intérêt
•idée du rendu final / du style graphique•prototypage de l’interface•dynamique
39
mardi 14 juin 2011
www.flupa.eu
Maquette haute fidélité• Axure (Commercial)
40
mardi 14 juin 2011
www.flupa.eu
Maquette haute fidélité• PhotoShop (Commercial)
41
mardi 14 juin 2011
www.flupa.eu
Concevoir l’interface
Organiser l’information
Evaluer a priori
Choisir sa cible
Evaluer a posteriori
42
mardi 14 juin 2011
www.flupa.eu
Évaluer l’interfacea priori
Les critères ergonomiques
43
mardi 14 juin 2011
www.flupa.eu
Les 10 recommandations de Nielsen
44
1. La visibilité de l’état du système
2. Lien entre le système et le monde réel
3. Contrôle et liberté de l’utilisateur
4. Homogénéité et standards
5. Prévenir l’erreur
mardi 14 juin 2011
www.flupa.eu
Les 10 recommandations de Nielsen
45
6. Reconnaître plutôt que se rappeler
7. Flexibilité et efficacité d’utilisation
8. Esthétique et design minimal
9. Aider l’utilisateur à reconnaître, diagnostiquer et comprendre ses erreurs
10.Aide et documentation
mardi 14 juin 2011
www.flupa.eu
Les critères ergonomiquesde Bastien & Scapin
46
Guidage Gestion des erreurs
Charge de travail
Contrôle explicite
Adaptabilité Compatibilité
Signifiance des codes et dénomination
Homogénéité et cohérence
http://www.ergoweb.ca/criteres.htmlicones : http://salimgomri.free.fr
mardi 14 juin 2011
www.flupa.eu
Les critères ergonomiques
47
Menu à la verticale pas très lisible
mardi 14 juin 2011
www.flupa.eu
Les critères ergonomiques
48
Comment couper le son et laissez jouer l’introduction?
mardi 14 juin 2011
www.flupa.eu
Les critères ergonomiques
48
Comment couper le son et laissez jouer l’introduction?
mardi 14 juin 2011
www.flupa.eu
Les critères ergonomiques
49
mardi 14 juin 2011
www.flupa.eu
Evaluer a posteriori
Evaluer a priori
Concevoir l’interface
Organiser l’information
Choisir sa cible
50
mardi 14 juin 2011
www.flupa.eu
Évaluer l’interfacea posteriori
Les tests utilisateurs
51
mardi 14 juin 2011
www.flupa.eu
Le prototype
52
• Confronter les choix de conception à la réalité du terrain
• Ne pas mettre l’utilisateur devant le fait accompli
• Sensibiliser le concepteur à la logique de l’utilisateur
• Détecter précocement les problèmes
mardi 14 juin 2011
www.flupa.eu
Le prototype
53
Utilisationd’un prototype
Enregistrementdes données
Analyse etinterprétation
Aménagementde l’interface
• population• tâche
• performances• opinions
• difficultés• défauts
• solutions possibles• solutions choisies
mardi 14 juin 2011
www.flupa.eu
Le test utilisateur : définition• Mise en situation, qui
vise à étudier les comportements des utilisateurs face à l’interface
• Permet de mesurer la performance de l’utilisateur face à l’interface
54
mardi 14 juin 2011
www.flupa.eu
Le test utilisateur : définition• Souvent complété par :
•un entretien semi-directif (debriefing)
•un questionnaire de satisfaction (SUS, QUIS, WAMMI, CSUQ, ...)
55
mardi 14 juin 2011
www.flupa.eu
Le SUS : System Usability Scale
56
mardi 14 juin 2011
www.flupa.eu
Les tests utilisateurs
•Ce qu’il vous faut au moins :•papier/crayon
57
mardi 14 juin 2011
www.flupa.eu
Les tests utilisateurs
•Ce qu’il vous faut au moins :•papier/crayon
•Amateur aguerri :•camera
58
mardi 14 juin 2011
www.flupa.eu
Les tests utilisateurs
•Ce qu’il vous faut au moins :•papier/crayon
•Amateur aguerri :•camera
•Devenir un pro (petit budget) :•logiciel de screencasting
59
•Windows•CamStudio (FOSS)•CamTasia (commercial)
•Mac•ScreenFlow (commercial)
•Web•www.screenr.com (gratuit,
applet java)
mardi 14 juin 2011
www.flupa.eu
Les tests utilisateurs
•Ce qu’il vous faut au moins :•papier/crayon
•Amateur aguerri :•camera
•Devenir un pro :•logiciel de screencasting
•Devenir un pro (budget++) :•le laboratoire d’utilisabilité
60
CC
Die
ZBW
on
flick
r
mardi 14 juin 2011
www.flupa.eu
Conclusion
61
mardi 14 juin 2011
www.flupa.eu
L’ergonomie• du bon sens • la logique de
conception• se mettre à la place
des utilisateurs• vérification finale
62
mardi 14 juin 2011
www.flupa.eu
L’ergonomie• du bon sens • la logique de
conception• se mettre à la place
des utilisateurs• vérification finale
62
• des techniques• la logique
d’utilisation• impliquer les
utilisateurs• intégration tout au
long du projet
➡
mardi 14 juin 2011
www.flupa.eu
À vous de jouer !
Pas besoin d’être ergonome pour faire de l’ergonomie
63
mardi 14 juin 2011
www.flupa.eu
Références
64
mardi 14 juin 2011
www.flupa.eu
Je ne veux pas chercher(Don’t make me think)
Steve Krug
~ 30 €
65
mardi 14 juin 2011
www.flupa.eu
Concevoir un produit facile à utiliser
Eric BrangierJavier Barcenilla
32 €
66
mardi 14 juin 2011
www.flupa.eu
Ergonomie du logiciel et design web
Jean-François Nogier
~ 40 €
67
mardi 14 juin 2011
www.flupa.eu
Mesure de l’utilisabilité des interfaces
Thierry BaccinoCatherine BellinoTeresa Colombi
70 €
68
mardi 14 juin 2011
www.flupa.eu
Merci de votre attention !
69
PUB : Prochains événements
17 Juin - Tri de cartes / Grenoble27 Sept - Persuasive design / Lux.10 Nov - World Usability Day / Lux.?? Déc - Tri de cartes / Paris
alain.vagner@tudor.lu
mardi 14 juin 2011