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

1 Évaluation des logiciels interactifs (1) M2-IFL/DU-TICE, UPMC Évaluation heuristique Critères dutilisabilité Cours 1 (partie.

Présentations similaires


Présentation au sujet: "1 Évaluation des logiciels interactifs (1) M2-IFL/DU-TICE, UPMC Évaluation heuristique Critères dutilisabilité Cours 1 (partie."— Transcription de la présentation:

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

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

3 3 Utilisabilité norme ISO (1998) : lutilisabilité « 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 dutilisation spécifié ». Bastien Utilisabilité/utilité : qualité ergonomique de l'interface Expérience utilisateur

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

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

6 Introspection Le concepteur essaie le système Procédure Se donner une tâche réelle Se donner un temps limité S assurer quon ne sera pas interrompu Parler à voix haute et senregistrer Analyser à chaud ce que lon vient dobserver Point positifs, négatifs Surprises Idée damélioration 6

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 7

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

9 9 Inspection heuristique But Faire une étude systématique de tous les écrans dune application Sappuyer 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

10 TD A rendre pour le projet (phase 1) une inspection heuristique dau 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 lINRIA Appelés aussi critères de Bastien et Scapin À lorigine de la norme Z , Décembre 1991 Présentation sur le site ergolab : 1.php 1.php 2.php 2.php 10

11 1.Structuration des activités et guidage 2.Minimiser la charge de travail de lutilisateur 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 lINRIA (Bastien et Scapin)

12 12 Utilisation des critères Pour lévaluation Évaluation heuristique Pour la conception Liste des erreurs de débutant à éviter pour avoir lair 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)

14 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 15 Guidage - incitation Exemples Contre-exemple certains jeux daventures

16 16 Guidage - groupement/distinction entre items Exemple Contre-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)

18 18 Guidage – retour dinformation À 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

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

20 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 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 22 Lisibilité : Format

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

26 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 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 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

28 28 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 08-accessibilite-couleur-daltonisme.shtml 08-accessibilite-couleur-daltonisme.shtml Accessibilité : On Couleurs

29 29 Charge de travail Définition : Le critère charge de travail concerne lensemble des éléments de linterface qui ont un rôle dans la réduction de la charge perceptive ou mnésique (mnème = unité dinformation) des utilisateurs et dans laugmentation de lefficacité du dialogue 2 sous-critères brièveté concision actions minimales densité informationnelle

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)

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

33 33 Charge de travail - actions minimales À ne pas faire

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

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

37 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

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

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

40 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 lexpérience de lutilisateur (adaptativité)

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 dorthographe 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

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

43 43 Adaptabilité - expérience de lutilisateur

44 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

46 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 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 48 Messages d'erreurs Mauvais exemples

49 49 Correction des erreurs À faire La commande annuler Expliquer comment réparer À ne pas faire

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

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 51

52 52 Homogénéité

53 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

55 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 57 Compatibilité - expérience de lutilisateur Métaphores usuelles loupe symbolise : fonction de recherche enveloppe signale : contacter le webmaster par courriel point dinterrogation : 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 laspect 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 59 Retenir Les critères (par exemple ceux de lINRIA) 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 lexistant


Télécharger ppt "1 Évaluation des logiciels interactifs (1) M2-IFL/DU-TICE, UPMC Évaluation heuristique Critères dutilisabilité Cours 1 (partie."

Présentations similaires


Annonces Google