Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit
-
Upload
roberte-auffret -
Category
Documents
-
view
105 -
download
0
Transcript of Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit
![Page 1: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/1.jpg)
Principes ergonomiques
Evaluation heuristiqueInterfaces et Scénarisation (COM2571)
10 septembre 2013Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2571/
![Page 2: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/2.jpg)
La semaine dernière …
On a fixé les dates importantes :
15 octobre : premier travail à rendre
10 décembre : second travail à rendre
17 décembre : exam
![Page 3: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/3.jpg)
La semaine dernière …
Sinon, on a vu :
Un exemple d’interface tout pourri!
La notion d’IHM et d’ergonomie
Le modèle du traitement humain de l’information
![Page 4: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/4.jpg)
Et donc on fait quoi aujourd’hui?
Utilisabilité (usability)
Principes ergonomiques pour aider à la conception d’interfaces
Méthode d’évaluation heuristique par des experts (Nielsen)
Atelier sur l’évaluation heuristique
![Page 5: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/5.jpg)
Utilisabilité
![Page 6: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/6.jpg)
L’utilisabilité, c’est quoi???Définition ISO (International Standards
Organisation) standard 9241-11 : « Mesure avec laquelle un produit peut être utilisé par des utilisateurs spécifiques pour atteindre un but spécifique avec efficacité, efficience et satisfaction dans un certain contexte d’utilisation »
Utilisabilité = efficacité + efficience + satisfaction
![Page 7: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/7.jpg)
EfficacitéBut atteint ou non, partiellement …
Ça se mesure comment?Le pourcentage de tâches complétéesC’est tout!
![Page 8: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/8.jpg)
EfficienceBut atteint en combien de temps? erreurs?
Ça se mesure comment?Temps pour compléter une tâcheTemps pour apprendre comment fonctionne un
outilPourcentage/nombre d’erreursFréquence d’utilisation d’un manuel d’utilisation
ou de l’aide intégrée au système (si intégrée)Fréquence de la répétition des mêmes actions
et erreurs
![Page 9: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/9.jpg)
Satisfaction
Comment ça se mesure?L’utilisateur aime-t-il les fonctionnalités de
l’interface?L’utilisateur aime-t-il utiliser l’interface?L’utilisateur trouve facile d’utiliser l’interface?Observation des réactions de l’utilisateur
Il fait la gueule … Il sourit … Etc.
![Page 10: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/10.jpg)
Principes ergonomiques
![Page 11: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/11.jpg)
Principes de base de la manipulation directe Schneiderman (1982)Pourquoi certaines interfaces sont-elles faciles à
utiliser? L’utilisateur voit bien le résultat de chacune de ses
actions (résultat, rétroaction) L’utilisateur voit chaque action s’effectuer L’interface est physiquement évidente L’action est continue, instantanée, progressive et
réversible L’utilisateur a toujours le contrôle Les informations sont visibles L’interface est flexible, adaptable selon l’usager Utilisabilité
![Page 12: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/12.jpg)
Principes de base de la manipulation directe Schneiderman (1982)Donc ces principes de bases sont :
Rétroaction (feedback)Continu, instantané, progressif et réversibleVisibilité et contrôleFlexibilitéFermeture (séquences d'opération courtes qui
libèrent la mémorisation)Rendre les sorties évidentesPermettre les raccourcisUtilisabilité
![Page 13: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/13.jpg)
Bastien et Scapin (1993)
GuidageCharge de travailContrôle expliciteAdaptabilitéGestion des erreursHomogénéité/CohérenceSignifiance des codes et des
dénominationsCompatibilité
![Page 14: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/14.jpg)
GuidageConseiller, orienter, informer et conduire
l’utilisateur :
Incitation On incite les utilisateurs à faire des
actions biens spécifiques (ex : Allociné)
Groupement et distinction des items par la
localisation et le format (ex : sites de nouvelles)
Feedback immédiat
Lisibilité
![Page 15: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/15.jpg)
Charge de travail
Réduire la charge perceptive et mnésique de l’utilisateur :
Brièveté Limiter le travail de lecture, d'entrée et les étapes par lesquelles doivent passer les usagers (concision et actions minimales)
Densité informationnelle Limiter la densité informationnelle de l’écran en affichant seulement les information nécessaires
![Page 16: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/16.jpg)
Contrôle explicite
Actions explicites Les actions possibles des utilisateurs dans l’application doivent être le plus explicites possibles (ex : « Voter » et non pas « Valider » dans les machines à voter électroniques)
Contrôle utilisateur L’utilisateur est toujours le patron. Il doit toujours pouvoir contrôler le déroulement du traitement de l’information par l’application (ex : sauvegarde dans Office)
![Page 17: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/17.jpg)
Adaptabilité
L’application doit pouvoir réagir selon le contexte, les besoins et préférences de l’utilisateur
Flexibilité Interface personnalisable en fonction des habitudes et stratégies de l’utilisateur (ex : Facebook)
Prise en compte de l’expérience utilisateur (ex : UdeM)
![Page 18: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/18.jpg)
Gestion des erreurs
Eviter ou réduire les erreurs, et savoir les corriger lorsqu’elles apparaissent (ex : Google)
Protection contre les erreurs Prévoir toutes les actions possibles pour détecter les possibles erreurs de manipulation par l’utilisateur
Qualité des messages d’erreurs Il doit être clair et précis pour que l’utilisateur puisse corriger ses erreurs
Correction des erreurs L’utilisateur doit pouvoir corriger ses propres erreurs
![Page 19: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/19.jpg)
Homogénéité/Cohérence
Les différente parties de l’interface doivent garder les mêmes localisations et même styles si le contexte d’utilisation des informations est identique
ex : barre de recherche, menu, pied de page toujours au même endroit
![Page 20: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/20.jpg)
Signifiance des Codes et DénominationsConsistance et cohérence interne
réutilisation des mêmes codes dans des situations similaires
Cohérence externe
Emploie de métaphores correctes et appropriées entre l’information ou l’objet affiché, et son référent.
Ex : le panier dans les sites d’achat en ligne la disquette de sauvegarde
![Page 21: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/21.jpg)
Compatibilité
Les termes employés doivent être familiers aux utilisateurs et relatifs à la tâche à effectuer.
Accessibilité.
![Page 22: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/22.jpg)
Evaluation heuristique de Nielsen (1990)
![Page 23: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/23.jpg)
Critères ergonomiques de Nielsen
1. Visibilité de l’état du système (rétroaction)
2. Correspondance entre le monde et le système (cohérence externe, physiquement évident)
3. Contrôle à l’usager (sortie, réversibilité)
4. Homogénéité (cohérence interne) et standards
5. Prévention des erreurs
6. Reconnaître plutôt que rappel (visible)
7. Flexibilité et efficience dans l’usage (expert et non expert)
8. Esthétisme et design minimum
9. Aide à la correction des erreurs
10.Aide et documentation
![Page 24: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/24.jpg)
Evaluation heuristiqueClasser les problèmes ergonomiques trouvés pour pouvoir mieux les régler
Comment?Description du problème ergonomique trouvé
Quel principe ergonomique est bafoué?
Classement du problème selon sa sévérité : Fréquence : rare ou fréquent? Impact : facile ou difficile à surmonter? Persistance du problème : une fois surmonté un fois, est ce
que l’utilisateur pourra passer outre la prochaine fois ou sera-t-il toujours gêné par ce problème?
![Page 25: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/25.jpg)
Evaluation heuristiqueEchelle de classement du problème selon sa sévérité :
0 = Pas de problème
1 = Problème cosmétique à corriger éventuellement
2 = Problème mineur : basse priorité
3 = Problème majeur : haute priorité
4 = Catastrophe : impératif à régler avant de sortir le produit
La note doit être globale. La fréquence, l’impact et la
persistance ne doivent pas être notés individuellement.
![Page 26: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/26.jpg)
Correction des problèmesUne fois un problème identifié, il faut proposer
un correctif permet de régler ou diminuer le problème.
Type de correctif :Changer l’architecture d’informationChanger la structure de la pageChanger le formatage (couleur, taille, espace)
de certains éléments de la pageChanger des contenus
![Page 27: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/27.jpg)
Atelier
![Page 28: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/28.jpg)
Regardons ce site ensemble
http://www.cours.polymtl.ca/mth6301/
![Page 29: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/29.jpg)
Faite une évaluation heuristique
Identifiez 5 problèmes ou plus et décrivez les
Indiquez les critères ergonomiques de Bastien et Scapin qui sont bafoués pour chacun d’entre eux et pourquoi ils le sont
Classez les selon la méthode d’évaluation heuristique de Nielsen : Fréquence Impact Persistance du problème
Proposez des solutions à chaque problème
![Page 30: Interfaces et Scénarisation (COM2571) 10 septembre 2013 Grégory Petit](https://reader036.fdocuments.net/reader036/viewer/2022081602/551d9da1497959293b8d0e08/html5/thumbnails/30.jpg)
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]://lrcm.com.umontreal.ca/greg/COM2571/