valuation des logiciels interactifs 1 Cours 1 partie

  • Slides: 37
Download presentation
Évaluation des logiciels interactifs (1) Cours 1 (partie 2) Évaluation heuristique Critères d’utilisabilité M

Évaluation des logiciels interactifs (1) Cours 1 (partie 2) Évaluation heuristique Critères d’utilisabilité M 2 -IFL/DU-TICE, UPMC Elisabeth. Delozanne@upmc. fr 1

Plan du cours Ø Le projet § Étape 1 : définition du problème §

Plan du cours Ø Le projet § Étape 1 : définition du problème § Sous-étape : Évaluation de sites existants Ø Utilisabilité Ø Méthodes d’inspection (Cf. cours 5) § Évaluation heuristique § Critères ergonomique 2

Utilisabilité Ø norme ISO 9241 -11 (1998) : § l’utilisabilité « est le degré

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 3

Définitions Ø évaluation en Génie Logiciel § système = solution logicielle et matérielle §

Définitions Ø évaluation en Génie Logiciel § système = solution logicielle et matérielle § les plans qualité • fournissent des métriques pour le respect des normes de programmation (portabilité, maintenance etc. ) • ne fournissent aucune méthode pour s'assurer de l'utilisabilité Ø évaluation ergonomique § système interactif = { utilisateur(s), artefact(s) } § s'intéresse à l'efficacité des systèmes humainsmachines § à l'utilisabilité/utilité du système interactif

Inspection heuristique Ø Fournir un ensemble de critères ou heuristiques Ø Faire une étude

Inspection heuristique Ø Fournir un ensemble de critères ou heuristiques Ø Faire une étude systématique de tous les critères sur chaque écran Ø Procédure 1. noter tous les problèmes rencontrés 2. analyser les causes 3. proposer des solutions 4. rédiger un rapport 5

TD Ø Pour vous entraîner § Vendredi vous ferez une évaluation heuristique des plateformes

TD Ø Pour vous entraîner § Vendredi vous ferez une évaluation heuristique des plateformes moodle et sakai Ø A rendre pour le projet(phase 1) § une inspection heuristique d’au moins deux sites voisins de votre projet § au plus tard le 3/11 § sur le site de votre projet Ø Ensemble de critères : les critères de l’INRIA 6

Critères de l’INRIA (Bastien et Scapin) 1. 2. 3. 4. 5. 6. 7. 8.

Critères de l’INRIA (Bastien et Scapin) 1. 2. 3. 4. 5. 6. 7. 8. Structuration des activités et guidage Minimiser la charge de travail 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é Ø À l’origine de la norme Z 67 -133 -1, Décembre 1991, Evaluation des produits logiciels : Partie 1, Définition des critères ergonomiques de conception et d’évaluation des interfaces utilisateurs. http: //www. ergolab. net/articles/les-criteres-ergonomiquespartie 1. html#4

Utilisation des critères Ø Pour l’évaluation § Évaluation heuristique Ø Pour la conception §

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 8

Structuration des activités et guidage Ø objectif : § faciliter l'apprentissage par l'action, l'orientation,

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)

Guidage : étayage Ø Deux aspects § Aider l'utilisateur débutant à se repérer et

Guidage : étayage Ø Deux aspects § Aider l'utilisateur débutant à se repérer et à se construire une logique d'utilisation § Permettre à un utilisateur expérimenter 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 10

Guidage Ø Exemple groupement/distinction entre items Ø Contre-exemple 11

Guidage Ø Exemple groupement/distinction entre items Ø Contre-exemple 11

Retours d'informations Ø Objectif : informer § pour permettre à l'utilisateur d'évaluer son action

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)

Lisibilité : Polices et style Ø Jamais de souligné : exemple Ø Pas de

Lisibilité : Polices et style Ø Jamais de souligné : exemple Ø Pas de textes longs en majuscules ni en italique : § les majuscules rendent le texte plus difficile à lire mais facilitent l'identification d'un élément § EXEMPLE exemple Ø Affichage à l'écran : § Police sans sérif (sans empattement) § Exemples : Arial, Helvetica, Verdana, Comic § Contre-exemple : Times 13

Lisibilité : Format d'affichage Ø Les nombres : § Aligner les entiers à droite

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 14

Lisibilité : couleurs Ø Tout le monde ne perçoit pas les couleurs de la

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 pays § des domaines § Ex : le rouge signifie • Finance : perte • Chimie : chaud • Signalisation : interdiction • Cartographie : nationale • Sécurité : danger • Électricité : marche • Circulation : arrêt 15

Les couleurs : recommandations Ø Codage couleur § Associer à chaque couleur une signification

Les couleurs : recommandations Ø Codage couleur § Associer à chaque couleur une signification précise et uniforme Ø Minimiser le nombre de couleurs § Pour un objet donné, le nombre de couleurs utilisés doit être nettement inférieur au nombre de ses attributs Ø Utiliser § la couleur pour mettre en valeur telle ou telle partie de l’écran (en particulier une information importante) § une neutre et claire pour le fond d’écran § des couleurs très contrastées pour exprimer une différence (et inversement) Ø Principe du double codage : couleur + autre chose On § 8% des hommes sont daltoniens 16

Couleurs à éviter Lisez-moi Ø Caractères : § Bleu, rouge, violet (peu importe la

Couleurs à éviter Lisez-moi Ø Caractères : § Bleu, rouge, violet (peu importe la couleur du fond). Ø Couples : Fond/caractères § Ne jamais utiliser ensemble Lisez-moi • Noir et bleu Lisez-moi • Rouge avec bleu • Jaune avec violet Jaune avec 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. Lisez-moi Ø Fond : § Les teintes de rouge et de jaune et ses dérivés (par ex. : le vert, l'orange. . . ) 17

Couleurs conseillées Ø Choix 1 § Fond : gris pâle, beige mais pas blanc

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 !!! 18

Méthode de choix des couleurs Ø Composer votre interface sans couleur § La couleur

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 1. Identifier les objets à afficher 2. Regrouper ces objets par niveau de visibilité 3. Choisir les composantes de la couleur Ø Teinte : connotation Ø Saturation et intensité : visibilité 4. Vérifier les compatibilités 5. Prototyper le résultat obtenu 19

Couleurs Ø Utiliser les services de graphistes, faites des tests Ø Penser au daltonisme

Couleurs Ø Utiliser les services de graphistes, faites des tests Ø Penser au daltonisme On § 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 § http: //interaction 2. free. fr/ § daltonisme § http: //developpeur. journaldunet. com/tutoriel/theo/0607 08 -accessibilite-couleur-daltonisme. shtml 20

Charge de travail Ø Définition : § Le critère charge de travail concerne l’ensemble

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 21

Règle de concision Ø objectif : limiter la charge de travail § compromis entre

Règle de concision Ø objectif : limiter la charge de travail § compromis entre le bref et l'expressif § pas de gadgets inutiles, limiter les fonctionnalités Ø éviter les surcharges d'informations (limiter la densité) Ø réduire la charge mnésique et le nombre d'actions physiques § abréviations (utilisateurs expérimentés) § compréhensibles § dérivables selon des règles précises (commande I ou P) § macro-commandes § flexibilité § abstraction § minimiser les entrées et plus généralement les actions § couper-coller § valeurs par défaut (dynamiques ou préférences) § défaire-repéter

Règle du contrôle à l'utilisateur Ø Objectif : § l'interface doit apparaître comme étant

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

Contrôle explicite Ø Définition : ce critère regroupe 2 aspects différents § la prise

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 24

Adaptabilité Ø Définition : § Un système est adaptatif quand il est capable de

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é) 25

Flexibilité Ø Objectif : prendre en compte la diversité des utilisateurs et des situations

Flexibilité Ø Objectif : prendre en compte la diversité des utilisateurs et des situations Ø Exemples : § préférences, options, tableaux de bord § prendre en compte les niveaux différents d'expertise • Au moins : première utilisation, utilisations occasionnelles, utilisation répètées § correction d’orthographe § valeurs par défaut parmi une liste à sélectionner § 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

Adaptabilité - flexibilité Ø Plusieurs façons d ’effectuer la même action Ø Exemple §

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 27

Adaptativité Ø Exemples : § Menus partiels qui se déploient complètement au bout de

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 28

Prévisions et récupérations des erreurs Ø Principes : § L'utilisateur a le droit à

Prévisions et récupérations des erreurs Ø Principes : § L'utilisateur a le droit à l'essai/ erreur § L'utilisateur n'est pas l'idiot du village Ø Sources principales d'anxiété dans l'utilisation de logiciels interactifs Ø 3 sous-critères § prévention/ protection § messages d'erreurs § récupération

Protection contre les erreurs Ø Exemple § message d'alerte (quitter sans sauver) § protéger

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 (listes déroulantes, complétion automatique) § détecter les erreurs dès la saisie § lors des saisies minimiser la frappe § griser les menus non accessibles 30

Messages d'erreurs Ø Immédiat Ø Compréhensibles § Précis et spécifiques § Pas de double

Messages d'erreurs Ø Immédiat Ø 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 31

Règle de cohérence et d'homogénéité Ø objectif : § rendre l'interface prédictible, même interface

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 Ø choix d'une métaphore d'interaction : unité de cohérence générale § monde réel (manipulation directe) § conversation (langage de commandes et LN) Ø pour une même tâche : suite d'actions identiques Ø stabilité de l'écran : charte graphique § titres, messages, informations localisés au même endroit d'un écran à l'autre Ø choix et prises de décisions se font de manière identique § Objet/action Ø terminologie constante § q, logout, . , quitter, fermer § construction de phrases constantes

Signifiance des codes et dénominations Ø codage : § codes numériques § unanimité contre

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 Ø dénominations § se conformer aux usages des opérateurs, de l'entreprise § précision : afficher, voir, imprimer § préférer les verbes aux noms verbaux pour les actions

Compatibilité Ø Ø avec les supports papier avec les habitudes utilisateurs avec l'organisation de

Compatibilité Ø Ø avec les supports papier avec les habitudes 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

Compatibilité - expérience de l’utilisateur Ø Métaphores usuelles § loupe symbolise : fonction de

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 35

Conclusion sur les critères Ø En évaluation § Art délicat de l’évaluation heuristique •

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 : § Très utile de les avoir en tête lors de la conception § faire des compromis entre différentes recommandations contradictoires en fonction de la tâche, de l'activité ou du public cible § mais 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)

Take home messages Ø Les critères (par exemple ceux de l’INRIA) § Permettent d’éliminer

Take home messages Ø 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 37