IFT2905 Interfaces personne-machine5. Principes de design
Sebastien Roy
Departement d’Informatique et de recherche operationnelleUniversite de Montreal
22 janvier 2007Universite de Montreal
Au programme
Heuristiques d’utilisabilite
Usability guidelines (heuristics)Regles qui regissent les principes du design d’interface usagerutilisable.
Il existe plusieurs ensembles d’heuristiques reconnues:
Neilsen (10 heuristiques)
Dans le livre du courshttp://www.useit.com/papers/heuristic/heuristic list.html
Tognazzini (16 principes)
Norman (regle de Design of Everyday Things)
guides Mac, Windows, Gnome, KDE
Deja vu
Principes deja presentes:
Design centre sur l’usager
Connaıtre l’usagerComprendre ce que l’usager veut faire
Loi de Fitts
Taille et proximite des boutons doit etre conherenteLes controle trop petits sont difficiles a atteindreLes cotes de l’ecran sont important
Memoire
Utiliser le regroupement (chunking) pour simplifier lapresentation d’informationNe pas exiger trop de la memoire
Couleur
Ne pas utiliser la couleur seulerouge sur bleu a eviter
1. Connecter avec le monde
Premier principe de Nielsen.
L’interface devrait etre coherente avec le monde et l’experience del’usager.Speak the user’s language (Nielsen).
Utiliser des mots communs, pas dujargon technique (sauf celui del’usager)
Laisser le libre choix des noms (ex:fichiers DOC 8.3 car)
Permettre les synonymes et aliasdans les commandes
La metaphore peut aider, maisattention aux abus...
Metaphore
Metaphore
Utilise un objet ou concept du vrai monde et le transpose dansl’interface usager
Permet d’emprunter un modele conceptuel connu de l’usager
Contient des limites et contraintes
Exemples : Bureau, Poubelle, etc...
Pieges
Une bonne metaphore est rare (boıte a CD?)Peut entraıner des comportements imprevus.On doit briser les contraintes
la version ordinateur est surement plus versatile que l’objetreel.
Une metaphore n’excuse pas le mauvais design
Metaphore: Quicktime 4.0
La metaphore du produit de consomation...
Manipulation directe
Les interactions utilisent une representation visuelle: 3principes ( Shneiderman, Designing user interface, 2004)
Representation continue (donc pas sur demande)Interaction par des actions physiques (clic, deplacement, etc...)L’effet d’une actions doit etre rapide, incremental, reversibleet visibles immediatement.
Exemples
Fichiers et repertoires sur le bureauBarre de defilement (scrollbar)Deplacer et changer de tailleSelectioner du texte
La manipulation directe est importante parce que’elle exploite laperception et les habilites motrices.
Manipulation directe
Principes de design relies aux interactions avec des objetsphysiques.
Capacite suggestive d’action (Affordance)
Correspondance naturelle (mapping)
Visibilite
Retroaction (feedback)
— Norman, The design of everyday things
On peut transposer ces principes aux interfaces usager d’unordinateur.
Capacite suggestive d’action
Capacite suggestive d’action (affordance)
Proprietes percues et reelles d’un objet, qui determinent commentil peut etre utilise.
Une chaise est faite pour s’assoir
Une poignee doit etre tournee
On presse un bouton
Une bare de defilement est pour le deroulement continu
Percu 6= reel
On ne peut pas s’assoir sur une chaise en papier
On peut s’assoir sur une table
Correspondance naturelle
La disposition des controles devrait correspondre a la dispositiondes fonctions.
Les meilleurs correspondances sont directes, sauf si c’est naturel.
Ordre des interupteurs pourles lumieres
Des ronds sur un poele
Clignotants d’auto:haut/bas pourgauche/droite → naturel
Interface DJ
(MixVibes 6 3DEX)
Visibilite
Les parties importantes d’un systeme devraient etre visibles.
Un usager doit voir ce qui est important, sinon il doit
deviner les fonctions disponiblesdeviner comment activer ces fonctions
Sur un objet reel, la fonctions est en general visible.Sur un ecran d’ordinateur, tout est possible. Ce qui est affichepeut etre incoherent avec ce qui est entre.
Retroaction
Les actions devraient avoir un effet immediat et visible.Lorsqu’un usager active un element d’interface, cela devraitparaıtre.
Les boutons sont presses puis relaches.
La retroaction pas toujours visuelle...
Les clics d’un clavier (feednack audio)Console de jeu avec vibration (feedback haptique)
2. Coherence et standards
... aussi appelle Principe de la surprise minimale
Deux choses similaires devraient se ressembler et agir de faconsimilaire.
Deux choses differentes devraient paraıtre differentes.
Taille, position, couleur, choix desmots, ...
Les standards des differentesplateformes sont tres utiles.
Un seul mot ou plusieurs pour une decrire une chose?
Si c’est l’usager qui parle: plusieurs
Si c’est l’interface qui s’exprime: un seul!
2. Coherence et standards
Interne
Coherence entre lesdifferents elements d’uneinterface
Externe
Coherence avec les autreprogrammes d’une memeplateforme
Metaphorique
Coherence avec l’objetreel represente
3. Aide et documentation
Les usagers ne lise pas les manuels d’utilisation
ils preferent avancer leur travail, plutot que leur connaissancesdu systeme
Les manuels d’utilisation et l’aide en ligne sont essentiels
consultes seulement en cas de frustration ou de crise
L’aide devrait etre ...
interrogeable (par mot-cle, index, etc...)contextuel (context-sensitive)centre sur la tache (il faut quand meme donner une vued’ensemble)concretCourt
4. Usager libre et en controle
... aussi appelle Clear marked exits (Nielsen).
Un usager ne doit pas etre piege par l’interface. Il doit pouvoirexplorer sans crainte.
Undo
L’usager doit pouvoir annuler ses actions et revenir en arriere.→ les longues operations doivent etre interruptibles.→ les dialogues doivent permettre l’annulation (Cancel)
Edition
Les donnees entrees par l’usager doivent pouvoir etre modifieesplus tard.
!
Fournir du controle et de la liberte a l’usager peut complexifiergrandement l’arriere-scene (back-end) d’un logiciel
5. Visibilite de l’etat du systeme
... aussi appelle Retroaction (Feedback).
Il faut garder l’usager informe de ce qui se passe.
plusieurs mecanismes disponibles
changer l’etat du curseurafficher les selections en surbrillancebarre d’etat→ ne pas exagerer...
Temps de reponse
< 0.1s semble instantane0.1− 1s perceptible, mais pas de retroaction requise
1− 5s afficher un curseur occupe> 5s afficher le progres dans une barre d’etat
5. Visibilite de l’etat du systeme
6. Flexibilite et Efficacite
... aussi appelle Raccourcis (Shortcuts).
Il faut fournir un acces rapide aux fonctions frequentes sans tropde memorisation.
acceleration clavier
abbreviations des commandes
style d’interface
fenetre de signets (bookmarks)
Historique
7. Prevention des erreurs
“Si on laisse la chance a quelqu’un de faire une erreur, il va lefaire.” — Loi de Murphy
Les erreurs sont humaines et vont survenir tot ou tard.
L’ideal : la preventionEx: La selection peut remplacer l’edition.
→ il ne faut pas exagerer!
Desactiver les commandes illegales
.b configure -state disabled
.b configure -state normal
Grouper les commandes dangereuses loin des commandesusuelles
Dialogues de confirmation
La maladie du Are you sure?
la confirmation peut reduire l’efficacite de l’interface
les usagers ne lisent plus les avertissements frequents
Si vous avez le choix: la reversibilite est bien mieux.
Erreur de description
Erreur ou l’action souhaitee est remplacee par une action similaire.
Verser du jus d’orange dans ses cereales
Aller a la rue des Erables plutot qu’a l’avenue des Pins
...
Eviter les actions dont les descriptions sont similaires.
des longues rangees de boutons identiques
des menus aux elements mal regroupes
...
Erreur de captation
Sequence d’actions remplacee par une autre dont le debut estsimilaire.
→ cause par l’habitude des sequences plus familieres.
Sortir de la maison, barrer la porte, puis aller a l’universiteplutot qu’aller faire les courses.
Commandes vi : :wq , :w!, :w
→ Eviter la reutilisation des prefixes des sequences d’action
Erreur d’etat (mode)
Etat (mode)
Etat dans lequel certaines actions prennent un sens different.
exemples d’etats
editeur vi : mode insertion VS commandetouche Verrouillage des majuscules (Caps lock)Palette de dessin
Comment eviter les erreur d’etat?
eliminer l’usage d’etatsAfficher clairement le mode en coursUtiliser des modes temporairesNe pas reutiliser les actions dans les modes
8. Reconnaissance plutot que memoire
... aussi appelle Minimize memory load.
Il faut minimiser la memorisation.
Connaisances dans la tete
doit etre memorise
Connaissance dans le monde
directement accessible dans les objets, signes, directions, etc...forme des capacite suggestive d’action, de contraintes et deretroaction.
Utiliser des menu, pas des langages de commande.
Utiliser des commandes generiques (Open, Save, Copy, Paste).
Toute l’information necessaire doit etre visible.
9. Erreurs: detection, diagnostic, recuperation
Etre precis: donner plusd”information a l’usager
Fichier introuvable VSFichier blub.txtintrouvable
Donner de l’aideconstructive
Pourquoi l’erreur s’estproduite VS Comment lareparer.
Etre poli et ne pas blamerl’usager
pas de Erreur fatale ouIllegal.
Cacher les detailstechniques, sauf si demande.
10. Esthetique et minimalisme
“Less is more”Laisser tomber les details superflus
graphiques
informations
fonctionalites
10. Esthetique et minimalisme
Bon design graphique
peu de couleurs, bien choisieslaisser de l’espacearrangement raisonable des controles
Utiliser un langage concis et precis