La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Évaluation des logiciels interactifs (1)

Présentations similaires


Présentation au sujet: "Évaluation des logiciels interactifs (1)"— Transcription de la présentation:

1 Évaluation des logiciels interactifs (1)
Cours 1 (partie 2) Évaluation heuristique Critères d’utilisabilité M2-IFL/DU-TICE, UPMC

2 Plan du cours Le projet Étape 1 : définition du problème
Sous-étape 1 : étude de l’existant Sous-étape 2 (prochaine séance) : comprendre les utilisateurs Utilisabilité Méthodes d’inspection (Cf. cours 5) Introspection Évaluation heuristique Critères ergonomiques

3 Utilisabilité norme ISO 9241-11 (1998) :
l’utilisabilité « est le degré selon lequel un produit peut-être utilisé par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction dans un contexte d’utilisation spécifié ». Bastien Utilisabilité/utilité : qualité ergonomique de l'interface Expérience utilisateur Efficacité : résultats/objectifs Efficience : résultats/moyens

4 Définitions évaluation en Génie Logiciel
système = solution logicielle et matérielle plans qualité mesurent utilité du système conformité des fonctionnalités avec le cahier des charges évaluation ergonomique système interactif = { utilisateur(s), artefact(s) } s'intéresse utilisabilité du système efficacité des systèmes humains-machines interaction en GL : évaluer c'est • vérifier un logiciel (s'assurer qu'il correspond aux spécifications issues de la définition des besoins) • valider le logiciel (s'assurer qu'il correspond aux besoins en respectant les contraintes du domaine) ; ici le GL rejoint l'ergonomie en ergonomie : évaluer c'est s'intéresser • à la santé physique, sociale et mentale des utilisateurs de systèmes interactifs • à l'efficacité du couple homme-machine et plus généralement des systèmes hommes-machines (Naël, p. 324) ; ici on rejoint le GL Évaluation très liée à la conception • en GL : documents, plans qualités, méthodes (Merise, OMT, Booch etc.) • en IHM : approche exploratoire (Cf. thèse de Balbo) ou approche ingénierie (prédire, construire, observer). Des tentatives pour définir des méthodes de conception tenant compte des exigences de l'ergonomie. Je ne mentionne pas les évaluations marketing, commerciales etc. qui sortent des préoccupations de ce cours mais peuvent avoir une importance considérable dans certains contextes Evaluer les coûts et bénéfices en termes économiques et sociaux : c’est très difficile de parler en général. Cela dépend de l’application, du contexte institutionnel voir politique. Cela nécessite souvent une étude sur la durée. Efficacité du système humains-machines ? souvent déclinée en utilité du logiciel et son utilisabilité (Senach)

5 Méthodes d’évaluation
Sans utilisateur (pour étudier l’existant) Introspection Méthodes d’inspection Critères ergonomiques Évaluation heuristique Avec utilisateur Cours 5 et atelier de fin janvier

6 Introspection Le concepteur essaie le système Procédure
Se donner une tâche réelle Se donner un temps limité S ’assurer qu’on ne sera pas interrompu Parler à voix haute et s’enregistrer Analyser à chaud ce que l’on vient d’observer Point positifs, négatifs Surprises Idée d’amélioration

7 Utilisation Technique très utilisée pour démarrer et aborder un sujet
Limites Très subjective Employée seule : dangereuse conception égocentrique conception technocentrique appelée : technique du fauteuil Je ne bouge pas de ma chaise Je conçois pour moi-même Conseils Suivez un protocole Les utilisateurs ne vous ressemblent pas

8 Conception techno-centrique
Danger Conception ego-centrique Conception techno-centrique ( cours Landay)

9 Inspection heuristique
But Faire une étude systématique de tous les écrans d’une application S’appuyer sur un ensemble de critères ou heuristiques Procédure noter tous les problèmes rencontrés analyser les causes proposer des solutions noter aussi les points positifs rédiger un rapport Heuristic review avec deux experts on trouve 90 % des problèmes d ’utilisabilité (Poulain et Valot 1996)

10 TD A rendre pour le projet (phase 1)
une inspection heuristique d’au moins deux applications voisines de votre projet pour la prochaine fois sur le site de votre projet Ensemble de critères : les critères de l’INRIA Appelés aussi critères de Bastien et Scapin À l’origine de la norme Z , Décembre 1991 Présentation sur le site ergolab :

11 Critères de l’INRIA (Bastien et Scapin)
Structuration des activités et guidage Minimiser la charge de travail de l’utilisateur Contrôle entre les mains de l'utilisateur Adaptabilité Prévision et récupération des erreurs Compatibilité Signifiance des codes et dénomination Cohérence et homogénéité Inscrire dans le plan qualité, dans les dossiers de conception les critères que l'on adopte pour la conception; servent à la conception et à l'évaluation en France sont très souvent utilisés - les 7 règles d'or (Joëlle Coutaz, 1990) - les critères de l'INRIA (Scapin, Bastien) et leur adaptation aux sites web (http://www.lergonome.org/ ) - les propriétés ergonomiques des interfaces (Coutaz 1998) - les 10 critères de l'OFTA (p 18) Références : Je choisis les critères de l'INRIA (Bastien et Scapin 1993] Voir aussi sur le web tout un tas de guides de style Par exemple : Le site d’IBM : Un autre celui du célèbre Nielsen : Yale C/AIM Web Style Guide Lynch & Horton) : Sun’s Guide to Web Style : Un dernier en français et avec des exemples en plus : Vous avez aussi des études rédigées sur le site Normes et standards : Norme ISO, Norme AFNOR

12 Utilisation des critères
Pour l’évaluation Évaluation heuristique Pour la conception Liste des erreurs de débutant à éviter pour avoir l’air professionnel Inscrire les critères d’évaluation dans les dossiers de conception Guide pour l’équipe de conception Foultitude de critères normes et recommandations Parfois contradictoires Pour éveiller votre attention

13 Structuration des activités et guidage
objectif : faciliter l'apprentissage par l'action, l'orientation, les prises de décisions techniques des roulettes de sécurité (étayage, scaffolding), incitation (prompting, affordance) structure de contexte déterminée par les actions possibles granularité des commandes format d'écran organisation spatiale des données importantes groupement format de présentation (titre, courbe, couleur, encadrés, justification) structuration des menus (préférez la largeur) To afford : inciter, suciter Définition : c’est l’ensemble des moyens mis en œuvre pour conseiller, orienter, informer et conduire l’utilisateur lors de ses interactions avec l’ordinateur (messages, alarmes, labels, etc.) 4 sous-critères participent au guidage Incitation fournir le format adéquat et les valeurs acceptables afficher les unités de mesures fournir un label pour chaque champ de données Groupement/Distinction des items (organisation visuelle) grouper les options de menus en fonction des objets sur lesquels elles s'appliquent distinguer visuellement les aires ayant des fonctions différentes distinguer visuellement entre les labels et les champs d'entrée Feedback immédiat en cas d'interruption, fournir un message indiquant le retour à l'état précédent en cas de traitement long, informer que les traitements sont en cours Lisibilité centrer les titres Exemples et contre exemples

14 Guidage : étayage Deux aspects
Aider l'utilisateur débutant à se repérer et à se construire une logique d'utilisation Permettre à un utilisateur expérimenté de gagner du temps Exemples : Les informations au survol Les assistants d'installation Installation recommandée Installation personnalisée Le compagnon office (masquer) Les accès rapides et raccourcis clavier

15 Guidage - incitation Exemples Contre-exemple certains jeux d’aventures

16 Guidage - groupement/distinction entre items
Contre-exemple Exemple

17 Retours d'informations
Objectif : informer pour permettre à l'utilisateur d'évaluer son action (modèle de Norman) pour rassurer (temps de réponse long) pour réduire la charge cognitive indication du contexte de travail (fenêtre courante, états, curseurs actifs) représentation des déplacements présentation des options (menus fantômes, surgissant, pop-up) Toute action de l'utilisateur doit être suivie d'une modification perceptible de l'interface Élémentaire non ? Mais super important

18 Guidage – retour d’information
Contre-exemple À faire De 2 à 6 secondes : icône d'attente De 6 à 30 secondes : barre d'avancement Plus de 30 secondes : Barre d'avancement + affichage de l'opération en cours

19 Guidage - lisibilité À faire Objectif : informer
pour permettre à l'utilisateur d'évaluer son action pour rassurer (temps de réponse long) À ne pas faire Définition du guidage : c’est l’ensemble des moyens mis en œuvre pour conseiller, o, Objectif : informer pour permettre à l'utilisateur d'évaluer son action (modèle de Norman) pour rassurer (temps de réponse long) pour réduire la charge cognitive indication du contexte de travail (fenêtre courante, états, curseurs actifs) OBJECTIF : INFORMER POUR PERMETTRE À L'UTILISATEUR D'ÉVALUER SON ACTION POUR RASSURER (TEMPS DE RÉPONSE LONG)

20 Lisibilité : Polices et style
Jamais de souligné : exemple exemple Pas de textes longs en majuscules ni en italique : majuscules rendent le texte plus difficile à lire élément plus facile à identifier EXEMPLE EXEMPLE exemple exemple Affichage à l'écran : Police sans sérif (sans empattement) Exemples : Arial, Helvetica, Verdana, Comic Contre-exemple : Times

21 Lisibilité : Format d'affichage
Les nombres : Aligner les entiers à droite Aligner les valeurs décimales sur la virgule Découper les nombres par groupe de 3 ou 4 chiffres Les listes alphabétiques alignées à gauche Labels et champs alignés à gauche Quand les labels sont de même longueur Labels alignés à droite et champs alignés à gauche Quand longueurs différentes

22 Lisibilité : Format

23 Lisibilité : couleurs Tout le monde ne perçoit pas les couleurs de la même façon Utiliser la couleur et un autre attribut pour coder une information ou pour mettre en évidence Respecter le sens habituel donné aux couleurs dépend des cultures, des domaines Ex : le rouge signifie Finance : perte Chimie : chaud Signalisation : interdiction Cartographie : nationale Sécurité : danger Électricité : marche Circulation : arrêt

24 Les couleurs : recommandations
Codage couleur Associer à chaque couleur une signification précise et uniforme Principe du double codage : couleur + autre chose 8% des hommes sont daltoniens Minimiser le nombre de couleurs Utiliser pour mettre en valeur une partie de l’écran neutre et claire pour le fond d’écran très contrastées pour exprimer une différence (et inversement) On

25 Couleurs à éviter Caractères :
Bleu, rouge, violet (peu importe la couleur du fond). Couples : Fond/caractères Ne jamais utiliser ensemble Noir et bleu Rouge et bleu Jaune et violet, Jaune et vert Ces couples sont reconnus comme causant une sollicitation excessive de la rétine provoquant de l'inconfort qui peut s'aggraver avec le vieillissement. Fond : Les teintes de rouge et de jaune et ses dérivés (par ex. : le vert, l'orange...) Lisez-moi Lisez-moi Lisez-moi Lisez-moi Lisez-moi Lisez-moi Lisez-moi Lisez-moi Lisez-moi Lisez-moi

26 Couleurs conseillées Choix 1 Fond : gris pâle, beige mais pas blanc
Caractères : noir, magenta, vert Choix 2: Fond bleu Caractères : Blanc, or, vert Cyan, jaune, lavande Or, magenta Faites des tests !!!

27 Méthode de choix des couleurs
Composer votre interface sans couleur La couleur est un plus Un codage coloré ne se suffit pas à lui-même Choix des couleurs Identifier les objets à afficher Regrouper ces objets par niveau de visibilité Choisir les composantes de la couleur Teinte : connotation Saturation et intensité : visibilité Vérifier les compatibilités Prototyper le résultat obtenu

28 Couleurs Utiliser les services de graphistes, faites des tests
Penser au daltonisme 8 % des hommes Double codage : couleur + autre Respecter les conventions culturelles sur les couleurs Pas d'effet arbre de Noël Cours en ligne sur les couleurs Accessibilité : On

29 Charge de travail Définition :
Le critère charge de travail concerne l’ensemble des éléments de l’interface qui ont un rôle dans la réduction de la charge perceptive ou mnésique (mnème = unité d’information) des utilisateurs et dans l’augmentation de l’efficacité du dialogue 2 sous-critères brièveté concision actions minimales densité informationnelle Brièveté utiliser des abréviations ou des codes mnémotechiques pour entrer des codes supérieurs à 4 ou 5 caractères minimiser le nombre d'étapes dans la sélection des menus afficher des valeurs par défaut ne jamais demander à l'utilisateur des données qui peuvent être déduites par l'ordinateur Densité informationnelle éviter à l'utilisateur d'avoir à se rappeler des données d'une page écran à l'autre afficher seulement les informations nécessaires utiliser le minimum de quantificateurs

30 Règle de concision limiter la charge de travail
compromis entre le bref et l'expressif pas de gadgets inutiles, limiter les fonctionnalités limiter la densité d'informations réduire la charge mnésique abréviations (utilisateurs expérimentés) compréhensibles dérivables selon des règles précises (commande I ou P) abréviations pour les entrées: - caractère spécial (pomme, commande, crtl, alt, escape) suivi de la première lettre de la commande - suppression des voyelles - troncature maximale, troncature deux lettres non ambiguës importance des valeurs par défaut qui sont très rarement modifiées par les utilisateurs minimiser les frappes de l'utilisateur Exemple dans les questionnaires : choix multiple, dans des listes etc. conte exemple : les logiciels d’enseignement ne peuvent se contenter de QCM important travail sur la visualisation d'informations

31 Charge de travail - brièveté
À faire À ne pas faire

32 Charge de travail -actions minimales
Réduire le nombre d'actions physiques macro-commandes flexibilité abstraction Minimiser les entrées couper-coller valeurs par défaut (dynamiques ou préférences) proposer des listes déroulantes (pas trop longue) complétion automatique défaire-repéter

33 Charge de travail - actions minimales
À ne pas faire

34 Charge de travail - densité informationnelle
À faire À ne pas faire

35 Charge de travail-densité

36 Règle du contrôle à l'utilisateur
Objectif : l'interface doit apparaître comme étant sous le contrôle de l'utilisateur le système n'exécute des opérations qu'à la suite d'actions explicites de l'utilisateur Exemple : ne pas changer d'écran sans demande explicite prévenir si changement de contrôle prévoir pour les experts la possibilité d'anticiper, de sauter des étapes (ne pas trop guider) L'utilisateur contrôle l'interaction mais aussi le rythme de l'interaction et aussi l'activité -Attention aux analyses de tâche qui contraignent l'utilisateur dans une démarche : contre exemple : obliger les utilisateurs à saisir des données dans un certain ordre (des logiciels de saisie de notes) - attention aux actions automatiques (par exemple enregistrement automatique)

37 Contrôle explicite Définition :
ce critère regroupe 2 aspects différents la prise en compte par le système des actions des utilisateurs le contrôle des utilisateurs sur le traitement de leurs actions 2 sous-critères actions explicites contrôle utilisateur Actions explicites requérir une action explicite de validation des données entrées par l'utilisateur aucun traitement ne doit être la conséquence d'une autre action prévoir une action de validation de la sélection d'un item par pointage Contrôle utilisateur autoriser les utilisateurs à contrôler le rythme de leurs entrées ne pas passer d'une page écran à une autre sans contrôle utilisateur autoriser l'utilisateur à interrompre un traitement à tout moment fournir la possibilité de revenir en arrière

38 Contrôle explicite - actions explicites
À faire Indiquer les champs obligatoires dans un formulaire Traquer les ambigüités possibles À ne pas faire 

39 Contrôle explicite - contrôle utilisateur
À faire À ne pas faire Impossibilité d’ annuler Prise de contrôle intempestive

40 Adaptabilité Définition :
Un système est adaptatif quand il est capable de réagir selon le contexte, et selon les besoins et préférences des utilisateurs Un système est adaptable quand il permet à l'utilisateur de le paramétrer 2 sous-critères Flexibilité (adaptabilité) Prise en compte de l’expérience de l’utilisateur (adaptativité) Flexibilité permettre à l'utilisateur de désactiver temporairement des affichages inutiles laisser l'utilisateur donner des noms aux champs de données qu'ils créent ne pas surcontraindre l'ordre d'entrées des données Prise en compte de l'expérience de l'utilisateur fournir des raccourcis claviers et la possibilité d'en créer autoriser des entrées pas à pas ou multiple fournir plusieurs niveaux de détails dans l'explication des erreurs

41 Flexibilité Objectif : prendre en compte la diversité des utilisateurs et des situations Exemples : paramétrages : préférences, options, tableaux de bord prendre en compte les niveaux différents d'expertise Au moins : première utilisation, utilisations occasionnelles, utilisations répètées correction d’orthographe représentation multiple des concepts associer plusieurs objets de présentation à un concept donné variations sur une forme de base unique possibilité de résoudre un problème de plusieurs manières respect du rythme de l'utilisateur éviter d'imposer un ordre pour les entrées d'informations Exemple de système adaptatif : le système détecte des séquences de tâches répétitives et propose à l'utilisateur de les prendre en charge (migration de tâches répétitives) Attention : les interfaces adaptatives sont quelques fois utiles mais souvent très mal perçues par les utilisateurs par ce que l'utilisateur ne peut plus : - ni prévoir le comportement du système - ni contrôler l'interaction Interface adaptative : planche savonneuse ; faire des tests d'utilisabilité Structuration de la tâche : les utilisateurs surtout expérimentés supportent très mal qu'on les contraignent à résoudre un problème d'une façon qui n'est pas la leur Représentation multiple : donner un exemple dans son contexte

42 Adaptabilité - flexibilité
Plusieurs façons d ’effectuer la même action Exemple copie de fichiers vers une disquette dans l’explorateur glisser - lâcher copier - coller (menu, raccourcis clavier, boutons) menu, envoyer vers

43 Adaptabilité - expérience de l’utilisateur

44 Adaptativité Exemples :
Menus partiels qui se déploient complètement au bout de quelques secondes Complétion automatique Contre-exemple : Le trombone L'adaptativité peut être problèmatique : il faut être très vigilant

45 Prévision et récupération des erreurs
Principes : L'utilisateur a le droit à l'essai/ erreur L'utilisateur n'est pas l'idiot du village Erreurs = sources principales d'anxiété 3 sous-critères prévention/ protection messages d'erreurs récupération Attention à "l'approche défensive de la conception" - les concepteurs pensent que le système sait mieux que l'utilisateur ce qu'il faut faire et essaie de lui imposer ses solutions, de l'empêcher de faire des fautes - l'utilisateur n'est pas l'idiot du village Prévenir l'utilisateur au fur et à mesure que des problèmes sont détectés mais ni plus ni moins Laisser la possibilité à l'utilisateur de corriger, d'infléchir, d'adapter sa stratégie à l'état courant (évidemment on ne parle pas ici de procédure d'urgence dans des situations à haut risque)

46 Protection contre les erreurs
Exemple message d'alerte (quitter sans sauver) protéger en écriture ce qui n'est pas accessible à l'utilisateur (label des formulaires...) éviter les erreurs dès la saisie minimiser la frappe (listes déroulantes, complétion automatique, calendrier) détecter les erreurs dès la saisie griser les menus non accessibles

47 Messages d'erreurs Immédiats Compréhensibles Précis et spécifiques
Pas de double négation, de forme nominale, ni de forme passive Aimables Pas d'injure, ni de termes techniques Constructifs Éviter les impasses et proposer une sortie Visibles

48 Messages d'erreurs Mauvais exemples

49 Correction des erreurs
À faire La commande annuler Expliquer comment réparer À ne pas faire D’après Jean-yves Antoine, Université de Tours

50 Règle de cohérence et d'homogénéité
objectif : rendre l'interface prédictible, même interface dans le même contexte facilité l'apprentissage, le repérage rassurer et diminuer le nombre d'erreurs unité de cohérence générale : métaphore monde réel (manipulation directe) conversation (langage de commandes et langage plus ou moins naturel) stabilité de l'écran : charte graphique titres, messages, informations localisés au même endroit d'un écran à l'autre Prédictibilité : l'utilisateur prévoit pour un état donné, l'effet d'une action ou d'une suite d'actions ; facilite la mémorisation, l'apprentissage, la planification car cela diminue la distance d'exécution et la distance d'évaluation (au niveau articulatoire) (modèle de Norman) Métaphore d'interaction Toutes les interfaces graphiques mélangent les deux métaphores. Une heuristique de choix : je sais faire : je fais (manipulation directe) je ne sais pas faire : je fais faire (langage de commande, menu) Le choix dépend donc du savoir-faire de l'utilisateur Charte graphique l'aspect général des fenêtres et de leur décoration est dessiné par un graphiste et les développeurs doivent utiliser uniquement ces widgets (exemple des cédéroms) Cohérence : interne : lexicale, syntaxique, sémantique externe : conformité aux normes, à l'expérience de l'utilisateur (ex. utilisation du rouge) Exemples et Contre-exemples de cohérence et d'homogéneité :

51 Homogénéité dans tout le logiciel même tâche
même suite d'actions identiques même commande mêmes effets choix et prises de décisions se font de manière identique objet/action action /objet terminologie constante q, logout, ., quitter, fermer construction de phrases constantes

52 Homogénéité

53 Homogénéité/cohérence - entre logiciels

54 Signifiance des codes et dénominations
codage : codes numériques unanimité contre eux, décomposables en unités significatives codes mnémoniques : plus faciles à retenir codes chromatiques à n'utiliser que pour renforcer un codage code iconique facile à mémoriser évocateur ? codes graphiques : légende dénominations se conformer aux usages des opérateurs, de l'entreprise préférer les verbes aux noms verbaux pour les actions précision : afficher, voir, imprimer Cf. Kolski Utilisation des couleurs - codage : Cf. la feuille polycopiée jointe sur l'utilisation des couleurs - attention à l'"effet arbre de Noël" : les débutants ont tendance à mettre beaucoup trop de couleurs qui flashent Sur ce point faire appel à des graphistes : c'est aussi un métier, et on voit la différence

55 Signifiance des codes et dénominations
À ne pas faire

56 Compatibilité avec les supports papier
avec les habitudes des utilisateurs avec l'organisation de l'entreprise avec d'autres logiciels => se conformer aux normes et aux standards (ISO, AFNOR) Ou alors innover Mais radicalement

57 Compatibilité - expérience de l’utilisateur
Métaphores usuelles loupe symbolise : fonction de recherche enveloppe signale : contacter le webmaster par courriel point d’interrogation : aide en ligne  maison : lien vers la page d'accueil  drapeau : langue de la page en cours ou possibilité de changer de langue Célèbres contre-exemples Éjecter la disquette (vieux Mac) Menu démarrer pour quitter Windows

58 Conclusion sur les critères
En évaluation Art délicat de l’évaluation heuristique Évaluateurs moyens : subtiles Permet d’établir des rapports évaluation sur l’aspect utilisabilité En conception : les avoir en tête lors de la conception faire des compromis en cas de contradictions en fonction de la tâche, de l'activité ou du public cible ne pas introduire de gadget ni multiplier les fonctions étudier de nombreuses interfaces d'un regard critique et piquer les bonnes idées regarder de nombreux guides et critères (Cf. le web) Projet : Faire une inspection heuristiques de votre projet l’évaluation

59 Retenir Les critères (par exemple ceux de l’INRIA)
Permettent d’éliminer les erreurs de conception de type « amateur » Police, souligné, utilisation des couleurs etc. En projet Évaluation heuristique (inspection avec un jeu de critères) pour l’étude de l’existant


Télécharger ppt "Évaluation des logiciels interactifs (1)"

Présentations similaires


Annonces Google