1 Évaluation des logiciels interactifs (1) M2-IFL/DU-TICE, UPMC É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 1 : étude de l’existant  Sous-étape 2 (prochaine séance) : comprendre les utilisateurs  Utilisabilité  Évaluation : Méthodes d’inspection (Cf. cours 5)  Introspection  Évaluation heuristique  Critères ergonomiques

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  Expérience utilisateur

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

Méthodes d’évaluation  Sans utilisateur  Introspection  Méthodes d’inspection Critères ergonomiques Évaluation heuristique  Avec utilisateur  Cours 5 et atelier de fin janvier 5

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 6

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 7

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

9 Inspection heuristique  Référence : Jacob Nielsen  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 1.noter tous les problèmes rencontrés 2.analyser les causes 3.proposer des solutions 4.noter aussi les points positifs 5.rédiger un rapport

TD  A rendre pour le projet (phase 1)  une inspection heuristique d’au moins deux applications voisines de votre projet par chacun des membres de votre équipe  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 :  1.php 1.php  2.php 2.php 10

1.Structuration des activités et guidage 2.Minimiser la charge de travail de l’utilisateur 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é Critères de l’INRIA (Bastien et Scapin)

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  Exemple : livre blanc Ludodic et Dia-logos avec une grille adaptée au web

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)

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

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)

16 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

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é : couleurs  Tout le monde ne perçoit pas les couleurs de la même façon  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

19 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 : 3 au plus sur une page  Pas effet Arbre de Noël  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

20 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

21 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  « Codes des couleurs pour vendre et communiquer sur le Web » (Trinity Advise)

22  Utiliser les services de graphistes, faites des tests  Penser au daltonisme  8 % des hommes  Double codage : couleur + autre  Et aux autres  Référentiel AccessiWeb :  Respecter les conventions culturelles sur les couleurs  Pas d'effet arbre de Noël  Trois couleurs maxi par écran On Couleurs : résumé

23 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  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)

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 25

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  le système indique toujours le contexte des actions  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)  les noms des boutons, liens etc. indiquent clairement la page d’arrivée, l’action

27 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

28 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 :  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

30 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

31 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é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

33 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

34 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

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

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 37

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

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

40 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 :  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

42 Retenir  Les critères (par exemple ceux de l’INRIA)  Évaluation heuristique  Permet à faible coût d’éliminer les erreurs de conception de type « amateur » Police, souligné, utilisation des couleurs, cohérence etc.  En projet  Évaluation heuristique (inspection avec un jeu de critères) pour l’étude de l’existant