IFT2905 Interfaces personne-machine 5. Principes de design
S´ebastien Roy
D´epartement d’Informatique et de recherche op´erationnelle Universit´e de Montr´eal
22 janvier 2007 Universit´e de Montr´eal
Au programme
Heuristiques d’utilisabilit´e Usability guidelines (heuristics)
R`egles qui r´egissent les principes du design d’interface usager utilisable.
Il existe plusieurs ensembles d’heuristiques reconnues:
Neilsen (10 heuristiques) Dans le livre du cours
http://www.useit.com/papers/heuristic/heuristic list.html Tognazzini (16 principes)
Norman (r`egle deDesign of Everyday Things) guides Mac, Windows, Gnome, KDE
D´ ej` a vu
Principes d´ej`a pr´esent´es:
Design centr´e sur l’usager Connaˆıtre l’usager
Comprendre ce que l’usager veut faire Loi de Fitts
Taille et proximit´e des boutons doit ˆetre conh´erente Les contrˆole trop petits sont difficiles `a atteindre Les cot´es de l’´ecran sont important
M´emoire
Utiliser le regroupement (chunking) pour simplifier la pr´esentation d’information
Ne pas exiger trop de la m´emoire Couleur
Ne pas utiliser la couleur seule rouge sur bleu `a ´eviter
1. Connecter avec le monde
Premier principe de Nielsen.
L’interface devrait ˆetre coh´erente avec le monde et l’exp´erience de l’usager.
Speak the user’s language(Nielsen).
Utiliser des mots communs, pas du jargon technique (sauf celui de l’usager)
Laisser le libre choix des noms (ex:
fichiers DOC 8.3 car)
Permettre les synonymes et alias dans les commandes
La m´etaphore peut aider, mais attention aux abus...
M´ etaphore
M´etaphore
Utilise un objet ou concept duvrai mondeet le transpose dans l’interface usager
Permet d’emprunter un mod`ele conceptuel connu de l’usager Contient des limites et contraintes
Exemples : Bureau, Poubelle, etc...
Pi`eges
Une bonne m´etaphore est rare (boˆıte `a CD?) Peut entraˆıner des comportements impr´evus.
On doit briser les contraintes
la versionordinateurest sˆurement plus versatile que l’objet r´eel.
Une m´etaphore n’excuse pas le mauvais design
M´ etaphore: Quicktime 4.0
La m´etaphore duproduit de consomation...
Manipulation directe
Les int´eractions utilisent une repr´esentation visuelle: 3 principes ( Shneiderman, Designing user interface, 2004)
Repr´esentation continue (donc pas sur demande)
Int´eraction par des actions physiques (clic, d´eplacement, etc...) L’effet d’une actions doit ˆetrerapide,incr´emental,r´eversible etvisibles imm´ediatement.
Exemples
Fichiers et r´epertoires sur le bureau Barre de d´efilement (scrollbar) D´eplacer et changer de taille S´electioner du texte
La manipulation directe est importante parce que’elle exploite la perception et les habilit´es motrices.
Manipulation directe
Principes de design reli´es aux int´eractions avec des objets physiques.
Capacit´e suggestive d’action (Affordance) Correspondance naturelle (mapping) Visibilit´e
R´etroaction (feedback)
— Norman,The design of everyday things
On peut transposer ces principes aux interfaces usager d’un ordinateur.
Capacit´ e suggestive d’action
Capacit´e suggestive d’action (affordance)
Propri´et´es per¸cues et r´eelles d’un objet, qui d´eterminent comment il peut ˆetre utilis´e.
Une chaise est faite pour s’assoir Une poign´ee doit ˆetre tourn´ee On presse un bouton
Une bare de d´efilement est pour le d´eroulement continu Per¸cu 6=r´eel
On ne peut pas s’assoir sur une chaise en papier On peut s’assoir sur une table
Correspondance naturelle
La disposition des contrˆoles devrait correspondre `a la disposition des fonctions.
Les meilleurs correspondances sont directes, sauf si c’est naturel.
Ordre des int´erupteurs pour les lumi`eres
Des ronds sur un poˆele Clignotants d’auto:
haut/bas pour
gauche/droite →naturel Interface DJ
(MixVibes 6 3DEX)
Visibilit´ e
Les parties importantes d’un syst`eme devraient ˆetre visibles.
Un usager doitvoir ce qui est important, sinon il doit deviner les fonctions disponibles
deviner comment activer ces fonctions Sur un objet r´eel, la fonctions est en g´en´eral visible.
Sur un ´ecran d’ordinateur, tout est possible. Ce qui est affich´e peut ˆetre incoh´erent avec ce qui est entr´e.
R´ etroaction
Les actions devraient avoir un effet imm´ediat et visible.
Lorsqu’un usager active un ´el´ement d’interface, cela devrait paraˆıtre.
Les boutons sont press´es puis relˆach´es.
La r´etroaction pas toujours visuelle...
Les clics d’un clavier (feednack audio)
Console de jeu avec vibration (feedback haptique)
2. Coh´ erence et standards
... aussi appell´e Principe de la surprise minimale
Deux choses similaires devraient se ressembler et agir de fa¸con similaire.
Deux choses diff´erentes devraient paraˆıtre diff´erentes.
Taille, position, couleur, choix des mots, ...
Les standards des diff´erentes plateformes sont tr`es utiles.
Un seul mot ou plusieurs pour une d´ecrire une chose?
Si c’est l’usager qui parle: plusieurs Si c’est l’interface qui s’exprime: un seul!
2. Coh´ erence et standards
Interne
Coh´erence entre les diff´erents ´el´ements d’une interface
Externe
Coh´erence avec les autre programmes d’une mˆeme plateforme
M´etaphorique
Coh´erence avec l’objet r´eel repr´esent´e
3. Aide et documentation
Les usagers ne lise pas les manuels d’utilisation
ils pr´ef`erent avancer leur travail, plutˆot que leur connaissances du syst`eme
Les manuels d’utilisation et l’aide en ligne sont essentiels consult´es seulement en cas de frustration ou de crise L’aide devrait ˆetre ...
interrogeable (par mot-cl´e, index, etc...) contextuel (context-sensitive)
centr´e sur la tˆache (il faut quand mˆeme donner une vue d’ensemble)
concret Court
4. Usager libre et en contrˆ ole
... aussi appell´e Clear marked exits(Nielsen).
Un usager ne doit pas ˆetre pi´eg´e par l’interface. Il doit pouvoir explorer sans crainte.
Undo
L’usager doit pouvoir annuler ses actions et revenir en arri`ere.
→ les longues op´erations doivent ˆetre interruptibles.
→ les dialogues doivent permettre l’annulation (Cancel) Edition´
Les donn´ees entr´ees par l’usager doivent pouvoir ˆetre modifi´ees plus tard.
!
Fournir du contrˆole et de la libert´e `a l’usager peut complexifier grandement l’arri`ere-sc`ene (back-end) d’un logiciel
5. Visibilit´ e de l’´ etat du syst` eme
... aussi appell´e R´etroaction (Feedback).
Il faut garder l’usager inform´e de ce qui se passe.
plusieurs m´ecanismes disponibles changer l’´etat du curseur
afficher les s´elections en surbrillance barre d’´etat
→ne pas exag´erer...
Temps de r´eponse
<0.1s semble instantan´e
0.1−1s perceptible, mais pas de r´etroaction requise 1−5s afficher un curseuroccup´e
>5s afficher le progr`es dans une barre d’´etat
5. Visibilit´ e de l’´ etat du syst` eme
6. Flexibilit´ e et Efficacit´ e
... aussi appell´e Raccourcis (Shortcuts).
Il faut fournir un acc`es rapide aux fonctions fr´equentes sans trop de m´emorisation.
acc´eleration clavier
abbr´eviations des commandes style d’interface
fenˆetre de signets (bookmarks) Historique
7. Pr´ evention des erreurs
“Si on laisse la chance `a quelqu’un de faire une erreur, il va le faire.” — Loi de Murphy
Les erreurs sont humaines et vont survenir tˆot ou tard.
L’id´eal : la pr´evention
Ex: La s´election peut remplacer l’´edition.
→ il ne faut pas exag´erer!
D´esactiver les commandes ill´egales .b configure -state disabled .b configure -state normal
Grouper les commandes dangereuses loin des commandes usuelles
Dialogues de confirmation
La maladie duAre you sure?
la confirmation peut r´eduire l’efficacit´e de l’interface les usagers ne lisent plus les avertissements fr´equents Si vous avez le choix: la r´eversibilit´e est bien mieux.
Erreur de description
Erreur o`u l’action souhait´ee est remplac´ee par une action similaire.
Verser du jus d’orange dans ses c´er´eales
Aller `a la rue des ´Erables plutˆot qu’`a l’avenue des Pins ...
Eviter les actions dont les descriptions sont similaires.
des longues rang´ees de boutons identiques des menus aux ´el´ements mal regroup´es ...
Erreur de captation
S´equence d’actions remplac´ee par une autre dont le d´ebut est similaire.
→ caus´e par l’habitude des s´equences plus famili`eres.
Sortir de la maison, barrer la porte, puis aller `a l’universit´e plutˆot qu’aller faire les courses.
Commandes vi: :wq,:w!,:w
→ Eviter la r´´ eutilisation des pr´efixes des s´equences d’action
Erreur d’´ etat (mode)
´Etat (mode)
´Etat dans lequel certaines actions prennent un sens diff´erent.
exemples d’´etats
´
editeurvi: modeinsertionVS commande touche Verrouillage des majuscules (Caps lock) Palette de dessin
Comment ´eviter les erreur d’´etat?
´
eliminer l’usage d’´etats
Afficher clairement le mode en cours Utiliser des modes temporaires
Ne pas r´eutiliser les actions dans les modes
8. Reconnaissance plutˆ ot que m´ emoire
... aussi appell´e Minimize memory load.
Il faut minimiser la m´emorisation.
Connaisancesdans la tˆete doit ˆetre m´emoris´e Connaissancedans le monde
directement accessible dans les objets, signes, directions, etc...
form´e des capacit´e suggestive d’action, de contraintes et de r´etroaction.
Utiliser des menu, pas des langages de commande.
Utiliser des commandes g´en´eriques (Open, Save, Copy, Paste).
Toute l’information n´ecessaire doit ˆetre visible.
9. Erreurs: d´ etection, diagnostic, r´ ecup´ eration
Etre pr´ˆ ecis: donner plus d”information `a l’usager Fichier introuvableVS Fichier blub.txt introuvable Donner de l’aide constructive
Pourquoi l’erreur s’est produite VS Comment la r´eparer.
Etre poli et ne pas blˆˆ amer l’usager
pas deErreur fataleou Ill´egal.
Cacher les d´etails
techniques, sauf si demand´e.
10. Esth´ etique et minimalisme
“Less is more”
Laisser tomber les d´etails superflus graphiques
informations fonctionalit´es
10. Esth´ etique et minimalisme
Bon design graphique
peu de couleurs, bien choisi´es laisser de l’espace
arrangement raisonable des contrˆoles Utiliser un langage concis et pr´ecis
