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