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

2 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

3 Utilisabilité  norme ISO (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

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 humains- machines  à l'utilisabilité/utilité du système interactif

5 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

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

1.Structuration des activités et guidage 2.Minimiser la charge de travail 3.Contrôle entre les mains de l'utilisateur 4.Adaptabilité 5.Prévision et récupération des erreurs 6.Compatibilité 7.Signifiance des codes et dénomination 8.Cohérence et homogénéité  À l’origine de la norme Z , Décembre 1991, Evaluation des produits logiciels : Partie 1, Définition des critères ergonomiques de conception et d’évaluation des interfaces utilisateurs. partie1.html#4 Critères de l’INRIA (Bastien et Scapin)

8 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

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)

10 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

11 Guidage - incitation  Exemples  Contre-exemple  certains jeux d’aventures

12 Guidage - groupement/distinction entre items  Exemple  Contre-exemple

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)

14 Guidage – retour d’information  À 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  Contre-exemple

15 Guidage - lisibilité  À faire  Objectif : informer  pour permettre à l'utilisateur d'évaluer son action  pour rassurer (temps de réponse long) 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)  À ne pas faire  OBJECTIF : INFORMER  POUR PERMETTRE À L'UTILISATEUR D'ÉVALUER SON ACTION  POUR RASSURER (TEMPS DE RÉPONSE LONG)

16 Lisibilité : Polices et style  Jamais de souligné : exemple 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 exemple exemple  Affichage à l'écran :  Police sans sérif (sans empattement)  Exemples : Arial, Helvetica, Verdana, Comic  Contre-exemple : Times

17 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

18 Lisibilité : Format

19 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

20 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  8% des hommes sont daltoniens On

21 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 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.  Fond :  Les teintes de rouge et de jaune et ses dérivés (par ex. : le vert, l'orange...) Lisez-moi

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

23 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

24  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   daltonisme  08-accessibilite-couleur-daltonisme.shtml 08-accessibilite-couleur-daltonisme.shtml On Couleurs

25 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

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

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

28 Charge de travail - actions minimales  À ne pas faire

29 Charge de travail - densité informationnelle  À faire  À ne pas faire

30 Charge de travail-densité

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

32 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

33 Contrôle explicite - actions explicites  À faire  Indiquer les champs obligatoires dans un formulaire  À ne pas faire 

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

35 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é  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

37 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

38 Adaptabilité - expérience de l’utilisateur

39 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

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

41 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

42 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

43 Messages d'erreurs  Mauvais exemples

44 Correction des erreurs  À faire  La commande annuler  Expliquer comment réparer  À ne pas faire

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

46 Homogéneité

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

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

49 Signifiance des codes et dénominations  À ne pas faire

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

51 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

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)

53 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