Design des Interfaces Quelques Principes Sources Principes de

Sources
Design des Interfaces
Quelques Principes
• Ben Schneiderman
• Jakob Nielsen - www.useit.com
• Bruce Tognazzini - www.asktog.com
Cours ISI
G. Falquet
Principes de design des interfaces
(Schneiderman)
•
•
•
•
Reconnaître la diversité des usages
Utiliser les règles d'or du design d'interface
Prévenir les erreurs
Lignes directrices de
– présentation des données
– saisie des données
P1: Diversité
• Types d'utilisateurs
– Niveau de connaissances, fréquence d'utilisation
• Profile des tâches
– Fréquence/type d'utilisateur
• Types d'interaction
• Equilibrer automatisme et contrôle humain
1
Diversité: types d'interaction
•
•
•
•
•
Manipulation directe
Menus
Formulaires
Langage de commande
Langage naturel
Avantages et inconvénients
Choix des "widgets" [Bodart]
Principe: Règles d'or du design
• Consistance
terminologie, couleurs, polices, mise en page,
feedback, … Peu d'exceptions
• Raccourcis pour connaisseurs
[Schneiderman 98, p.72]
Règles d'or (suite)
• Fermeture
Séquence d'actions doivent avoir un début, un milieu
et une fin.
=> Sentiment d'accomplissement
• Prévention et gestion des erreurs
• Feedback
montrer que l'action est prise en compte, s'exécute,
est terminée, etc.
Règles d'or (suite)
• Utilisateur aux commandes
– Initiateur des actions = Utilisateur
– ≠ répondre aux questions du système
– Éviter l'acausalité
• Réduire la charge de la mémoire à court terme
• Possibilté de défaire les actions
2
Principe: prévenir les erreurs
Erreurs dans 30% des tâches chez les experts
• Messages d'erreurs informatifs
• Design préventif (consistance, réversibilité,
etc.)
• Correction/suggestion automatique
=> réduction mesurée des erreurs
Heuristiques de J. Nielsen
Principe:
Equilibre humain-automatique
• Monde imprévisible => action humaine
nécessaire
• Automatismes incompréhensibles => inutiles
• Machine => pas de notion de responsabilité
Design minimaliste
•
•
•
•
•
•
•
•
•
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from
errors
• Help and documentation
3
Principes de Tognazzini
•
•
•
•
•
•
•
•
•
Anticipation
Autonomie
Vision des couleurs
Valeurs par défaut
Efficacité de l'utilisateur
Interface explorable
Loi de Fitt's
Objets de l'interface
Réduction du temps de
latence
• "Learnability"
• Utilisation des
métaphores
• Protection du travail de
l'utilisateur
• Lisibilité
• Conservation de l'état
• Navigation visible
Anticipation
Anticiper les besoins et désirs de l'utilisateur
Amener à l'utilisateur les outils et informations
nécessaires à sa tâche
– ne pas s'attendre à ce qu'il cherche lui-même
Autonomie
L'ordinateur, l'interface et l'environnement
appartiennent à l'utilisateur
– apprentissage plus rapide quand l'utilisateur se sent
responsable
Mais il faut aussi des limites
– sinon l'utilisateur est désécurisé (comme les enfants)
Consistance
Différents niveaux de consistance
1.
2.
3.
4.
raccourcis clavier (très important)
structures invisibles
petites structures visibles
look d'une application (moins important)
Eviter l'uniformité
–
surtout lorsque les comportement sont différents
Et de l'information sur l'état du système
– permet d'adapter le comportement/travail
– immédiatement visible (pas forcément en détail)
– discrète
Consistance par rapport aux attentes utilisateur
–
à tester
4
Efficacité de l'utilisateur
La productivité de l'utilisateur avant celle de la
machine
Efficacité de l'utilisateur
Ecrire des messages compacts
– p.ex. placer les mot clés en premier
Exemple - four mico-ondes
– Quel est le plus efficace ?
• chauffer de l'eau pendant 1 min. et 1 sec
• chauffer de l'eau pendant 1 min et 11 sec
– Pour la machine
– Pour l'utilisateur
" The great efficiency breakthroughs in software are to be
found in the fundamental architecture of the system, not
in the surface design of the interface."
Exemple
Faux
– Insérer saut page
– Ajouter note
– Mettre à jour table des matière
Juste
– Insérer
• Saut de page
• Note
• Table des matière
Objets de l'interface
• Ne pas confondre avec les objets de la
programmation orientée-objet
• Objets de l'IHM
–
–
–
–
–
perceptibles
pas seulement visuels, penser à l'ouïe
ont une manière standard d'interagir
fournissent un résultat standard
compréhensibles, consistants, stables
5
Loi de Fitts
• Par exemple : utiliser les coins de l'écran
– les endroits les plus faciles à atteindre
• Contre exemple : le dock avec agrandissement
– déplacement des objets
6