Les éléments d une IHM

Transcription

1 Les éléments d une IHM Stéphanie Jean-Daubias INFO Stephanie.Jean-Daubias -at- liris.univ-lyon1.fr L3

2 Plan du cours Les éléments d une IHM principes de base les types d interaction les composants de l interface graphique les tâches de l interaction graphique aide et gestion des erreurs PLAN 2

3 Mémoire à long terme o Mémoire à long terme capacité infinie durée de stockage illimitée accès associatif o Conséquence favoriser l apprentissage par répétition logiciel à utilisation fréquente logiciel à utilisation par intermittence 3

4 Mémoire à court terme o Mémoire à court terme mémorisation 7 items (± 2 selon individu, fatigue...) regroupement des mnèmes (unité d information) par motifs visuels ou acoustiques motifs visuels : lettres, chiffres, mots, formes, taille, couleur, localisation recherche séquentielle oubli : 15 à 30 secondes o Conséquences limiter les items de menus à 7 établir des liens entre éléments (couleurs, format, emplacements) utiliser des messages concis ne pas présenter d informations inutiles 4

5 Quelques principes o 2 secondes ne pas attendre plus de 2 secondes les réponses du système o 3 clics accéder à l information souhaitée en 3 clics o Loi de Fitts le temps pour atteindre une cible dépend de la distance et de sa taille o Syndrome de l oisillon les utilisateurs ont tendance à rejeter les systèmes non familiers problème pour l évolution des logiciels, les innovations o Interface intuitive utilisable dès la première fois, sans formation 5

6 Lisibilité des couleurs o Privilégier un bon contraste caractères/fond caractères sombres sur fond clair de préférence caractères noirs sur fond blanc o Éviter certaines combinaisons de couleurs o Limiter le nombre de couleurs (7 maximum) o Attention à la portabilité des couleurs selon les écrans (penser au nombre de couleurs des écrans) selon les personnes : choisir des couleurs faciles à distinguer daltonisme : 8-10% des hommes, 0,5% des femmes test test test test 6

7 Signification des couleurs o Respecter les habitudes culturelles en occident : rouge = stop / vert = go en chine : rouge = joie, mariage o Utiliser les couleurs pour signifier quelque chose même type d information même couleur types d information différents couleurs contrastées types d information similaires couleurs peu contrastées 7

8 Lecture à l écran o Parcours de l écran (oculométrie) 1ère visualisation de l écran : parcours en Z ensuite : parcours sélectif recherche : en F / peigne o Meilleure visibilité et accessibilité au centre de l écran Commandes Zone de sélection Zone de travail Zone de messages annexes 8

9 Affichage de texte o Typographie sur écran polices sans sérif plus lisibles à l écran (Arial, Calibri, Helvetica, Geneva ) gras, italique, souligné ralentissent la lecture MAJUSCULES moins lisibles que minuscules A Asérif L'interface Homme-machine étudie la façon dont les humains interagissent avec les ordinateurs ou entre eux à l'aide d'ordinateurs, ainsi que la façon de concevoir des systèmes informatiques qui soient ergonomiques, c'est-à-dire efficaces, faciles à utiliser ou plus généralement adaptés à leur contexte d'utilisation. L'interface L'INTERFACE Homme-machine HOMME-MACHINE étudie la la la façon ÉTUDIE façon dont LA dont les FAÇON humains les humains DONT interagissent LES interagissent avec HUMAINS les ordinateurs INTERAGISSENT avec ou les ou entre entre ordinateurs eux AVEC eux à à ou l'aide LES entre ORDINATEURS d'ordinateurs, eux à l'aide ainsi OU d'ordinateurs, que que ENTRE la la façon façon ainsi de EUX concevoir À que L'AIDE la des façon des D'ORDINATEURS, systèmes de concevoir des systèmes informatiques AINSI QUE informatiques LA qui FAÇON soient soient DE ergonomiques, qui soient c'est-à-dire ergonomiques, CONCEVOIR efficaces, DES c'est-à-dire SYSTÈMES faciles efficaces, à utiliser efficaces, faciles INFORMATIQUES à utiliser faciles ou à plus QUI utiliser SOIENT généralement ou plus ou plus généralement adaptés à leur généralement adaptés ERGONOMIQUES, à leur contexte adaptés C'EST-À-DIRE d'utilisation. à leur contexte d'utilisation. contexte EFFICACES, d'utilisation. FACILES À UTILISER 9

10 Langage employé o Utiliser le langage de l utilisateur o Éviter les abréviations o Éviter les impasses o Respecter l ordre des actions o Produire des messages concis homogènes à la voix active à la forme affirmative explicites polis 10

11 Recommandations o Mettre en évidence les éléments importants o Regrouper les commandes en fonction de leur signification de l objet auquel elles se rapportent 11

12 Plan du cours Les éléments d une IHM principes de base les types d interaction les composants de l interface graphique les tâches de l interaction graphique aide et gestion des erreurs PLAN 12

13 Les types d interaction o Quel type d interaction pour quelle commande? langage naturel langage de commande menus formulaires requêtes manipulation directe 13

14 Langage naturel o Dialoguer en langage naturel (réel ou via le clavier) en théorie, le moyen le plus attractif de communiquer en pratique, très peu utilisé (surtout pour commandes de complexité restreinte) o Raisons techniques difficultés de l analyse du langage naturel problème des ambiguïtés, des références, des sous-dialogues difficultés de reconnaissance vocale o Raisons fonctionnelles difficulté d utilisation du clavier erreurs lenteur d utilisation 14

15 Langage de commande (1) o Principe écrire une ligne de commandes (avec syntaxe et vocabulaire) accès direct aux fonctionnalités du système pour les experts mais pas utilisable par des novices o Exemples : Dos, Unix delete *.* copy A:*.doc c: o Avantages concision (>langage naturel) structuration possibilité d extensions (définition de macros, scripts) o Inconvénients nécessite un apprentissage et une pratique régulière 15

16 Langage de commande (2) o Syntaxe cohérence dans l ordre des arguments même si l ordre peut différer en langage naturel formes syntaxiques variées : remplace A par B, substitue B par A Action Objet Destination o Vocabulaire mots courts faciles à taper (proximité des touches sur le clavier) spécifiques plutôt que généraux de préférence prononçables cohérence pour l ensemble des commandes (haut / bas, et non monter / bas) pour les abréviations (MKDIR make directory, CD change directory) 16

17 Menus o Sélection d un item dans un menu liste de commandes déclenchées par un clic mise en évidence de l option choisie o Nombre d arguments de la commande aucun (ex : quitter) un (ex : rechercher) plusieurs (ex : remplacer) o Ordre des arguments commande puis arguments (ex : remplacer) arguments puis commande (ex : copier) 17

18 Formulaires et requêtes o Formulaires : répondre à des questions pour entrer des informations nombreuses mécanisme simple mais fonctionnalités limitées questions fermées (oui/non, choix multiples, listes) questions ouvertes champs à remplir o Requêtes : poser des questions langages de requêtes plus complexe utilisé en base de données Donner le titre et l auteur des livres dont le titre commence par L : SELECT titre, auteur from LIVRES where titre LIKE L% ; 18

19 Manipulation directe (1) o Représentation permanente à l écran des objets des actions possibles o Actions physiques sur les objets pointer et cliquer illusion de travailler directement sur les objets ( transmettre une commande) o Opérations rapides et réversibles avec effet visible immédiatement o Principe objet/action l'utilisateur désigne le ou les objets qu il veut manipuler puis les actions les unes à la suite des autres exemple : sélection de texte, puis centrer italique changer la casse 19

20 Manipulation directe (2) o Avantages plus fort engagement de l utilisateur impression d agir sur l environnement plus faible distance entre la conception du monde et la façon dont il est représenté à l interface o Inconvénients manque d abstraction pb pour les opérations abstraites encombrement de l écran ambiguïté du sens des icônes jugée moins rapide par les experts problème du choix de la métaphore 20

21 Plan du cours Les éléments d une IHM principes de base les types d interaction les composants de l interface graphique les tâches de l interaction graphique aide et gestion des erreurs PLAN 21

22 Guides de style (guidelines) o Référence à respecter pour concevoir des interfaces définissent l aspect des interfaces mais ne contiennent pas de recommandations ergonomiques génériques / spécifiques à une version d un système d exploitation 22

23 WIMP - Windows, Icons, Menus, Pointers o Fenêtres : vocabulaire barre de titre barre de menu barres d outils barre d état 23

24 WIMP - Windows, Icons, Menus, Pointers o Multifenêtrage sans superposition : mosaïque avec superposition problèmes informations masquées temps d accès à la fenêtre masquée hiérarchique fenêtre d application avec fenêtres filles 24

25 WIMP - Windows, Icons, Menus, Pointers o Fenêtres d applications MDI Multiple Document Interface fenêtre principale espace de travail fenêtres filles contiennent les documents o Fenêtres de documents la métaphore du document remplace celle de l application fenêtre inactive fenêtre active 25

26 WIMP - Windows, Icons, Menus, Pointers o Fenêtres utilitaires palette d options fenêtres jaillissantes (pop-up) infobulle, bulle d aide, aide contextuelle 26

27 WIMP - Windows, Icons, Menus, Pointers o Fenêtres de dialogue (1) fenêtre permettant l interaction entre le système et l utilisateur découplage temporel et spatial entre la spécification de la commande (paramètres) et son exécution fenêtres modales on doit fermer le dialogue pour retourner à la fenêtre principale obligatoire quand la commande en cours ne peut être suspendue fenêtre déplaçable pour laisser l utilisateur voir la tâche amont fenêtres non modales on peut passer de la fenêtre de dialogue à la fenêtre principale l utilisateur peut abandonner temporairement la tâche en cours 27

28 WIMP - Windows, Icons, Menus, Pointers o Fenêtres de dialogue (2) règles regroupements > succession de dialogues nommer les groupes fenêtres modales (sauf pour les dialogues de recherche) pas plus de 5 boutons contient toujours au moins les boutons OK, Annuler (+ Aide) boutons concernant l'ensemble des onglets : à l'extérieur des onglets contrôles et erreurs filtres de saisie et contrôles de format en quittant le dialogue si une erreur est détectée : affichage d un message d'erreur et positionnement du curseur sur la saisie mise en cause Annuler : aucune entrée faite sur le dialogue ne doit être prise en compte 28

29 WIMP - Windows, Icons, Menus, Pointers o Fenêtres de dialogue (3) ordre des boutons 29

30 WIMP - Windows, Icons, Menus, Pointers o Icônes : graphisme associé à une signification à l interface fenêtres "iconisées" représentations métaphoriques des objets corbeille, disques programmes fichiers, dossiers des actions enregistrer tracer une droite lancer la reconnaissance vocale problèmes compréhension de la représentation pérennité solutions tester les représentations bulles d aide, icônes + texte faire évoluer les représentations 30

31 Difficulté d interprétation WIMP - Windows, Icons, Menus, Pointers o Utilisation des icônes quand on a besoin de libérer de la place pour des commandes fréquentes avec un libellé limiter leur nombre (12 au mieux, 20 max) o Construction des icônes à différents niveaux d abstraction ressemblance (bouton stop, corbeille) descriptif (texte justifié) exemple (souligner) caricatural (impression) analogie (couper = ciseaux, sauver = disquette) symbolique (image abstraite : organiser) arbitraire (actualisation des navigateurs) 31

32 WIMP - Windows, Icons, Menus, Pointers o Types de menus déroulants ensemble d items s ouvrant en cliquant sur le libellé dans la barre de menus contextuels (pop-up) ensemble d items accessibles hors de la barre de menu, là où se trouve la souris hiérarchiques pour proposer des options complémentaires indiqués par un triangle dans un item de menu détachables (tear-off) menu contenant généralement une palette qui se transforme en fenêtre utilitaire circulaires présentation originale et «économique» 32

33 WIMP - Windows, Icons, Menus, Pointers o Règles pour les menus entre 2 et 7 items libellé en un seul mot possibilité de sous-menus (1 seul niveau) 33

34 WIMP - Windows, Icons, Menus, Pointers o Règles pour les items de menu libellé possible en plusieurs mots (max 4) graphisme des commandes activable normal non activable grisé (copier sans sélect.) mais PAS effacé ou déplacé (personnaliser les menus experts) propriétés ou modes actifs actif / non actif propriété active parmi plusieurs action ouvrant une fenêtre raccourcis clavier Alt + caractère souligné / fonctions / Ctrl groupement (fréquence d usage, ordre d utilisation, ordre ) items regroupés et séparés par un trait horizontal 34

35 WIMP - Windows, Icons, Menus, Pointers o Dispositifs de pointage (souris, trackball, joysticks ) o Curseurs curseur différent action différente positionnement positionnement dans un texte attente lien hypertexte déplacement redimensionnement 35

36 Boutons (1) o Métaphore représentent les boutons que l on manipule sur les objets réels (TV, hi-fi) o Bouton d action effet 3D et 4 états relâché relâché avec focus enfoncé inactif si un bouton ouvre un dialogue, intitulé suivi de raccourcis : Alt + caractère souligné o Boutons graphiques d'une barre d'outils 36

37 Boutons (2) o Bouton radio pour faire un choix parmi des alternatives exclusives cocher un bouton enlève le choix antérieur possibilité de bouton radio graphique (choix d une couleur) o Case à cocher pour sélectionner des options non exclusives dans une liste chaque case est une bascule 2 états : coché / non coché 3 états : coché / non coché / grisé Exemple 37

38 Listes o Liste contenu affiché en permanence (mais barre de défilement) sélection simple sélection multiple (ctrl/shift) pour visualiser entre 3 et 8 éléments o Liste déroulante cliquer pour visualiser le contenu sélection d un seul élément liste non modifiable (sélection simple) liste modifiable (permet la saisie directe) zone facultative : Aucun paramètres : (par défaut) o Liste de choix hiérarchique pour naviguer dans une arborescence 38

39 Zones de regroupement o Boîtes de regroupement pour regrouper des cases à cocher, des boutons radio, des éléments divers o Barre de séparation o Classeur à onglets pour regrouper dans une même fenêtre des affichages répartis sur plusieurs pages 39

40 Autres composants o Zones de saisie texte sur une seule ligne si un type précis est attendu, le système doit contrôler la saisie le curseur change de forme texte multi-lignes o Molette d incrément pour remplacer la saisie o Curseur pour sélectionner une valeur peu précise o Indicateur de progression pour représenter graphiquement un taux d avancement % du temps, pas du nombre d actions! 40

41 Retour d information (feedback) o Menu ligne sélectionnée o Saisie de texte curseur o Attente changement de curseur o Sélection d un objet poignées o Sélection de texte inversion vidéo o Autres possibilités changement de couleur, de police, clignotement, animation, son avec parcimonie, permettre d arrêter 41

42 Plan du cours Les éléments d une IHM principes de base les types d interaction les composants de l interface graphique les tâches de l interaction graphique aide et gestion des erreurs PLAN 42

43 Les tâches de l interaction graphique o Quels composants graphiques pour quelle tâche? saisie sélection déclenchement défilement spécification d arguments et de propriétés transformation 43

44 Tâche de saisie o Saisie de texte boîte de saisie + clavier (virtuel) o Saisie de quantités curseur ou molette + souris/clavier o Saisie de positions pointage o Saisie de tracés pointage 44

45 Tâche de sélection o Choix d un élément dans un ensemble boutons radio liste déroulante o Choix de plusieurs éléments dans un ensemble cardinal fixe case à cocher liste à sélection multiple cardinal variable liste déroulante modifiable liste à sélection multiple + saisie d éléments supplémentaires o Sélection multiple par groupe (ctrl) ou par intervalle (shift) par ajout/retrait 45

46 Tâche de déclenchement o Boutons o Menus o Glisser - déposer glisser - lâcher, glisser - déplacer, drag and drop cliquer sur un objet graphique et maintenir le bouton enfoncé déplacer la souris lâcher le bouton une fois arrivé à destination l action dépend de la source et de la destination exemple : glisser - déposer un fichier sous Windows sur un même disque : déplacement sous Windows sur des disques différents : copie 46

47 Tâche de défilement o Barre de défilement (ascenseur) défilement direct 1 seule unité d information 1 page écran en % du document défilement automatique lorsque la commande effectuée engendre une modification de la quantité d information, un déplacement du curseur 47

48 Tâche de spécification d arguments et de propriétés o Boîtes de dialogue o Boîtes de propriétés aperçu des modifications sur les objets concernés 48

49 Tâche de transformation o Poignées de manipulation laisser la possibilité de redimensionner fenêtres dessins images redimensionnement suivant un axe horizontal vertical suivant les deux axes à la fois proportionnellement ou non 49

50 Plan du cours Les éléments d une IHM principes de base les types d interaction les composants de l interface graphique les tâches de l interaction graphique aide et gestion des erreurs PLAN 50

51 Aide o Types d aide contextuelle : que puis-je faire? factuelle : qu est-ce que c est? procédurale : comment faire? o Moyens documentation aide en ligne bulles d aide 51

52 Gestion des erreurs : prévention o Empêcher les erreurs informer annoncer les commandes irréversibles inactiver les commandes indisponibles contrôler les saisies 52

53 Gestion des erreurs : correction o Permettre la correction des erreurs signaler l erreur au plus tôt placer le message dans la zone concernée / marquer la zone concernée permettre une modification simple de la saisie permettre le retour arrière autoriser les interruptions pour les commandes longues 53

54 Plan du cours Les éléments d une IHM principes de base les types d interaction les composants de l interface graphique les tâches de l interaction graphique aide et gestion des erreurs PLAN 54