Conception des interfaces WIMP

1
Conception des interfaces WIMP
Cours 6
Interaction graphique
Élisabeth Delozanne, M1-IPCC, Paris
5 elisabeth.delozanne_at_math-info.univ-paris5.fr
2
Plan

• Rappels critères ergonomiques
• Définitions
• Les tâches de linteraction graphique
• les composants de linterface correspondants
• les recommandations
• Le dialogue
• Lécran
• Bibliographie
• Conclusion

3
Critères ergonomiques

• Typologie des propriétés génrales dune interface
• Due à C. Bastien
• Norme AFNOR Z67-133-1
• Sert pour la conception et lévaluation
• Critères
• Guidage
• Charge de travail
• Contrôle explicite
• Adaptabilité
• Gestion des erreurs
• Homogénéité et cohérence
• Signifiance des codes et dénominations
• Compatibilité

4
Styles dinteraction

• Interface WIMP
• Conversationnel
• Menus et formulaires
• Navigation (hypertexte)
• Manipulation directe
• Édition de documents
• Interaction iconique
• Reconnaissances de traces

5
Styles dinteraction

• Conversationnel
• Langage de commandes
• Dialogue imposé par le système séquencement
  strict des actions
• Difficulté dapprentissage
• Efficace pour les experts
• Menus et formulaires
• Guidage du système reconnaître une commande
• Dialogue imposé par le système
• Tâche prédéfinie
• Facile à utiliser

6
Navigation (hypertexte)

• Nuds, liens, ancres
• Utilisateur sélectionne des liens
• Difficulté à se repérer
• Facile à utiliser

7
Manipulation directe

• Liée à lapparition des écrans graphiques (Ben
  Schneiderman 1983)
• Lutilisateur manipule physiquement des objets
  visibles sur lécran et qui sont censés être des
  objets du monde de lutilisateur (métaphore du
  monde réel)
• 4 principes
• Affichage permanent des objets dintérêt
• Action physique sur les objets (pas de syntaxe
  complexe)
• Actions rapides, incrémentales et réversibles
  dont les effets sont immédiatement visibles
• Apprentissage progressif, sans connaissances
  préalables
• Pour/contre
• Difficulté de programmation par un utilisateur,
  abus de menus et formulaires
• Facile à utiliser, tâches créatives, interactions
  et transferts de données entre application
• Cas particuliers
• Édition de documents
• Interaction iconique

8
Édition de documents

• principe
• WYSIWYG
• What you see is what you get
• Utilisation conjointe
• Manipulation directe
• Manipulation indirecte (boîtes de dialogue,
  menus, palettes)

9
Interaction iconique

• Un icône représentation graphique dun objet ou
  dun concept
• Reconnaissables, mémorisables et différentiables
• Compacte à lécran
• Identification du sens

(J.F. Antoine)
10
Icones Recommandations

• Construction
• Identifier toutes les commandes à représenter
• Limiter les icônes aux commandes les plus
  fréquentes
• Toujours valider la conception par une
  expérimentation
• Favoriser la perception
• Limiter le nombre dicones présents sur lécran
• Bien distinguer un icône sélectionné ou
  désélectionné
• Favoriser lidentification
• Privilégier une association icône/texte
• Rappeler les icones dans les menus
• Grouper les icones par famille

11
Styles dinteraction (4)

• Interaction par reconnaissance de traces
• Utiliser un périphérique de localisation avec un
  vocabulaire gestuel préfini
• Interface à stylo
• Réalité virtuelle
• Immersion sensori-motrice de lutilisateur dans
  le système
• Réalité augmentée
• Intégration de linterface du système
  informatique dans lenvironnement quotidien
• Interaction multimodale
• Combinaison de mode dinteraction geste et
  parole
• Collecticiel
• Plusieurs utilisateurs interagissent avec un
  système informatique

12
Manipulation directe

• Interactions élémentaires
• Pointer
• souris, trackball, joysticks
• Tablettes, stylet
• Écrans tactiles
• Sélectionner (clic, double clic, clic avec
  modificateur)
• Tracer (drag-and-drop, glisser-lâcher)
• Les tâches de l'interaction graphique et les
  composants correspondants
• saisie
• sélection
• déclenchement
• défilement
• spécification d'arguments et de propriétés
• Transformation
• Guide et recommandations pour ces composants

13
Fenêtres

• d'applications
• principales espace de travail avec un ou
  plusieurs documents
• filles contient les instances de document
• de documents
• métaphore du document remplace celle de
  l'application
• d'utilité
• palette d'options
• pop-up aide contextuelle ou bulles d'aide
• de message, de dialogue
• modales
• non modales
• d'indication de chargement
• utile jusqu'à la création de la fenêtre de
  l'application

14
Tâche de saisie

• Boîte de saisie de texte
• boite de saisie clavier
• Saisie de quantités
• Taper le nombre
• Compteur (spin box)
• que lon incrémente
• Curseur (slider)
• Saisie de positions
• Pointage et validation
• Saisie de tracés
• Échantillonnage de position de la souris pour des
  opérations de type glisser lâcher (rogner une
  image)
• Fantômes ou ombres

15
Saisie Recommandations

• Adapter la saisie aux données à saisir
• Penser à la complétion automatique
• Vérifier la saisie le plus tôt possible

16
Tâche de sélection (1)

• Sélection dun seul élément
• Sélection directe par pointage
• Pointage et validation
• Feedback
• Champ de gravité (objet de petite taille)
• Sélection dans une liste
• Bouton radio
• Listes CF p. suivante
• Techniques mixtes
• Saisie dun préfixe et sélection(complétion
  automatique)

17
Listes

• zone de liste (list box)
• mono-sélection
• multiple sélection
• contenu affiché en permanence
• zone de liste déroulante (drop-down list box)
• pour obtenir la liste, cliquer sur le triangle à
  droite
• de même sélection d'un seul élément
• zone de liste modifiable (combo-box)
• permet la sélection simple ou la saisie directe
• zone de liste déroulante modifiable (drop-down
  combo-box)
• permet la sélection simple ou la saisie directe

18
Listes recommandations

• Obligatoire
• permettre de visualiser entre 3 et 8 éléments
• contenir en premier "Aucun" si la zone est
  facultative
• un cadre
• les listes déroulantes (modifiables ou non) n'ont
  jamais d'en-tête
• Éviter
• les effets de relief pour les libellés

19
Tâche de sélection(2)

• Sélection multiple
• par pointage
• Par groupe rectangle, lasso
• Par ajout retrait majuscule-clic
• dans une liste fixe
• Cardinal fixe case à cocher
• Cardinal variable
• Par intervalle sélection du premier puis du
  dernier
• Par ajout retrait (maj. Clic ou boutons ajouter,
  supprimer)
• Sélection par menu
• Voir plus loin

20
Tâche de déclenchement

• Servent à activer les commandes
• Boutons et menus
• Glisser-lâcher (drag and drop)
• L'action dépend de la source et de la destination
• exemple typique copier un fichier
• Entrée gestuelle
• Spécification simultanée de la commande et de
  l'objet

(Beaudoin-Lafon)
21
Menus

• Servent
• À déclencher des commandes
• À sélectionner un état
• Les items sont des textes ou des images
• Trois grandes catégories
• Palettes
• Les menus surgissants (pop-up)
• Ensemble d'items accessibles hors de la barre de
  menu
• Souvent menus contextuels
• Les menus déroulants
• Ensemble d'items qui souvre en cliquant sur le
  libellé de la barre de menus
• Barre de menus

22
Menus Variantes

• Menus hiérarchiques
• proposent des options complémentaires à un item
• sont indiqués par un triangle dans un item de
  menu
• Menus détachables
• menu contenant généralement une palette
• se transforment en fenêtre utilitaire
• Menus circulaires
• manière originale et économique de présenter un
  ensemble d'options
• le temps de sélection ne dépend pas de la
  position dans le menu

23
Menus recommandations (1)

• Rubriques
• Nombre lt 7 2, si la liste nest pas homogène
• Ordonnées et organisées
• Mettre en tête les rubriques les plus fréquentes
• Feedback
• Indiquer la rubrique courante, le chemin parcouru
  (menu hiérarchique)
• Séparateurs
• Par fonctionnalité
• Aide à la reconnaissance et à la mémorisation
• Rubriques grisées
• Un item de menu doit être grisé si l'action
  associée à cet item est indisponible
• Raccourcis clavier, icones

24
Menu recommandations (2)

• Multifenêtrage
• Dans une application MDI (Multiple Document
  Interface) toujours un menu Fenêtre avec la liste
  des fenêtres filles ouvertes
• Menus en cascade
• Les menus en cascade sont limités à un seul
  niveau
• Libellé
• Le libellé d'un menu est toujours en un seul mot
• Le libellé d'un item peut être en plusieurs mots
  (4 maximum)
• Les items de menus qui entraînent un dialogue
  sont suivis de points de suite ()

25
Boutons

• métaphore
• représentent les boutons que l'on manipule pour
  actionner des objets réels
• bouton d'action
• aspect graphique change quand on clique dessus
• bouton d'action de position
• 2 valeurs (enfoncé ou relâché)
• reste enfoncé tant que l'action a lieu
• radio bouton
• pour faire un choix parmi des alternatives
  exclusives
• cocher un bouton enlève le choix antérieur
• possibilité de bouton radio graphique
• case à cocher
• pour sélectionner des options non exclusives
  dans une liste
• chaque case est une bascule

26
Boutons recommandations (1)

• Les boutons d'actions
• obligatoirement un effet 3D et 3 états
• relâché, enfoncé, inactif
• dans un dialogue ne peuvent qu'ouvrir d'autres
  dialogues
• ouvrant un dialogue doit être libellé avec des
  points de suite
• Dans un dialogue avec onglets, les boutons
  d'actions concernant l'ensemble des onglets
  doivent être placés à l'extérieur des onglets
• Le bouton par défaut est encadré et a pour
  équivalent clavier la touche Entrée

27
Boutons (2)

• Le bouton OK
• est toujours en majuscule et a le focus par
  défaut (sauf pour les actions "dangereuses")
• n'a le focus que quand les champs obligatoires
  ont été remplis
• Les boutons graphiques d'une barre d'outils et
  les images d'une liste de choix
• doivent être accompagnés d'une bulle d'aide au
  survol de la souris
• Case à cocher
• couleur de fond blanche lorsqu'elle est
  modifiable
• grisée sinon

28
Tâche de défilement

• Barre de défilement
• sens du défilement
• flèches extérieures à la barre
• Défilement direct
• 1 seule unité d'information
• 1 page écran
• en du document
• Fastidieux quand le texte est long
• Impossible de connaître la position relative dans
  le document
• Intuitif, économise une barre
• Défilement automatique
• quand la commande engendre automatiquement une
  nouvelle sélection (ex. menus longs)

29
Spécification d'arguments, de propriétés

• Boites de dialogue
• Découplage temporel et spatial entre
• spécification de la commande (paramètres)
• son exécution
• Boites de propriétés
• Effet immédiat sur les objets de la sélection
• Boites modales
• l'utilisateur est obligé de répondre avant de
  changer de fenêtre
• obligatoire si la commande en cours ne peut être
  suspendue
• Boites non modales
• l'utilisateur peut abandonner la tâche en cours
• Autres types de boites
• Boite dalerte
• Boites de progression

30
Boîtes recommandations

• Boutons "OK", "Annuler" et "Aide" dans tout
  dialogue
• "OK" et "Annuler" toujours placés en premier
• "Aide" en dernier
• valeurs par défaut
• Toujours des valeurs par défaut
• Bien les chosir
• Boites modales
• Autoriser le déplacement de la boîte pour laisser
  voir la tâche en amont
• Préférer les boites et les fenêtres non modales
• Ne pas ouvrir une fenêtre occupant toute la place
  de lécran

31
Boîte de dialogue

• Onglets préférables à une succession de dialogues
  
• Pas plus de 5 boutons dans un dialogue
• Effectuer les contrôles de format et de filtre de
  saisie lorsqu'on quitte le dialogue ou au fur et
  à mesure mais en laissant l'utilisateur libre d'y
  revenir ultérieurement
• Si une erreur est détectée lors de la validation
  d'un dialogue,
• afficher un message d'erreur
• positionner le pointeur sur la saisie mise en
  cause
• Lorsque le bouton "Annuler" est actionné, les
  éventuelles erreurs de saisie doivent être
  ignorées

32
Boîtes de messages

• Messages
• Clairs
• Si vous quittez maintenant vous allez perdre
  toutes vos modifications
• Oui Non
• Quitter Annuler
• Amicaux
• Informatifs de la cause et, encore mieux du
  remède
• Beaucouptroplong. Ce nom de fichier nest pas
  valide
• Beaucouptroplong. Ce nom de fichier est trop long
• Concis
• Vous êtes en train de supprimer des colonnes. Si
  vous cliquez sur Oui vous ne pourrez pas utiliser
  la commande Annuler. Voulez-vous quand même
  supprimer ces colonnes. Oui, Non
• Si vous supprimez ces colonnes la suppression ne
  pourra pas être annulée, supprimer, annuler

33
Pas de langage dinformaticien

• Erreur 532

34
Les onglets

• Permettent de regrouper dans une même fenêtre des
  affichages répartis sur plusieurs pages
• Recommandations
• bouton OK en dehors de l'onglet pour une
  validation générale
• pas de rotation intempestive
• le même nombre par ligne
• pas d'exagération dans le nombre d'onglets

35
Transformation

• Poignées de manipulation
• De préférence laisser la possibilité de re
  dimensionner
• les fenêtres
• les dessins
• les images fixes ou animées
• Le dimensionnement peut se faire
• suivant un axe horizontal, vertical
• suivant les deux axes à la fois à la fois

36
Modes dinteraction

• Mode
• État de linterface dans lequel les actions de
  lutilisateus sont interprétées par le système de
  manière homogène et différente des autres modes
• Modes spatiaux
• Interprétation des actions dépend de
  lemplacement du curseur
• Ex fenêtre modale
• Modes temporels
• Pendant un intervalle de temps les actions sont
  interprétées différemment
• Ex. Utilisation dune palette doutils
• Micro-modes
• Modes temporels liés à une action physique
  continue de lutilisateur
• Ex drag
• Conseils
• Éviter les modes temporels et plutôt utiliser les
  modes spatiaux et les micro-modes
• Toujours un feedback pour connaître le mode
  courant

37
Dialogue Homme/machine

• Dans les interfaces graphiques, deux syntaxes
• Objet/Action
• Action/Objet
• Le mode Objet/Action
• Lutilisateur sélectionne dabord lobjet de la
  commande
• La connaissance de lobjet permet de ne rendre
  activable (mode spatial) que les commandes
  concernées
• Syntaxe préférable (sauf pour la création dun
  objet)
• Le mode Action/objet
• Lutilisateur sélectionne dabord la commande
  puis lobjet (mode temporel)
• Conseils
• Utiliser toujours les modes Objet/Action
• Mode Action/Objet quand on ne peut pas faire
  autrement

38
Objet/Action

• Objet/Action
• L'utilisateur désigne d'abord l'objet sur lequel
  il veut travailler.
• L'utilisateur indique les actions les unes à la
  suite des autres.
• Intérêt
• Permet de définir des actions génériques
  applicables à toute sorte d'objet
• Principe de fonctionnement
• Pour fonctionner selon ce principe, les
  applications graphiques suivent une logique
  événementielle

39
Lécran

• Faciliter lexploration visuelle
• 2 stratégies
• La première fois
• Exploration en Z
• Quand on connaît
• Recherche sélective
• Exploration orientée par les symétires, les
  titres, les graphiques et lutilisation des
  espaces
• Faciliter les mouvements de la souris
• 2 critères
• visibilité
• accessibilité

40
Organisation de lécran
41
Conseils

• Faciliter le parcours visuel et les mouvements de
  la souris
• Définir et respecter
• une charte graphique
• un tracé régulateur
• les guides de style de chaque plateforme
• Organiser les zones de manipulations
• dans le sens de la lecture
• en fonction de la fréquence dutilisation
• Regrouper les informations qui sont en relation

Palettes doutils
Barre de menu
42
Typographie

• Ne pas utiliser plus de 4 polices de caractères
• Éviter leffet  arbre de Noël 
• Associer une police de caractères à chaque type
  dobjets de linterface
• Les textes doivent être affichés
• en minuscule, la première lettre en majuscule
• éviter litalique, le souligenment
• Les polices avec sérif (Times, Century
  Schoolbook,) facilitent la lecture sur papier
• Les polices sans sérif (Arial,) sont plus
  adéquates à lécran
• Fond d'écran gris ou blanc, éventuellement avec
  une texture
• Normes de lisibilité des caractères ISO 9241-3

43
Les couleurs

• Tout le monde ne perçoit pas les couleurs de la
  même façon
• Utiliser la couleur et un autre attribut pour
  coder une information ou pour mettre en évidence
• Les couleurs sont codées par trois attributs (HSV
  Hue, Saturation, Value)
• Teinte
• Longueur donde principale
• Saturation
• Spectre de la couleur
• Bande étroite couleur saturée
• Bande large pastels
• Intensité
• Degré de réflexion de la lumière ou clarté
• Codage couleur
• Associer à chaque couleur une signification
  précise et uniforme

44
Les couleurs recommandations

• Minimiser le nombre de couleurs
• Pour un objet donné, le nombre de couleurs
  utilisés doit être nettement inférieur au nombre
  de ses attributs
• Utiliser la couleur pour mettre en valeur telle
  ou telle partie de lécran (en particulier une
  information importante)
• Respecter le sens habituel donné aux couleurs
• dépend des pays
• des domaines
• Ex le rouge signifie
• Finance perte
• Chimie chaud
• Signalisation interdiction
• Cartographie nationale
• Utiliser des couleurs très contrastées pour
  exprimer une différence (et inversement)
• Utiliser une couleur neutre et claire pour le
  fond décran
• Principe du double codage couleur et autre
• 8 des hommes sont daltoniens

45
Méthode de choix des couleurs

• Identifier les objets à afficher
• Regrouper ces objets par niveau de visibilité
• Choisir les composantes de la couleur
• Teinte connotation
• Saturation et intensité visibilité
• Vérifier les compatibilités
• Prototyper le résultat obtenu
• Références sur utilisations des couleurs
• http//membres.lycos.fr/interaction/
• http//www.vrrh.ulaval.ca/sante/couleurs.html
• http//interface.free.fr/Interface/Couleur.html

46
Alignement et espacement des composants

• Labels et champs alignés à gauche
• Quand les labels sont de même longueur
• Labels alignés à droite et champs alignés à
  gauche
• Quand longueurs différentes
• Espacements en pixels normalisés dans chaque
  plateforme

47
Références et bibliographie

• Jean-François Nogier
• De lergonomie du logiciel au design des sites
  web, Dunod,
• Corinne Ratier (CNRS)
• http//www.dsi.cnrs.fr/bureau_qualite/ergonomie/er
  gonomie.asp
• 2002, 243 p.
• Cours de M. Beaudoin Lafon
• http//www-ihm.lri.fr/mbl/ENS/IHM/dess-rmi/introd
  uction.html
• Cours de Michel Futtersack (Paris 5)
• http//www.droit.univ-paris5.fr/futtersack/francai
  s/Enseignement/IHM/
• Cours dergonomie en ligne de Nicole Lompré
• http//www.univ-pau.fr/lompre

48
Take home messages

• Utiliser les chartres graphiques, les guides de
  styles et les normes
• Respecter les standards de la plateforme
  daccueil
• Ou alors innover mais radicalement
• Soigner particulièrement la procédure
  dinstallation et le premier contact avec votre
  logiciel