Embed Size (px)
DESCRIPTION
Cette présentation, donnée par Salim Gomri et Guillaume Gronier, membres de l'association France-Luxembourg Usability Professionals' Association (FLUPA) a pour objectif de décrire les principales étapes d'une conception centrée sur l'utilisateur dans le cadre du développement d'un site Web. En 5 méthodes et 45 minutes, découvrez comment mettre en oeuvre un site web facilement utilisable !
Citation preview
www.flupa.eu
Pour un Webfacilement utilisable
1
Salim Gomri Guillaume Gronier
www.flupa.eu
Un mot sur FLUPA...
2
www.flupa.eu
LuxembourgParis
Grenoble
FLUPA : France & Luxembourg(60 membres)
3
www.flupa.eu
Les objectifs de FLUPA
• Promouvoir l’Ergonomie des Interfaces Homme-Machine (utilité et utilisabilité) et l’Expérience Utilisateur
• Sensibiliser à la démarche ergonomique - conception centrée sur l’utilisateur
• Animer un réseau de professionnels
4
www.flupa.eu
Les activités de FLUPA
• Organisation de Petits Déj’ :• Maquettage• Interfaces Tactiles• Persuasive design• Eye tracking• …
• Organisation d’Ateliers• Définir ses utilisateurs• Réaliser un tri de cartes
• World Usability Day• Barbecue
5
www.flupa.eu
Nous contacter...
• Site Webwww.flupa.eu
• Forumforum.flupa.eu/phpbb/
• Twittertwitter.com/assoFlupa
• Newsletter
• Devenir membre :www.flupa.eu/contenu/adhesion
6
www.flupa.eu
Introduction
Utilisabilitéet conception centrée utilisateur
7
www.flupa.eu
Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
8
www.flupa.eu
Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
9
www.flupa.eu
Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
• Renforcer la sécurité
10
www.flupa.eu
Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
• Renforcer la sécurité
• Garantir sa compétitivité (ROI)
11
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é »
12
www.flupa.eu
Conception Centrée Utilisateur (CCU) :une démarche itérative (ISO 13407)
13
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
www.flupa.eu
Les 5 méthodes incontournables !
en 30 minutes montre en main
14
www.flupa.eu
Evaluer a posteriori
Evaluer a priori
Concevoir l’interface
Organiser l’information
15
Choisir sa cible
www.flupa.eu
Evaluer a posteriori
Evaluer a priori
Concevoir l’interface
Organiser l’information
16
Choisir sa cible
www.flupa.eu
Bien choisir sa cible
définir le profilde ses (futurs)utilisateurs
17
www.flupa.eu
Bien choisir sa cible
• Qui sont les utilisateurs ?• Motivations• Expériences : Connaissances
des tâches à réaliser• Compétences• Préférences
18
www.flupa.eu
Bien choisir sa cible
• Ses goûts, ses préférences• Proposer des choix d’interfaces différents
• Ex: pour le web, laissez le choix d’un thème, css... openweb
19
www.flupa.eu
Bien choisir sa cible
• Contraintes matérielles• Ecran• Tactile? Web?
20
www.flupa.eu
Bien choisir sa cible
• Résolution d’écran
21
Date > 1024 * 768
1024 * 768
800 * 600
640 * 480
Autres...
Janvier 2011
85,1 % 13,8 % 0,6 % 0,0 % 0,5 %
source : w3school
www.flupa.eu
Bien choisir sa cible : comment faire ?
• Méthode des Personas• Fiche d’identité d’une catégorie
d’utilisateurs
• Entretien ou questionnaire
22
www.flupa.eu
Organiser l’information
Choisir sa cible
Evaluer a posteriori
Evaluer a priori
Concevoir l’interface
23
www.flupa.eu
Organiser l’information
Le tri de cartes
24
www.flupa.eu
Le tri de cartes
• Cette méthode permet de comprendre comment l’individu organisent mentalement les informations
• Idéal pour définir la structure d’un site !
25
www.flupa.eu
Le tri de cartes
• Il consiste à donner un ensemble de cartes comportant des morceaux de contenu à un participant
• Celui-ci va avoir pour tâche de regrouper par piles les cartes dont les contenus lui semblent proches
• Une fois les piles établies, il peut-être demandé de les nommer
26
www.flupa.eu
Le tri de cartes
• Chaque élément de la liste est reporté sur une carte
• Une description textuelle ou imagée peut être ajoutée
• Noter un numéro ou une lettre au dos ou dans un coin de chaque carte pour faciliter l’analyse des données
• Faire passer le tri de carte à au moins 5 participants
27
www.flupa.eu
Tri de cartes : créer
• De façon simple, papier/crayon
28
Panier
ContactMail
Archive
Adresse
Chercher
Payer News
Accueil
www.flupa.eu
Tri de cartes : participer
• De façon simple, papier/crayon
29
Panier Contact
Archive
Adresse
Payer
Accueil
Chercher
News
www.flupa.eu
Tri de cartes : catégoriser
• De façon simple, papier/crayon
30
Panier Contact
Archive
Adresse
Payer
Accueil
Chercher
News
Achat Contact Home Archive
www.flupa.eu
Tri de cartes : analyser
31
www.flupa.eu
Tri de cartes
• Via un outil en ligne
• Exemple: websort.net • Créer• Participer• Analyser
32
www.flupa.eu
Organiser l’information
Concevoir l’interface
Choisir sa cible
Evaluer a posteriori
Evaluer a priori
33
www.flupa.eu
Concevoir l’interface
Le maquettage
34
www.flupa.eu
Concevoir l’interface
35
Analyse ergonomique
Conception et développement
Déroulement du projet
Deg
ré d
’inte
rven
tion
Ergonomie de conception Ergonomie de correction
www.flupa.eu
Concevoir l’interface
• Maquette basse fidélité • papier crayon
36
www.flupa.eu
Concevoir l’interface
• Maquette basse fidélité • Ex.: Balsamiq Mockup
37
www.flupa.eu
Concevoir l’interface
• Maquette haute fidélité • Ex.: Axure
38
www.flupa.eu
Concevoir l’interface
• Maquette haute fidélité• Ex.: Photoshop
39
www.flupa.eu
Concevoir l’interface
Organiser l’information
Evaluer a priori
Choisir sa cible
Evaluer a posteriori
40
www.flupa.eu
Evaluer l’interface a priori
L’applicationde critères ergonomiques
41
www.flupa.eu
Les 10 recommandations de Nielsen
42
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
www.flupa.eu
Les 10 recommandations de Nielsen
43
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
www.flupa.eu
Les critères ergonomiquesde Bastien & Scapin
44
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
www.flupa.eu
Les critères ergonomiques
• Appel à un ami expert
45
Menu à la verticale pas très lisible
www.flupa.eu
Les critères ergonomiques
46
Comment couper le son et laissez jouer l’introduction?
www.flupa.eu
Les critères ergonomiques
47
www.flupa.eu
Evaluer a posteriori
Evaluer a priori
Concevoir l’interface
Organiser l’information
Choisir sa cible
48
www.flupa.eu
Evaluer l’interface à posteriori
Les tests utilisateurs
49
www.flupa.eu
Le prototype
50
• 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
• Mettre en évidence des besoins en matière d’aides logicielles
www.flupa.eu
Le prototype
51
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
www.flupa.eu
Le test utilisateur : définition
• Il est une mise en situation, qui vise à étudier les comportements des utilisateurs face à l’interface
• Il est la base même de l’intervention ergonomique !
• Il va permettre de mesurer la performance de l’utilisateur face à l’interface
52
www.flupa.eu
Le test utilisateur : définition
• Il est souvent compléter par :
• un entretien semi-directif (debriefing)
• un questionnaire de satisfaction (SUS, QUIS, WAMI, CSUQ)
53
www.flupa.eu
Le SUS : System Usability Scale
54
www.flupa.eu
Les tests utilisateurs
•Ce qu’il vous faut au moins :•papier/crayon
55
www.flupa.eu
Les tests utilisateurs
•Ce qu’il vous faut au moins :•papier/crayon
•Amateur aguerri :•camera•ordinateur
56
www.flupa.eu
Les tests utilisateurs
•Ce qu’il vous faut au moins :•papier/crayon
•Amateur aguerri :•camera•ordinateur
•Devenir un pro autonome :•Screenflow
57
www.flupa.eu
Les tests utilisateurs
•Ce qu’il vous faut au moins :•papier/crayon
•Amateur aguerri :•camera•ordinateur
•Devenir un pro autonome :•Screenflow
•Devenir un pro :•le laboratoire d’utilisabilité
58
www.flupa.eu
Conclusion
Quelques ouvrageset ce que vous avez retenu !
59
www.flupa.eu
Mesure de l’utilisabilité des interfaces
Thierry BaccinoCatherine BellinoTeresa Colombi
70 €
60
www.flupa.eu
Concevoir un produit facile à utiliser
Eric BrangierJavier Barcenilla
32 €
61
www.flupa.eu
Ergonomie du logiciel et design web
Jean-François Nogier
+- 40 €
62
www.flupa.eu
QUIZ ! Question 1
• Prendre en compte les utilisateurs dans la conception de son site web...
A. je le fais si j’ai le temps
B. ça ne sert à rien !
C. utile, mais pas indispensable
D. indispensable si je veux que mon site soit utilisé par quelqu’un d’autre que moi !
63
www.flupa.eu
QUIZ ! Question 1
• Prendre en compte les utilisateurs dans la conception de son site web...
A. je le fais si j’ai le temps
B. ça ne sert à rien !
C. utile, mais pas indispensable
D. indispensable si je veux que mon site soit utilisé par quelqu’un d’autre que moi !
64
www.flupa.eu
QUIZ ! Question 2
• Le tri de cartes sert à...
A. jouer à la belote
B. organiser les informations de mon site web
C. s’amuser si j’ai du temps
D. rien
65
www.flupa.eu
QUIZ ! Question 2
• Le tri de cartes sert à...
A. jouer à la belote
B. organiser les informations de mon site web
C. s’amuser si j’ai du temps
D. rien
66
www.flupa.eu
QUIZ ! Question 3
• Le maquettage peut servir...
A. à créer de jolis bateaux
B. à créer de beaux avions
C. à réaliser une première ébauche d’un site web
D. réponse D
67
www.flupa.eu
QUIZ ! Question 3
• Le maquettage peut servir...
A. à créer de jolis bateaux
B. à créer de beaux avions
C. à réaliser une première ébauche d’un site web
D. réponse D
68
www.flupa.eu
QUIZ ! Question 4
• On peut évaluer l’ergonomie d’un site à partir...
A. du bon sens
B. de la direction du vent
C. des recommandations du manager
D. de critères ergonomiques
69
www.flupa.eu
QUIZ ! Question 4
• On peut évaluer l’ergonomie d’un site à partir...
A. du bon sens
B. de la direction du vent
C. des recommandations du manager
D. de critères ergonomiques
70
www.flupa.eu
QUIZ ! Question 5
• Les tests utilisateurs servent à...
A. tester l’ergonomie d’un site web
B. à regarder les autres travailler
C. plein de choses, et plus encore !
D. évaluer les connaissances des utilisateurs
71
www.flupa.eu
QUIZ ! Question 5
• Les tests utilisateurs servent à...
A. tester l’ergonomie d’un site web
B. à regarder les autres travailler
C. plein de choses, et plus encore !
D. évaluer les connaissances des utilisateurs
72
www.flupa.eu
Merci de votre attention !
73
