Text of 1 Évaluation des logiciels interactifs (1) M2-IFL/DU-TICE, UPMC [email protected]
Page 1
1 valuation des logiciels interactifs (1) M2-IFL/DU-TICE, UPMC
[email protected] valuation heuristique Critres
dutilisabilit Cours 1 (partie 2)
Page 2
2 Plan du cours Le projet tape 1 : dfinition du problme
Sous-tape 1 : tude de lexistant Sous-tape 2 (prochaine sance) :
comprendre les utilisateurs Utilisabilit Mthodes dinspection (Cf.
cours 5) Introspection valuation heuristique Critres
ergonomiques
Page 3
3 Utilisabilit norme ISO 9241-11 (1998) : lutilisabilit est le
degr selon lequel un produit peut-tre utilis par des utilisateurs
identifis, pour atteindre des buts dfinis avec efficacit,
efficience et satisfaction dans un contexte dutilisation spcifi .
Bastien Utilisabilit/utilit : qualit ergonomique de l'interface
Exprience utilisateur
Page 4
Dfinitions valuation en Gnie Logiciel systme = solution
logicielle et matrielle plans qualit mesurent utilit du systme
conformit des fonctionnalits avec le cahier des charges valuation
ergonomique systme interactif = { utilisateur(s), artefact(s) }
s'intresse utilisabilit du systme efficacit des systmes
humains-machines interaction
Page 5
Mthodes dvaluation Sans utilisateur (pour tudier lexistant)
Introspection Mthodes dinspection Critres ergonomiques valuation
heuristique Avec utilisateur Cours 5 et atelier de fin janvier
5
Page 6
Introspection Le concepteur essaie le systme Procdure Se donner
une tche relle 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, ngatifs Surprises Ide
damlioration 6
Page 7
Utilisation Technique trs utilise pour dmarrer et aborder un
sujet Limites Trs subjective Employe seule : dangereuse conception
gocentrique conception technocentrique appele : technique du
fauteuil -Je ne bouge pas de ma chaise -Je conois pour moi-mme
Conseils Suivez un protocole Les utilisateurs ne vous ressemblent
pas 7
Page 8
Conception techno-centrique 8 Danger Conception ego-centrique (
cours Landay)
Page 9
9 Inspection heuristique But Faire une tude systmatique de tous
les crans dune application Sappuyer sur un ensemble de critres ou
heuristiques Procdure 1.noter tous les problmes rencontrs
2.analyser les causes 3.proposer des solutions 4.noter aussi les
points positifs 5.rdiger un rapport
Page 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 critres :
les critres de lINRIA Appels aussi critres de Bastien et Scapin
lorigine de la norme Z67-133-1, Dcembre 1991 Prsentation sur le
site ergolab :
http://www.ergolab.net/articles/criteres-ergonomiques- 1.php
http://www.ergolab.net/articles/criteres-ergonomiques- 1.php
http://www.ergolab.net/articles/criteres-ergonomiques- 2.php
http://www.ergolab.net/articles/criteres-ergonomiques- 2.php
10
Page 11
1.Structuration des activits et guidage 2.Minimiser la charge
de travail de lutilisateur 3.Contrle entre les mains de
l'utilisateur 4.Adaptabilit 5.Prvision et rcupration des erreurs
6.Compatibilit 7.Signifiance des codes et dnomination 8.Cohrence et
homognit Critres de lINRIA (Bastien et Scapin)
Page 12
12 Utilisation des critres Pour lvaluation valuation
heuristique Pour la conception Liste des erreurs de dbutant viter
pour avoir lair professionnel Inscrire les critres dvaluation dans
les dossiers de conception Guide pour lquipe de conception
Foultitude de critres normes et recommandations Parfois
contradictoires Pour veiller votre attention
Page 13
Structuration des activits et guidage objectif : faciliter
l'apprentissage par l'action, l'orientation, les prises de dcisions
techniques des roulettes de scurit (tayage, scaffolding),
incitation (prompting, affordance) structure de contexte dtermine
par les actions possibles granularit des commandes format d'cran
organisation spatiale des donnes importantes groupement format de
prsentation (titre, courbe, couleur, encadrs, justification)
structuration des menus (prfrez la largeur)
Page 14
14 Guidage : tayage Deux aspects Aider l'utilisateur dbutant se
reprer et se construire une logique d'utilisation Permettre un
utilisateur expriment de gagner du temps Exemples : Les
informations au survol Les assistants d'installation Installation
recommande Installation personnalise Le compagnon office (masquer)
Les accs rapides et raccourcis clavier
Page 15
15 Guidage - incitation Exemples Contre-exemple certains jeux
daventures
Page 16
16 Guidage - groupement/distinction entre items Exemple
Contre-exemple
Page 17
Retours d'informations Objectif : informer pour permettre
l'utilisateur d'valuer son action (modle de Norman) pour rassurer
(temps de rponse long) pour rduire la charge cognitive indication
du contexte de travail (fentre courante, tats, curseurs actifs)
reprsentation des dplacements prsentation des options (menus
fantmes, surgissant, pop-up)
Page 18
18 Guidage retour dinformation faire De 2 6 secondes : icne
d'attente De 6 30 secondes : barre d'avancement Plus de 30 secondes
: Barre d'avancement + affichage de l'opration en cours
Contre-exemple
Page 19
19 Guidage - lisibilit faire Objectif : informer pour permettre
l'utilisateur d'valuer son action pour rassurer (temps de rponse
long) Dfinition du guidage : cest lensemble des moyens mis en uvre
pour conseiller, o, Objectif : informer pour permettre
l'utilisateur d'valuer son action (modle de Norman) pour rassurer
(temps de rponse long) pour rduire la charge cognitive indication
du contexte de travail (fentre 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 RPONSE LONG) POUR
RASSURER (TEMPS DE RPONSE LONG)
Page 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 lment plus facile
identifier EXEMPLE EXEMPLE exemple exemple Affichage l'cran :
Police sans srif (sans empattement) Exemples : Arial, Helvetica,
Verdana, Comic Contre-exemple : Times
Page 21
21 Lisibilit : Format d'affichage Les nombres : Aligner les
entiers droite Aligner les valeurs dcimales sur la virgule Dcouper
les nombres par groupe de 3 ou 4 chiffres Les listes alphabtiques
alignes gauche Labels et champs aligns gauche Quand les labels sont
de mme longueur Labels aligns droite et champs aligns gauche Quand
longueurs diffrentes
Page 22
22 Lisibilit : Format
Page 23
23 Lisibilit : couleurs Tout le monde ne peroit pas les
couleurs de la mme faon Utiliser la couleur et un autre attribut
pour coder une information ou pour mettre en vidence Respecter le
sens habituel donn aux couleurs dpend des cultures, des domaines Ex
: le rouge signifie Finance : perte Chimie : chaud Signalisation :
interdiction Cartographie : nationale Scurit : danger lectricit :
marche Circulation : arrt
Page 24
24 Les couleurs : recommandations Codage couleur Associer
chaque couleur une signification prcise 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 lcran neutre et claire pour le fond dcran trs contrastes
pour exprimer une diffrence (et inversement) On
Page 25
25 Couleurs viter Caractres : Bleu, rouge, violet (peu importe
la couleur du fond). Couples : Fond/caractres 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 rtine provoquant de l'inconfort qui peut s'aggraver avec le
vieillissement. Fond : Les teintes de rouge et de jaune et ses
drivs (par ex. : le vert, l'orange...) Lisez-moi
Page 26
26 Couleurs conseilles Choix 1 Fond : gris ple, beige mais pas
blanc Caractres : noir, magenta, vert Choix 2: Fond bleu Caractres
: Blanc, or, vert Cyan, jaune, lavande Or, magenta Faites des tests
!!!
Page 27
27 Mthode de choix des couleurs Composer votre interface sans
couleur La couleur est un plus Un codage color ne se suffit pas
lui-mme 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.Vrifier les compatibilits 5.Prototyper le
rsultat obtenu
Page 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 Nol Cours en ligne sur les couleurs
http://interaction2.free.fr/
http://developpeur.journaldunet.com/tutoriel/theo/0607
08-accessibilite-couleur-daltonisme.shtml
http://developpeur.journaldunet.com/tutoriel/theo/0607
08-accessibilite-couleur-daltonisme.shtml Accessibilit :
http://www.braillenet.org/http://www.braillenet.org/ On
Couleurs
Page 29
29 Charge de travail Dfinition : Le critre charge de travail
concerne lensemble des lments de linterface qui ont un rle dans la
rduction de la charge perceptive ou mnsique (mnme = unit
dinformation) des utilisateurs et dans laugmentation de lefficacit
du dialogue 2 sous-critres brivet concision actions minimales
densit informationnelle
Page 30
Rgle de concision limiter la charge de travail compromis entre
le bref et l'expressif pas de gadgets inutiles, limiter les
fonctionnalits limiter la densit d'informations rduire la charge
mnsique abrviations (utilisateurs expriments) comprhensibles
drivables selon des rgles prcises (commande I ou P)
Page 31
31 Charge de travail - brivet faire ne pas faire
Page 32
Charge de travail - actions minimales Rduire le nombre
d'actions physiques macro-commandes flexibilit abstraction
Minimiser les entres couper-coller valeurs par dfaut (dynamiques ou
prfrences) proposer des listes droulantes (pas trop longue)
compltion automatique dfaire-repter 32
Page 33
33 Charge de travail - actions minimales ne pas faire
Page 34
34 Charge de travail - densit informationnelle faire ne pas
faire
Page 35
35 Charge de travail-densit
Page 36
Rgle du contrle l'utilisateur Objectif : l'interface doit
apparatre comme tant sous le contrle de l'utilisateur le systme
n'excute des oprations qu' la suite d'actions explicites de
l'utilisateur Exemple : ne pas changer d'cran sans demande
explicite prvenir si changement de contrle prvoir pour les experts
la possibilit d'anticiper, de sauter des tapes (ne pas trop
guider)
Page 37
37 Contrle explicite Dfinition : ce critre regroupe 2 aspects
diffrents la prise en compte par le systme des actions des
utilisateurs le contrle des utilisateurs sur le traitement de leurs
actions 2 sous-critres actions explicites contrle utilisateur
Page 38
38 Contrle explicite - actions explicites faire Indiquer les
champs obligatoires dans un formulaire Traquer les ambigits
possibles ne pas faire
Page 39
39 Contrle explicite - contrle utilisateur faire ne pas faire
Impossibilit d annuler Prise de contrle intempestive
Page 40
40 Adaptabilit Dfinition : Un systme est adaptatif quand il est
capable de ragir selon le contexte, et selon les besoins et
prfrences des utilisateurs Un systme est adaptable quand il permet
l'utilisateur de le paramtrer 2 sous-critres Flexibilit
(adaptabilit) Prise en compte de lexprience de lutilisateur
(adaptativit)
Page 41
Flexibilit Objectif : prendre en compte la diversit des
utilisateurs et des situations Exemples : paramtrages : prfrences,
options, tableaux de bord prendre en compte les niveaux diffrents
d'expertise Au moins : premire utilisation, utilisations
occasionnelles, utilisations rptes correction dorthographe
reprsentation multiple des concepts associer plusieurs objets de
prsentation un concept donn variations sur une forme de base unique
possibilit de rsoudre un problme de plusieurs manires respect du
rythme de l'utilisateur viter d'imposer un ordre pour les entres
d'informations
Page 42
42 Adaptabilit - flexibilit Plusieurs faons d effectuer la mme
action Exemple copie de fichiers vers une disquette dans
lexplorateur glisser - lcher copier - coller (menu, raccourcis
clavier, boutons) menu, envoyer vers
Page 43
43 Adaptabilit - exprience de lutilisateur
Page 44
44 Adaptativit Exemples : Menus partiels qui se dploient
compltement au bout de quelques secondes Compltion automatique
Contre-exemple : Le trombone L'adaptativit peut tre problmatique :
il faut tre trs vigilant
Page 45
Prvision et rcupration des erreurs Principes : L'utilisateur a
le droit l'essai/ erreur L'utilisateur n'est pas l'idiot du village
Erreurs = sources principales d'anxit 3 sous-critres prvention/
protection messages d'erreurs rcupration
Page 46
46 Protection contre les erreurs Exemple message d'alerte
(quitter sans sauver) protger en criture ce qui n'est pas
accessible l'utilisateur (label des formulaires...) viter les
erreurs ds la saisie minimiser la frappe (listes droulantes,
compltion automatique, calendrier) dtecter les erreurs ds la saisie
griser les menus non accessibles
Page 47
47 Messages d'erreurs Immdiats Comprhensibles Prcis et
spcifiques Pas de double ngation, de forme nominale, ni de forme
passive Aimables Pas d'injure, ni de termes techniques Constructifs
viter les impasses et proposer une sortie Visibles
Page 48
48 Messages d'erreurs Mauvais exemples
Page 49
49 Correction des erreurs faire La commande annuler Expliquer
comment rparer ne pas faire
Page 50
Rgle de cohrence et d'homognit objectif : rendre l'interface
prdictible, mme interface dans le mme contexte facilit
l'apprentissage, le reprage rassurer et diminuer le nombre
d'erreurs unit de cohrence gnrale : mtaphore monde rel
(manipulation directe) conversation (langage de commandes et
langage plus ou moins naturel) stabilit de l'cran : charte
graphique titres, messages, informations localiss au mme endroit
d'un cran l'autre
Page 51
Homognit dans tout le logiciel mme tche mme suite d'actions
identiques mme commande mmes effets choix et prises de dcisions se
font de manire identique objet/action action /objet terminologie
constante q, logout,., quitter, fermer construction de phrases
constantes 51
Page 52
52 Homognit
Page 53
53 Homognit/cohrence - entre logiciels
Page 54
Signifiance des codes et dnominations codage : codes numriques
unanimit contre eux, dcomposables en units significatives codes
mnmoniques : plus faciles retenir codes chromatiques n'utiliser que
pour renforcer un codage code iconique facile mmoriser vocateur ?
codes graphiques : lgende dnominations se conformer aux usages des
oprateurs, de l'entreprise prfrer les verbes aux noms verbaux pour
les actions prcision : afficher, voir, imprimer
Page 55
55 Signifiance des codes et dnominations ne pas faire
Page 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
Page 57
57 Compatibilit - exprience de lutilisateur Mtaphores 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 Clbres
contre-exemples jecter la disquette (vieux Mac) Menu dmarrer pour
quitter Windows
Page 58
Conclusion sur les critres En valuation Art dlicat de
lvaluation heuristique valuateurs moyens : subtiles Permet dtablir
des rapports valuation sur laspect utilisabilit En conception : les
avoir en tte lors de la conception faire des compromis en cas de
contradictions en fonction de la tche, 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 ides regarder de nombreux guides et critres (Cf. le web)
Projet : Faire une inspection heuristiques de votre projet
lvaluation
Page 59
59 Retenir Les critres (par exemple ceux de lINRIA) Permettent
dliminer les erreurs de conception de type amateur Police, soulign,
utilisation des couleurs etc. En projet valuation heuristique
(inspection avec un jeu de critres) pour ltude de lexistant
