Notions de design utilisateur - CCDMD
32
Notions de design utilisateur de l’interface
Transcript of Notions de design utilisateur - CCDMD
Notions de designutilisateurde l’interface
�www.ccdmd.qc.ca
La publication de cet ouvrage a été rendue possible grâce à une subvention du ministère de l’Éducation, du Loisir et du Sport.
Ouvrage publié par : Centre collégial de développement de matériel didactique (CCDMD) 6220, rue Sherbrooke Est, bureau 416 Montréal (Québec) H1N 1C1 Téléphone : (514) 873-2200 Site Internet : www.ccdmd.qc.ca
Gestion du projet : Cyr-Marc Debien Révision linguistique : Hélène Larue Conception graphique et infographie : Sophie Paquette Conception de la couverture : Sophie Paquette
Dépôts légaux : 2e trimestre 2007 Bibliothèque nationale du Québec Bibliothèque nationale du Canada
ISBN : 978-2-89470-218-5
© Centre collégial de développement de matériel didactique
�www.ccdmd.qc.ca
Introduction.....................................................................................................................................................................4L’ergonomie.et.le.dialogue.humain-machine...........................................................................................................4La.navigation..................................................................................................................................................................5La.manipulation.directe................................................................................................................................................6L’interface.humain-machine........................................................................................................................................7L’organisation.du.dialogue..........................................................................................................................................8Les.fenêtres.et.leurs.composants..................................................................................................................................9L’affichage.des.fenêtres.et.des.cadres.......................................................................................................................13Les.fenêtres.de.dialogue.ou.boîtes.de.dialogue......................................................................................................14Les.boutons....................................................................................................................................................................17Les.composants.de.sélection.......................................................................................................................................17Les.champs.de.saisie.....................................................................................................................................................18Les.menus.......................................................................................................................................................................19...Les.menus.déroulants..................................................................................................................................................20...Les.menus.contextuels.................................................................................................................................................21.Les.infobulles.................................................................................................................................................................22Les.touches.de.fonctions.(F1.à.F15).et.raccourcis-clavier......................................................................................22La.souris..........................................................................................................................................................................23...L’utilisation.du.clic.et.du.double-clic..........................................................................................................................23Le.temps.de.réponse.....................................................................................................................................................24L’interface.souhaitable.ou.idéale..............................................................................................................................24....L’écran...........................................................................................................................................................................24...L’agencement.de.l’écran.et.la.disposition.des.éléments............................................................................................25...Le.graphisme................................................................................................................................................................26...Les.couleurs...................................................................................................................................................................26Les.polices.de.caractères..............................................................................................................................................28Les.icônes........................................................................................................................................................................30La.mise.en.évidence.....................................................................................................................................................30Le.langage......................................................................................................................................................................32En.conclusion.................................................................................................................................................................32
�www.ccdmd.qc.ca
IntroductionLe présent guide expose les règles de base des normes graphiques, ergonomiques et visuelles du design de l’interface usager d’un logiciel ou d’un site Web. Les concepteurs et conceptrices graphiques d’expérience y reverront probablement des notions qu’ils connaissent ou maîtrisent déjà. Toutefois, un nouvel auteur ou une nouvelle auteure du CCDMD y trouveront certainement matière à réflexion de même que quelques trucs qui pourront les aider dans la conception de ressources d’enseignement et d’apprentissage informatisées (REA). Aussi, la terminologie employée dans ce document permettra aux différents intervenants de discuter en utilisant des expressions et un langage communs.
L’ergonomie et le dialogue humain-machinePlusieurs définitions de l’ergonomie ont été données depuis que l’on s’intéresse à l’adéquation entre l’humain et les machines qui lui servent d’outils. Malgré quelques différences dans ces définitions, un élément central fait l’unanimité : un outil ergonomique doit être adapté aux caractéristiques des utilisateurs.
Deux principes importants sont à la base d’un outil informatique ergonomique :
L’utilité, qui consiste à répondre à un besoin. Les fonctionnalités proposées de même que l’interface doivent servir à faire quelque chose qui est en relation avec les objectifs de l’utilisateur.
L’utilisabilité, qui consiste à assurer la satisfaction de ce besoin. Ce principe renvoie au confort d’utilisation, à la facilité d’apprentissage, à l’efficacité d’utilisation et à la satisfaction des utilisateurs à l’endroit d’un système et de son interface. L’utilisabilité doit rendre un système facile à employer et permettre d’en exploiter au mieux les fonctionnalités. Une interface utilisable doit permettre de réaliser une action rapidement et efficacement.
Appliquée aux REA, l’ergonomie peut être définie comme la capacité à répondre efficacement aux attentes des utilisateurs et à fournir un confort de navigation tout en tenant compte de la diversité de leurs profils. La prise en compte des paramètres suivants est généralement déterminante :
Les attentes de chacun des utilisateurs, qui n’ont pas nécessairement les mêmes exigences de design graphique.
Les habitudes de l’utilisateur, qui correspondent à des comportements acquis.
L’âge de l’utilisateur, qui influence en général sa capacité d’adaptation et sa rapidité de navigation.
Le niveau de connaissance de l’utilisateur, qui n’est pas nécessairement un pro de l’informatique.
Les équipements de l’utilisateur, qui peuvent entraîner des difficultés (par exemple, l’affichage d’un site peut varier d’un équipement à un autre, en particulier selon le navigateur et la résolution d’affichage des moniteurs).
•
•
•
•
•
•
•
�www.ccdmd.qc.ca
La navigationLa qualité de la navigation dans un logiciel ou dans un site Internet est la conséquence directe d’une ergonomie plus ou moins bien réussie. La navigation détermine la facilité avec laquelle l’usager se déplacera d’une section à une autre du logiciel ou du site. Une navigation bien structurée fera en sorte que l’utilisabilité sera maximale et que l’usager pourra réaliser ses objectifs rapidement. Afin de déterminer toutes les ramifications de la navigation sur un site Internet ou dans un logiciel, il est important d’élaborer des schémas ou des diagrammes de navigation, qui ont pour seule fonction d’obtenir une vue d’ensemble du squelette de l’application en cours d’élaboration. On utilise régulièrement le terme « arborescence » pour désigner cette structure (figure 1).
Afin que la navigation soit assortie d’une utilisabilité maximale, voici quelques recommandations.
Suivre la règle des trois clics : organiser l’information dans un site ou un logiciel de telle sorte que l’usager puisse accéder à tous les contenus en trois clics à partir de la page d’accueil. Cette convention est la base d’une navigation efficace, mais il ne faut pas se leurrer : cet objectif peut être difficile à atteindre selon la complexité du site ou du logiciel. Il peut arriver que l’utilisateur ait recours à une douzaine de clics pour atteindre son but. L’important, c’est qu’il y arrive. S’il a le sentiment que ce qu’il fait est utile et qu’il finit par réaliser son objectif, le nombre de clics importe moins. Par opposition, si on tente à tout prix de maintenir un nombre de clics réduit pour atteindre un but donné, il est fort possible (c’est mathématique) que la quantité et la complexité des variables de choix par page soient tellement élevées que l’utilisateur y perdra sa motivation et, par le fait même, tout intérêt pour le site ou le logiciel.
Suivre la règle des trois écrans : une page de contenu ne doit pas excéder la « hauteur » de trois écrans. Les utilisateurs détestent le défilement vertical. Il est donc important de concentrer l’information importante sur la première page.
Éviter la navigation par défilement à l’horizontale. Avoir à utiliser le défilement horizontal pour voir le contenu d’une fenêtre ou d’une page ne fait pas partie des conventions.
Éviter de surcharger l’écran. Une proportion de 50 % peut être occupée par les textes et les graphiques tandis que l’autre 50 % sera comblé par le fond de l’écran.
•
•
•
•
Figure 1 Arborescence typique d’un logiciel. Ici, celle du logiciel Traitement des requêtes d’analyse biomédicales, CCDMD, 2007.
�www.ccdmd.qc.ca
Prévoir la possibilité de revenir à la page d’accueil où que l’on se trouve dans logiciel ou le site Internet. Un utilisateur perdu est un utilisateur déçu.
S’assurer de la bonne lisibilité des textes, peu importe leur emplacement dans l’écran.
La plupart des gens n’aiment pas lire un texte sur un écran d’ordinateur. En rédigeant des phrases courtes, concises et ayant une construction simple, l’utilisateur peut se consacrer à sa tâche au lieu de chercher à comprendre et interpréter le sens de ce qui est écrit à l’écran. Les mots qui identifient les boutons ou les hyperliens participent aussi à la navigation. Soyez précis! Soyez structuré!
La manipulation directeLa manipulation directe est facile et instinctive. Elle implique que l’objet à manipuler soit visible à l’écran. La commande que l’on désire transmettre à l’objet peut être une action aussi simple qu’un clic ou un déplacement. L’action doit pouvoir se défaire de la même façon et aussi simplement qu’elle a été faite. Une action élémentaire doit généralement être réversible. La manipulation directe doit être auto-explicative et s’interpréter facilement pour ce qui concerne tant sa simplicité d’utilisation que ses limitations. Elle se prête à tous les types de logiciels.
La manipulation directe a pour principaux avantages la facilité d’utilisation et la réduction du risque d’erreur. Toutefois, il faut que les fonctionnalités proposées répondent directement aux besoins de l’utilisateur et qu’elles soient explicatives en soi.
Pour que la manipulation directe soit efficace, elle doit suivre essentiellement la règle suivante : la distance sémantique et la distance articulatoire doivent être réduites au minimum, de façon que l’effort de compréhension soit réduit.
La distance sémantique précise, dans l’interface, la signification des objets et des relations ainsi que les opérations autorisées par et sur ceux-ci. Cette distance est fonction de l’effort requis par l’utilisateur pour comprendre et interpréter la tâche qu’il pense accomplir à partir des moyens fournis par l’interface. La distance sémantique est faible si on peut facilement exprimer dans le langage de l’interface ce que l’on veut réaliser, sans faire appel à des notions étrangères, et comprendre ensuite le résultat (figure 2).
La distance articulatoire correspond aux éléments de l’interface qui permettent d’accomplir aisément une action ou une tâche. Elle est courte (ce qui est recherché) lorsqu’on peut déduire facilement quels seront les résultats selon les objets et les commandes employés (figure 3).
•
•
•
•
•
Figure 2 La symbolique des fichiers, représentée ici par une feuille de papier et des dossiers, est univoque. La distance sémantique est réduite. Symboliquement, on glisse la feuille de papier dans le dossier. Windows XP, Microsoft.
Figure 3 Lorsque l’action de glisser un fichier et de le déposer dans un dossier est accomplie,
l’usager retrouve son fichier à l’intérieur du dossier.Windows XP, Microsoft.
�www.ccdmd.qc.ca
Quelques moyens pour réduire les distances :
La.sélection.d’un.item.de.menu.par.pointage.du.curseur.de.la.souris.réduit.la.distance.articulatoire.par.rapport.à.la.frappe.au.clavier.d’un.nom.d’item.
L’organisation.de.menus.multiples.(menus.déroulants,.menus.contextuels).réduit.la.distance.articulatoire.en.opposition.à.la.présentation.d’un.grand.nombre.d’items.de.menus.sous.la.forme.d’une.liste.
Le.choix.de.couleurs.ayant.des.connotations.psychologiques.connues.et.usuelles.diminuera.la.distance.sémantique.(les.bons.résultats.en.vert.et.les.mauvais.en.rouge).
La.disposition.des.composants.de.l’écran.de.telle.sorte.que.les.déplacements.de.l’œil.soient.faciles..et.conformes.aux.habitudes.de.lecture.de.même.que.la.proximité.de.ceux-ci,.réduisent.aussi.la..distance.articulatoire.
•
•
•
•
L’interface humain-machineDans la relation humain-machine où la machine est un ordinateur, l’interface humain-machine correspond à tout ce qui permet la communication entre les deux éléments. On distingue l’interface matérielle (moniteur, clavier, souris, tablette graphique, imprimante, haut-parleurs, etc.) et l’interface virtuelle (tout l’environnement graphique qui apparaît à l’écran). Le dialogue humain-machine implique à la fois la sélection et le déplacement d’objets à l’écran à l’aide de la souris ainsi que la saisie de texte à l’aide du clavier (figure 4).
Il y a plusieurs règles à suivre pour qu’une relation humain-machine puisse s’établir correctement.
Figure 4 Interface virtuelle représentant un poste de travail. La piqûre de l’injection, CCDMD, 2007.
Ces règles touchent directement :
L’organisation.du.dialogue
Les.fenêtres.et.leurs.composants
Les.menus
Les.touches.de.fonctions
La.souris.(le.pointeur)
La.gestion.du.temps.de.réponse
•
•
•
•
•
•
�www.ccdmd.qc.ca
L’organisation du dialogueLa structure du dialogue humain-machine doit s’appuyer sur quatre principes de bases :
Présenter les commandes et les données dans l’ordre d’utilisation et regrouper les informations relatives à une même activité dans une même fenêtre ou sous un en-tête de menu (figures 5a et 5b).
Laisser le contrôle à l’utilisateur; éviter les culs-de-sac; donner l’impression à l’utilisateur qu’il peut naviguer à sa guise.
Guider l’utilisateur pour faciliter sa navigation.
Éviter la complexification de la navigation. Si cette situation est impossible et sachant que la mémoire à court terme sature rapidement, il faut alors prévoir des outils ou des fonctions de repérage, qui laissent une trace du chemin parcouru par l’utilisateur. La traçabilité du chemin parcouru devient nécessaire dès que la complexité du logiciel augmente (figure 6).
•
•
•
•
Figures 5a et 5b Deux exemples de présentation de données. Les informations sont regroupées dans une même fenêtre lorsqu’il s’agit des commandes d’impression ou regroupées sous un même menu. Mac OS X, Apple Computer et Windows XP, Microsoft.
Figure 6 Voici un exemple de tracé du chemin parcouru dans un logiciel. Ici, le logiciel Interprète, CCDMD, 2005.
�www.ccdmd.qc.ca
Les fenêtres et leurs composantsLa fenêtre constitue l’une des unités de base de l’environnement graphique de l’interface. Les différents types de fenêtres ont chacun des particularités relatives à leur usage. Chaque fenêtre correspond à une zone précise très bien délimitée à l’écran avec un minimum de commandes.
La fenêtre de travail est la zone principale. Selon les logiciels, elle peut symboliser une feuille de papier à écrire dans le cas d’un logiciel de traitement de texte, un papier-calque dans le cas d’un logiciel de dessin, une pellicule photo dans le cas d’un logiciel de retouche photographique, etc. (figure 7).
La fenêtre de dialogue ou boîte de dialogue est une zone qui est affichée par le système ou le logiciel d’application en réaction à une action de l’utilisateur. Habituellement, lorsqu’on envoie une commande qui, avant de pouvoir être exécutée, demande des précisions ou nécessite des choix, une fenêtre de dialogue apparaît. Parfois, il arrive que cette fenêtre soit modale, ce qui a pour effet qu’il n’est plus possible de travailler dans le logiciel tant et aussi longtemps que l’action demandée dans cette fenêtre n’est pas complétée ou qu’on n’a pas répondu à la question.
Une fenêtre intruse ou « surgissante » est une fenêtre secondaire qui s’affiche, sans avoir été sollicitée par l’utilisateur, devant la fenêtre principale. Elles sont fréquentes lorsqu’on navigue sur Internet. Certains fureteurs ont la possibilité de les bloquer.
Une fenêtre « surgissante » peut aussi être une fenêtre qui s’affiche à partir du contenu de la fenêtre principale. Cette fenêtre est sollicitée par l’usager. Elle permet de donner de l’information supplémentaire (figure 8).
•
•
•
•
Figure 7 Exemple d’une page de travail qui représente une feuille de papier avec du texte. Word, Microsoft Corporation.
Figure 8 Exemple d’une fenêtre surgissante. Plantes d’ornements au Québec : Problèmes
et solutions, CCDMD, 2005.
10www.ccdmd.qc.ca
Une fenêtre flottante est une fenêtre qui peut être déplacée par l’usager afin de libérer l’écran. Il est important de permettre le déplacement des fenêtres secondaires afin de ne pas masquer les informations (figure 9).
La fenêtre palette ou palette d’outils est une fenêtre qui contient des fonctions, habituellement représentées par un symbole, spécifiques à une tâche en cours (figure 10).
Le multifenêtrage permet une flexibilité accrue et facilite l’organisation de l’espace-écran selon les besoins de l’utilisateur. Cette approche permet de réaliser plusieurs activités en parallèle et apporte un gain notable pour les usagers expérimentés. À l’opposé, le multifenêtrage augmente la complexité de la gestion de l’interface pour les usagers moins expérimentés.
•
•
Figure 9 Exemple de déplacement d’une fenêtre. NetQuiz Pro, CCDMD, 2005.
Figure10 Exemple d’une fenêtre d’outils ou palette d’outils. Ici, la palette du logiciel Diagnostiqueur expert, CCDMD, 2007.
11www.ccdmd.qc.ca
Quelques recommandations utiles pour la gestion des fenêtres :
La gestion des fenêtres ne doit pas nuire à la tâche en cours. (Figure 11)
Les commandes d’organisation et de gestion des fenêtres doivent être uniformes, faciles à mémoriser et s’inspirer idéalement des standards de gestion communs (image, barre de titre, barre de navigation et boutons de fermeture).
La fenêtre active doit toujours être au premier plan et mise en évidence d’une façon ou d’une autre (figure 12).
Autoriser la mémorisation de l’arrangement des fenêtres, ce qui permet de revenir dans le logiciel sans avoir à réorganiser de nouveau les fenêtres. Par exemple, lorsqu’une personne travaille avec un logiciel de traitement de texte, elle peut avoir pour habitude de disposer sa fenêtre de travail à la gauche de l’écran et sa palette d’outils de mise en forme du texte en haut, à la droite de l’écran. Il est utile que le logiciel conserve la position des fenêtres afin qu’à sa réouverture, l’usager trouve les fenêtres là où il les avait laissées.
•
•
•
•
Figure 11 Exemple de superposition de fenêtres ordonnées.
SIDSI, CCDMD, 2001.
Figure 12 Exemple de fenêtres superposées. Au premier plan la fenêtre active. La recherche et les sciences humaines, le cours, CCDMD, 2007.
1�www.ccdmd.qc.ca
Minimiser la quantité d’information à mémoriser d’une fenêtre à une autre et limiter le contenu d’une fenêtre à une tâche précise (figure 13).
Moins il y a de fenêtres, plus elles sont complexes et contiennent beaucoup d’information. À l’inverse, plus il y a de fenêtres, plus elles sont spécifiques et plus l’itinéraire de navigation s’allonge (figures 14a et 14b).
Il est important de trouver un juste équilibre afin de conserver une navigation simple.
•
•
Figure 13 Exemple d’une fenêtre de saisie de paramètres spécifiques. Ici, les paramètres d’entraînement dans le logiciel Musculation, CCDMD, 2006.
Figures 14a et 14b La fenêtre de gauche est simple et ne requiert que l’entrée d’une donnée. À l’opposé, celle de droite contient plusieurs paramètres qui la rendent
plus complexe. Maître fromager, CCDMD, 2005.
1�www.ccdmd.qc.ca
L’affichage des fenêtres et des cadresL’environnement fenêtré permet d’organiser la masse des contenus en les disposant sur l’écran. La juxtaposition comme la superposition des fenêtres affichées participent à cet agencement ordonné et signifiant.
Il y a essentiellement quatre modes d’affichage des fenêtres : par « carrelage », par remplacement, par recouvrement et par cadre.
Le mode d’affichage par « carrelage » fait en sorte que les nouvelles fenêtres ne masquent pas les autres et s’affichent les unes à côté des autres. Leur position est habituellement fixe et ne peut être altérée. Dans ce cas-ci, les barres de défilement sont obligatoires afin de faire défiler les contenus des fenêtres si l’espace fait défaut. Cette façon de faire est de moins en moins en usage.
En mode d’affichage par recouvrement, chacune des nouvelles fenêtres qui apparaissent, selon les demandes de l’usager, masque celles qui sont déjà à l’écran. Habituellement, ces fenêtres peuvent être déplacées et redimensionnées. Toutefois, l’affichage par recouvrement oblige l’usager à mémoriser la séquence de superposition des fenêtres. Habituellement, une fonction, dans un des menus (figure 15), permet d’activer n’importe quelle fenêtre ouverte et de la faire passer au premier plan au lieu de cliquer et de déplacer toutes les fenêtres afin d’activer celle qui est derrière les autres (figure 16).
En mode d’affichage par remplacement, la nouvelle fenêtre remplace celle qui est active. Habituellement, ce genre d’affichage est linéaire et oblige l’usager à suivre un tracé
prédéterminé. Ce mode est restrictif, mais sécurise l’usager non expérimenté dans sa démarche. On l’utilise principalement quand on quitte un logiciel ou dans un site Internet avec Historique (figure 16).
•
•
•
Figure 15 Item de menu qui permet de rendre une fenêtre active et de la faire passer au premier plan lorsqu’il y a plusieurs fenêtres ouvertes. Interprète, CCDMD, 2005.
Figure 16 Item de menu qui permet de rendre une page active et de la faire passer au premier plan lorsqu’il y en a plusieurs d’ouvertes. Safari 2.0.
1�www.ccdmd.qc.ca
Le mode d’affichage par cadre est utilisé pour la conception de sites Internet. Ce mode permet de diviser la fenêtre de navigation principale en zones indépendantes qui possèdent chacune leur propre adresse Internet et leur propre contenu, lequel est indépendant de la fenêtre principale. Les zones ou les sous-fenêtres permettent de visualiser, à même la fenêtre principale, de l’information en provenance d’autres pages Internet (figures 17a et 17b).
Les fenêtres de dialogue ou boîtes de dialogueLes fenêtres de dialogue permettent de modifier ou de consulter des données, ou encore, de fixer certains paramètres de fonctionnement du logiciel. Elles sont principalement utilisées dans les logiciels et plus rarement pour le développement de sites Internet.
L’utilisation de ces fenêtres est avantageuse puisqu’elle permet de regrouper plusieurs données contextuelles dans un même espace. L’usager agit directement sur les données et l’interaction est immédiate. Il voit ce qui se passe. En contrepartie, une mauvaise organisation de l’information dans ces fenêtres peut amener l’usager à faire des erreurs qui sont directement proportionnelles au nombre de champs à saisir ou à modifier. De plus, l’usager est limité puisque le dialogue avec l’ordinateur est contrôlé.
•
Figure 17b Le site Internet Les chiffres significatifs contient deux cadres : la table des matières à gauche et le contenu à droite. Les chiffres significatifs, CCDMD, 2000.
Figure 17a Exemple de cadres tiré du site Internet Cubix. Il y a trois cadres : la barre des menus, le texte et l’image. Cubix, CCDMD, 2004.
1�www.ccdmd.qc.ca
Recommandations :
Selon la tâche, ne présenter, dans la fenêtre, que les informations utiles à cette tâche. En fonction de la tâche, les informations peuvent varier. Il ne sert à rien de mettre toutes les informations à propos de toutes les tâches dans une seule fenêtre.
Faire en sorte que les informations soient localisées dans l’ordre d’utilisation. Habituellement, les informations sont placées dans le sens de la lecture, de gauche à droite et du haut vers le bas.
Réduire les déplacements de la souris en regroupant les informations et les commandes en fonction de leur sens (figure 18).
Généralement, les commandes de fermeture de la fenêtre sont localisées en haut, du côté gauche pour Mac OS X et du côté droit pour Windows (figures 19a et 19b).
Mettre en évidence les éléments importants par l’usage de caractères gras, de soulignés, de couleurs contrastantes ou d’encadrés. Les informations de nature analogue sont regroupées dans une même région; l’information importante doit toujours se voir au premier coup d’œil.
Utiliser des titres courts et sans ambiguïté pour identifier les fenêtres. Chacune doit posséder un nom qui lui est propre et qui est significatif. L’identification des fenêtres est d’autant plus importante lorsqu’on utilise le multifenêtrage (figure 20).
•
•
•
•
•
•
Figure 18 Organisation des informations selon leur sens et la tâche à accomplir. 1000 images sur le bout de la langue, CCDMD, 2005.
Figures 19a et 19b Commandes usuelles de fermeture des fenêtres sous Mac OS X et sous Windows XP.
Figure 20 Exemple de multifenêtrage. Chaque fenêtre
possède un nom qui lui est spécifique. La recherche et les sciences humaines, le cours,
CCDMD, 2007.
1�www.ccdmd.qc.ca
Minimiser les saisies au clavier en évitant que l’usager ait à trop écrire dans un champ de texte. Il ne devrait avoir à écrire que quelques caractères. Au mieux, il n’aurait que des choix à faire à l’aide de boutons radio, de listes ou de cases à cocher. Ne pas oublier que les probabilités d’erreurs augmentent dès que l’usager a l’occasion de saisir du texte (figure 21).
Occuper l’écran de manière optimale sans l’encombrer ou le surcharger. Une surcharge visuelle apporte une baisse d’efficacité (figure 22).
Utiliser des onglets dans une fenêtre est une façon ingénieuse de dégager une fenêtre surchargée. De grandes fenêtres dégagées et aérées sont agréables à lire (figure 23).
Favoriser un accès rapide et direct aux utilisateurs expérimentés en offrant la possibilité de naviguer dans la fenêtre à partir de raccourcis-clavier.
Fournir une aide contextuelle si la fenêtre et les informations qui s’y trouvent sont complexes – ce qui n’est pas souhaitable, mais parfois nécessaire.
•
•
•
•
•
Figure 21 Exemple dans lequel l’usager doit obligatoirement inscrire son nom et son mot de passe pour accéder au site Internet. Traitement des requêtes d’analyse biomédicales, CCDMD, 2007.
Figure 22 Exemple d’une page chargée, mais aérée et lisible. Traitement des requêtes d’analyse biomédicales, CCDMD, 2007.
Figure 23 Utilisation des onglets pour un meilleur regroupement des
fonctions associées à une même tâche. NetQuiz Pro, CCDMD, 2006.
1�www.ccdmd.qc.ca
Les boutonsLes boutons servent à déclencher des commandes ou des actions par un simple clic de la souris. Habituellement, ils possèdent deux états : grisés ou pâles lorsqu’ils sont inactifs, ou colorés et lumineux lorsqu’ils sont actifs. Il arrive que certains boutons aient un troisième état, un aspect similaire à la surbrillance à la suite d’un effet de survol de la souris. Dans la mesure du possible, les boutons doivent réagir lorsqu’ils sont sollicités. Quand le curseur de la souris se déplace au-dessus du bouton (effet de survol), celui-ci peut changer de couleur ou de teinte. Lorsqu’il y a un clic de la souris, il peut aussi changer de tonalité ou de couleur. Un bouton de commande doit toujours avoir un nom et correspondre à une fonction précise. Il est généralement admis que le nom d’un bouton est un verbe à l’infinitif.
Les composants de sélectionLes composants de sélection permettent à l’usager de faire des choix. Il y a plusieurs façons de les faire :
Les cases à cocher permettent de faire plus d’un choix. Habituellement, un X se met en place dans la case lorsque celle-ci est cochée. Toutefois, l’espace occupé par les cases et leur libellé est considérable. La case à cocher prend peu d’espace, mais le libellé peut en occuper beaucoup. D’où la nécessité d’être concis dans la rédaction des libellés (figure 24).
Les boutons radio ne permettent de faire qu’un seul choix parmi un ensemble de possibilités. De la même façon que les cases à cocher, les boutons radio et leurs libellés occupent un espace considérable (figure 25).
•
•
. Maintient Visibilité Commandes Place réduite Utilisateur l’attention sur la constante fréquentes débutant zone de travail
Bouton.. . X. X. X. X.
Menu.contextuel. X. . X. X. . .
Menu.déroulant. . . . X. X
Figure 25 Exemple de boutons radio. Qualilait, CCDMD, 2004.
Figure 24 Exemple de cases à cocher. Qualilait, CCDMD, 2004.
Ce tableau démontre les avantages des boutons ou des menus selon l’utilisation ou l’utilisateur.
1�www.ccdmd.qc.ca
Les listes de sélection énumèrent tous les choix possibles pour l’usager. Le contenu des listes n’est apparent que si l’on clique sur un des items visibles de la liste. Le choix de l’usager se fait par un clic du curseur sur l’item désiré. Selon la quantité d’items, il peut arriver qu’une barre de défilement verticale soit requise si l’espace disponible est trop petit. Cette façon de faire permet généralement d’effectuer un seul choix (figure 26).
Les champs de saisieLes champs de saisie sont des espaces dans lesquels l’utilisateur peut inscrire, à l’aide du clavier, des données alphanumériques. Par exemple, au moment de l’inscription dans un logiciel, il peut être nécessaire d’inscrire son nom et son prénom. Il en va de même lorsqu’on désire inscrire certaines données telles que le pourcentage de réduction d’une image ou la grosseur d’un caractère autre que ceux proposés par le logiciel – du 20 points, par exemple.
Quelques recommandations pour utiliser efficacement les champs de saisie :
Chaque champ de saisie doit être précédé d’un libellé, lequel doit être le plus près possible du champ afin d’éviter la confusion. Le libellé spécifie le nom du champ et, indirectement, le type de données qui peuvent être inscrites dans ce champ. Visuellement, il est important que l’usager puisse, du premier coup d’œil, associer le
•
•
. Jusqu’à Jusqu’à Plus de Place réduite Les choix �-� choix 10-1� choix 1� choix peuvent changer
Bouton.radio. X.
Case.à.cocher. X. X. . . .
Liste.de.sélection. . X. X. X. X
Figure 27 Exemple de champs de saisie. NetQuiz
Pro, CCDMD, 2007.
Ce tableau démontre les conditions d’utilisation des composants de sélection.
Figure 26 Exemple de listes de sélections. Minérocguide, CCDMD, 2003.
1�www.ccdmd.qc.ca
libellé au champ approprié. Les erreurs de saisie sont, de cette façon, minimisées. Au besoin, afin de faciliter la lecture et de minimiser les déplacements de l’œil, utiliser les abréviations (figure 27).
Exceptionnellement, il peut être souhaitable de proposer des valeurs par défaut qui, au besoin, peuvent être remplacées par de nouvelles valeurs.
Un « historique » de saisie peut aussi être utile si l’usager doit saisir fréquemment certaines données. Évidemment, si des valeurs par défaut ou un « historique » sont proposés, l’implantation d’une barre déroulante sera nécessaire. Toutefois, malgré l’implantation d’une barre de défilement, l’usager doit toujours avoir la possibilité de faire une saisie manuelle de ses données.
Les menusLe rôle des menus est de présenter, de façon groupée, un ensemble de commandes ou de fonctions.
Les menus offrent plusieurs avantages :
Ils présentent sur un même niveau (parfois avec des sous-niveaux) l’ensemble des commandes disponibles à un moment donné (figure 28).
Les commandes qui ne sont pas autorisées sont inactives ou sont grisées, ou les deux, dans le menu. L’usager peut les voir, mais il ne peut les activer, ce qui a souvent pour effet de susciter la curiosité de les faire fonctionner.
Le contenu et la position des commandes sont faciles à mémoriser pour l’usager. Une carte mentale des menus se construit tranquillement au fur et à mesure que le logiciel est utilisé.
Les risques d’erreurs sont minimisés puisqu’il n’y a qu’une sélection de la souris à effectuer pour activer une commande de menu.
•
•
•
•
•
•
Figure 28 Exemple d’un menu avec plusieurs sous-niveaux. Ceci est un cas extrême qu’il est préférable d’éviter. Word, Microsoft Corporation.
�0www.ccdmd.qc.ca
Les menus déroulants
Les menus déroulants sont activés par leur en-tête dans la barre des menus du logiciel. Ils ont l’avantage d’être toujours accessibles à partir de la barre des menus située dans le haut de l’écran. Puisqu’ils sont toujours visibles, ils sont facilement mémorisables. Il est aisé de les parcourir et d’y retrouver les commandes en les faisant dérouler les uns à la suite des autres. Ce sont souvent les menus et leurs contenus qui permettent d’avoir un très bon aperçu des différentes fonctionnalités d’un logiciel. Toutefois, ces menus ne sont pas toujours les plus rapides et se révèlent parfois encombrants. Ils masquent une partie de l’écran lorsqu’ils sont ouverts, les choix sont limités et la quantité de commandes qu’ils peuvent contenir est aussi limitée. Les menus déroulants sont simples à utiliser et faciles à comprendre. L’ajout de raccourcis-clavier (touches de fonctions) est utile pour les commandes les plus fréquentes et les utilisateurs expérimentés (figure 29).
Recommandations pour l’implantation des menus déroulants :
Limiter le nombre d’items au menu (7 +/- 2)
Au besoin, ajouter un sous-menu.
Organiser les menus selon leur importance d’utilisation. Les commandes les plus fréquentes sont disposées en haut du menu et les autres suivent par ordre décroissant d’importance.
Il est utile de regrouper et de séparer visuellement les items d’un menu qui ont des fonctions de même nature. Habituellement, ces commandes sont précédées et suivies d’une ligne qui fait office de séparateur visuel.
Lorsqu’il y a plusieurs choix possibles pour un même item, il est utile d’offrir une sélection par défaut (figure 30).
•
•
•
•
•
Figure 30 Un choix par défaut est déjà proposé à l’item Périodicité. Il est possible d’effectuer un autre choix en activant le menu déroulant. Musculation, CCDMD, 2006.
Figure 29 Exemple d’un menu simple et de ses raccourcis-clavier. NetQuiz Pro, CCDMD, 2007.
�1www.ccdmd.qc.ca
Les menus contextuels
Les menus contextuels, menus locaux ou « pop up menus » sont directement associés à l’objet sélectionné. Par une combinaison de touches (Control sous Mac OS) associées aux clics de la souris ou par l’utilisation des boutons de sélection directe de la souris (habituellement le bouton droit sous Windows), les menus contextuels vont apparaître à l’écran à l’endroit du clic, sous le pointeur de la souris. Selon l’objet qui est sous le pointeur au moment du clic, un menu contextuel spécifique à l’objet apparaîtra. De cette façon, l’utilisateur agit directement sur l’objet sélectionné (figure 31).
Recommandations pour l’implantation des menus contextuels :
Les.menus.contextuels.sont.pratiques.pour.les.usagers.expérimentés.puisqu’ils.minimisent.les.déplacements.inutiles..de.la.souris.lorsqu’ils.désirent.accéder.rapidement.à.une.fonction.spécifique.
Ils.permettent.d’économiser.de.l’espace.dans.un.écran.chargé..
Ils.ne.sont.pas.recommandés.pour.les.commandes.occasionnelles..
Pour.les.nouveaux.utilisateurs,.les.menus.contextuels.ne.sont.pas.facilement.repérables.(à.moins.qu’un.indicateur.visuel.ne.le.fasse).à.l’écran.
Il.faut.prévoir.une.solution.de.rechange.pour.un.nouvel.utilisateur.–.par.exemple,.les.menus.déroulants.en.guise..de.substitut.
•
•
•
•
•
Figure 31 Exemple de menu contextuel dans Microsoft
Word. Ce menu est obtenu en enfonçant le bouton droit de
la souris (Windows) ou la touche Control suivie d’un
clic dans la page (Mac OS).
��www.ccdmd.qc.ca
Les infobulles
Les infobulles apparaissent afin de préciser le nom ou l’usage d’une fonction dans les logiciels complexes. Par exemple, dans certains logiciels où l’usage d’icônes est courant, il convient de faire apparaître une infobulle pour préciser la fonction de l’icône. Les infobulles font partie du système d’aide contextuelle, lequel, selon la demande de l’utilisateur, affiche de l’information spécifique. Les infobulles, la plupart du temps, apparaissent à la suite d’un effet de survol déclenché par le passage du pointeur de la souris suivi d’une courte pause sur un composant des fenêtres ou du contenu de celles-ci (figure 32a et 32b).
Les touches de fonction (F1 à F1�)Les touches de fonction, accessibles au clavier, permettent d’activer certaines commandes rapidement. Elles sont habituellement situées sur la rangée supérieure du clavier.
Figure 32a Exemple d’infobulles tiré de
l’interface du logiciel La recherche et les sciences
humaines, le cours, CCDMD, 2007
Figure 32b Exemple d’infobulle tiré du logiciel Interprète, CCMD, 2007.
��www.ccdmd.qc.ca
La souris (le pointeur)La souris est un des principaux outils de dialogue dans une interface à manipulation directe. Malgré le besoin d’un léger apprentissage de coordination entre la vue et la main, cet outil est actuellement celui qui offre le meilleur contrôle. Toutefois, il est important d’avoir une certaine homogénéité dans l’utilisation des boutons de la souris et le rôle de ceux-ci doit être constant.
Il arrive régulièrement que les boutons de la souris soient enfoncés par erreur. Il est donc souhaitable que le déclenchement des actions par la souris ne soit pas irréversible, surtout si ce sont des commandes de destruction.
Lorsque nécessaire, il est utile que le pointeur de la souris affiche, sans que l’on clique sur un bouton, des informations du genre « infobulle ». Les infobulles apparaissent après un petit délai de quelques secondes.
L’utilisation du clic et du double-clic
La séquence d’action pointer et cliquer permet de sélectionner ou d’activer un objet situé sous le pointeur. Le simple clic permet aussi d’activer un bouton, de cocher une case ou d’effectuer des sélections multiples (avec la touche majuscule enfoncée). Le simple clic est une particularité des environnements graphiques.
Le double clic est d’usage lorsque la souris utilisée ne possède qu’un seul bouton (sur Macintosh, par exemple). Le double-clic reste dans la lignée du simple clic. Il permet de combiner deux actions sur un même objet : sélectionner-ouvrir.
Le pointeur de la souris peut avoir plusieurs états. Selon les logiciels, les symboles peuvent varier beaucoup. En voici quelques-uns:
Dans.une.zone.inactive.de.l’écran,.il.prend.la.forme.d’une.petite.flèche.
Dans.un.texte,.il.prend.la.forme.d’une.barre.d’insertion.
Sur.un.hyperlien,.il.prend.la.forme.d’un.doigt.qui.pointe.
Pour.agrandir.ou.réduire.la.vue.d’une.image,.il.prend.la.forme.d’une.loupe.
•
•
•
•
��www.ccdmd.qc.ca
Le temps de réponseLe temps de réponse est le moment d’attente que l’utilisateur subit lorsqu’une commande est lancée ou appelée. Il y a deux types de temps de réponse.
Le temps de réponse global est celui qui est requis par l’utilisateur pour réaliser une tâche complète. Il correspond, pour l’utilisateur, à l’addition du temps de réponse du système, au temps d’affichage, au temps de lecture, de compréhension et d’analyse des messages, au temps de décision des actions à mettre en œuvre, et finalement, au temps perdu à cause des erreurs. Plus le temps requis pour chacune de ces opérations est réduit, plus grande sera la satisfaction de l’utilisateur. L’utilisateur s’adapte au temps de réponse global à condition que celui-ci soit constant.
Le temps de réponse local est celui qui est requis par une application à la suite de l’exécution d’une commande qui nécessite beaucoup de calculs ou de recherches. Habituellement, le temps de réponse local est un mal nécessaire auquel l’utilisateur doit faire face. Toutefois, il est important de ne pas laisser l’utilisateur dans le doute.
Si le temps que requiert la commande est de deux à six secondes, il est suggéré de faire apparaître un indicateur visuel qui informe l’utilisateur qu’une opération est en cours. Les symboles couramment utilisés sont un sablier, une petite montre ou une horloge.
Lorsqu’une opération excède une durée de six secondes, il est souhaitable de faire apparaître une fenêtre qui informe sur le statut de l’action en cours de même que sa durée. Par exemple, dans une opération de copie, la fenêtre de la figure 33 indique visuellement l’état de l’opération en cours. Il est important que l’utilisateur puisse interrompre à tout moment une opération qui nécessite un certain temps (figure 33).
L’interface souhaitable
L’écran
L’écran est le principal média qui établit une communication humain-machine. Puisque cette interface de communication est essentiellement visuelle, il y a certaines règles à suivre concernant la conception et la disposition des éléments qui la composent. Selon leurs dispositions, certaines données peuvent être mises en évidence au détriment des autres. Aussi, la qualité de cet agencement favorisera les déplacements de souris plus « instinctifs » , plus près des perceptions humaines.
Il est toujours souhaitable de développer un logiciel ou un site Internet en supposant que les usagers possèdent le dernier cri en matière d’équipement informatique.
•
•
Figure 33 Exemple d’une fenêtre indiquant qu’une opération de copie est en cours et que ça va prendre
du temps…! Mac OS X, Apple Computer.
��www.ccdmd.qc.ca
L’agencement de l’écran et disposition des éléments
La plupart des utilisateurs ont recours à deux stratégies de lecture à l’écran.
La lecture dite en Z consiste à effectuer un balayage de l’écran qui débute au coin supérieur gauche et se dirige vers le coin supérieur droit. L’œil glisse ensuite vers le coin inférieur gauche, en passant par le centre de l’écran, pour ensuite glisser vers le coin inférieur droit. Cette stratégie d’exploration de l’écran se fait lorsque l’utilisateur découvre un nouveau logiciel ou un nouveau site Internet (figure 34).
La lecture ponctuelle est une stratégie de balayage de l’écran qui permet à l’utilisateur d’effectuer une recherche visuelle précise d’éléments qu’il connaît ou du moins dont il suppose connaître l’emplacement. Ce mode de recherche est propre aux utilisateurs d’expérience. Au cours des dernières années, la plupart des concepteurs de logiciels ou de sites Internet ont eu tendancet à « uniformiser » l’emplacement des composants de l’écran de travail. La barre de menu est en haut de l’écran, la table des matières est à gauche de la page ou en haut (exceptionnellement en bas, jamais à droite), etc. (figure 35a et 35b).
La cohérence est un des facteurs clés d’une interface réussie. Pour organiser les éléments qui composent un écran, on doit prendre en considération leur visibilité, leur emplacement à l’écran et la cohérence de leur organisation.
On peut diviser la surface de l’écran en quelques zones distinctes, de façon à définir une grille de conception qui sera le gabarit visuel d’une application ou d’un site Internet. Certaines zones sont sujettes à beaucoup d’interactions – par exemple, la barre des menus. Ainsi, le sens de la lecture chez les Occidentaux est de la gauche vers la droite; il est donc souhaitable de placer à gauche, dans la zone de la barre des menus, les informations importantes et, en ordre de moindre importance, les autres fonctionnalités vers la droite. Il en va de même pour une palette d’outils dans laquelle ceux qui sont le plus fréquemment utilisés sont situés dans le haut de la palette tandis que ceux qui le sont moins se retrouvent au bas. Lorsque bien fait, le gabarit permet à l’utilisateur de se retrouver facilement avec une interface homogène et cohérente dans tout le logiciel ou le site.
•
•
Figure 34 Cette illustration démontre le tracé de l’œil lorsqu’il
fait la lecture d’un écran.
Peu visiblePeu accessible
Très visibleAccessible
VisiblePeu accessible
VisibleTrès accessible
Très visibleTrès accessible
Très visibleTrès accessible
Peu visiblePeu accessible
Peu visiblePeu accessible
VisiblePeu accessible
Zone de commandes
Zone de commandes ou de messages optionnelle
Zonede sélectionetde changement
Zone principale de travail
Figure 35b Grille suggérée d’implantation des différentes zones de fonctionnalités.
Figure 35a Grille de visibilité et d’accessibilité générale.
��www.ccdmd.qc.ca
Le graphisme
Il faut toujours tenir compte du fait que la première impression graphique que donnera le site est très importante. Le graphisme d’un logiciel ne doit pas relever uniquement de critères esthétiques, mais aussi de critères d’efficacité et de fonctionnement. Une interface esthétique et non fonctionnelle ne sert strictement à rien… sauf à être belle!
Les couleurs
L’œil perçoit les couleurs d’une façon particulière. À cause de sa conception (cônes et bâtonnets ainsi que leur disposition sur la rétine), la structure physique de la rétine permet d’établir deux règles simples.
Il est préférable d’éviter le bleu saturé pour la lecture du texte ou de petits objets.
La couleur bleue est particulièrement efficace pour les encadrements.
L’œil est aussi plus sensible à certaines couleurs que d’autres. La couleur composée d’un mélange de jaune et de vert est une de celles à laquelle l’œil est très sensible de jour. En contrepartie, la nuit, l’œil est presque insensible à la couleur rouge et tout ce qui tend vers le bleu ou le violet devient plus visible.
Recommandations
Utiliser des couleurs très contrastées pour exprimer une différence. Pour augmenter le contraste, il est possible d’utiliser des couleurs complémentaires. Par exemple, le rouge et le cyan sont des couleurs qui « vibrent » lorsqu’elles se jouxtent, ce qui crée un effet très désagréable.
Le choix de couleurs peu contrastées renvoie à une certaine similarité des éléments.
Éviter le bleu pour le texte et les petits objets.
•
•
•
•
•
En règle générale, l’usage des couleurs a pour fonction :
de.mettre.en.évidence.l’information.importante;
d’indiquer.un.état.propre.à.un.objet.dans.un.contexte.donné;
de.regrouper.visuellement.des.informations.de.même.nature.qui.ne.sont.pas.contiguës.
Toutefois, afin d’éviter la surutilisation de la couleur, il faut :
limiter.le.nombre.de.couleurs.significatives.à.environ.sept.couleurs.et.teintes.différentes;
respecter.la.signification.des.couleurs.selon.les.clientèles.visées.
•
•
•
•
•
��www.ccdmd.qc.ca
Éviter les fonds de couleur verts et marron puisqu’il sera difficile de trouver une couleur qui permettra de lire facilement un texte.
Éviter l’agressivité des grandes surfaces de couleurs vives. Utiliser plutôt des couleurs peu saturées ayant une dominante vers le gris neutre et clair. Le gris est une couleur achromatique et contient toutes les couleurs. Les fonds gris sont les plus performants en termes d’ergonomie d’interface. Toutefois, ils sont souvent jugés ternes et neutres.
Par opposition, utiliser des couleurs vives pour les petits objets afin qu’ils se distinguent plus facilement d’une grande surface neutre.
Pour démontrer une différence, utilisez des couleurs contrastées. À l’inverse, pour démontrer des ressemblances, utilisez des couleurs peu contrastées et de même tonalité.
L’utilisateur doit être en mesure de distinguer et de nommer facilement les couleurs qui sont à l’écran. S’il s’agit de teintes d’une même couleur et que l’utilisateur rencontre des difficultés pour les discerner et les nommer distinctement, il perdra beaucoup de temps à comprendre leur signification. Cela aura pour effet d’accroître la confusion dans la compréhension du logiciel ou du site.
Toujours faire des tests auprès de différents utilisateurs afin de valider le choix et la pertinence de couleurs (figure 36).
•
•
•
•
•
Figure 36 Page de travail du logiciel L’histoire dans tous ses
états, CCDMD, 2005. Graphisme sobre et efficace. L’essentiel de
l’information est accessible au premier clic de la souris.
��www.ccdmd.qc.ca
Les polices de caractèresLe choix des polices de caractères est important dans le design d’une interface, mais il l’est beaucoup moins que celui d’une couleur. Toutefois, la famille, le corps, la chasse et la graisse d’une police de caractères ont un lien direct avec la lisibilité du texte.
La lecture de texte sur écran se révèle vite désagréable. Des lignes de 60 à 90 caractères au maximum semblent être un bon compromis, surtout lorsqu’on sait que la tendance est aux définitions d’écran de 1024 x 768 pixels et plus.
Il y a des centaines de familles de caractères, dont certaines très anciennes. Au fil des époques, les familles ont été classifiées selon leur dessin spécifique. Sans entrer dans les détails, retenons simplement les caractéristiques suivantes (figure 38).
En typographie, les empattements (sérifs) sont les petites extensions qui forment la terminaison des lettres dans certaines familles de caractères.
Une police de caractères sans empattements est aussi désignée sous le nom de « caractères bâton ». Helvetica, Arial, Geneva et Verdana en sont des exemples. Les polices de caractères sans empattements facilitent la lecture des éléments textuels isolés tels que les menus, les libellés des messages ou des champs de saisie.
Les polices de caractères avec empattements sont plutôt employées dans le corps d’un texte. Le dessin de ces polices crée une ligne virtuelle horizontale qui facilite la lecture de longs textes. Times, Monaco, Garamond en sont quelques exemples.
Il est important de savoir que les polices de caractères avec empattements sont plus lisibles sur une feuille de papier, alors que les polices de caractères sans empattements sont plus agréables à lire sur un écran d’ordinateur.
« Capitales » et « bas de casse » sont les termes employés pour indiquer les caractères en majuscule ou en minuscule. Habituellement, un texte courant est rédigé en bas de casse puisque c’est celui-ci qui se lit le plus facilement à cause d’une plus grande différenciation du dessin des lettres. Par exemple, les lettres b et le h se distinguent facilement du p ou du q. De plus, la lecture est facilitée par une plus grande homogénéité du texte. Il est recommandé d’utiliser la majuscule et la minuscule (capitale et bas de casse) dans les textes afin d’augmenter la rapidité de lecture. Les textes en minuscules facilitent la lecture des paragraphes tandis que les textes en majuscules facilitent la recherche de mots.
Un texte en majuscules est plus difficile à lire et requiert plus de temps. Toutefois, l’utilisation des majuscules est un excellent moyen de mettre en évidence, autrement que par la couleur, un
•
•
•
•
•
•
Figure 38 Exemple de polices de caractères avec empattements (sérifs), à gauche, et sans empattements, à droite.
��www.ccdmd.qc.ca
titre, certains mots ou certains énoncés. Les caractères en majuscule sont massifs, imposants et statiques, caractéristiques recherchées pour un titre.
La graisse d’un caractère correspond à l’épaisseur du trait de la lettre. Selon les familles de caractères, il peut y avoir plusieurs graisses, que ce soit du gras, demi-gras, maigre, etc. Si une famille de caractères ne possède pas de graisse spécifiquement dessinée, il est possible de la créer artificiellement par l’utilisation du Gras dans les logiciels. Toutefois, les graisses artificielles sont moins équilibrées que celles qui sont dessinées pour chaque famille de caractères. Habituellement, les changements de graisse d’un caractère dans un texte servent à attirer l’attention du lecteur, à hiérarchiser l’information ou à mettre en évidence un mot ou une partie de texte (figure 39).
La plupart des textes sont rédigés en utilisant la forme romaine. La forme italique, moins fréquente, se distingue du romain par l’inclinaison des caractères. L’italique est surtout utilisé pour détacher certaines phrases d’un texte courant (légende, citations, mots en langue étrangère, titre d’ouvrage, expressions à « double sens », etc.). Au même titre que la graisse, il est possible de forcer artificiellement « l’italisation d’un texte » si la famille n’en contient pas (figure 40).
Il est souhaitable de limiter le nombre de polices de caractères différents pour une même application ou un même site Internet. Une grande quantité de caractères différents rend l’écran confus.
Au même titre que l’utilisation des couleurs, il est primordial d’associer une signification à chacune des polices de caractères utilisées. Par exemple, les menus et sous-menus peuvent utiliser une même police de caractères tandis que le texte courant de l’application peut en utiliser un autre.
Toujours utiliser des caractères foncés sur fond clair pour garantir un contraste optimal, qui augmente la lisibilité.
•
•
•
•
•
Figure 40 Utilisation de la forme italique du texte afin d’indiquer l’usage d’une langue étrangère. Plantes d’ornements
au Québec : problèmes et solutions, CCDMD, 2005.
Figure 39 Le gras est utilisé ici pour la hiérarchisation et la mise en évidence des titres de section.Section Aide du logiciel TRAB, CCDMD, 2006.
�0www.ccdmd.qc.ca
Éviter les lignes de texte trop courtes. Sinon, l’œil doit constamment se déplacer de gauche à droite pour reprendre à la ligne suivante. Des textes rédigés sur des longues lignes minimisent la fatigue visuelle. L’utilisation de 50 à 55 caractères par ligne est souhaitable, à moins de rédiger le texte sur deux colonnes; à ce moment, une largeur de 30 à 35 caractères par colonne est de mise.
Finalement, évitez de surcharger l’écran; une mise en page dégagée et aérée du texte permet à l’œil de se reposer, facilite la lecture et augmente l’attention de l’usager.
Les icônesLes icônes sont des graphiques, des symboles ou des dessins qui ont pour fonction d’imager et de représenter visuellement une fonction ou une commande de l’interface. Les icônes occupent moins de place qu’un texte et elles ne sont pas dépendantes de la langue et de la localisation géographique de l’utilisateur. Toutefois, leur signification peut parfois porter à confusion et, à la limite, elles peuvent nuire à la compréhension de l’application. L’usage des icônes ne doit pas nuire à la compréhension de l’interface. Elles doivent être suffisamment explicites et univoques pour ne pas être une source d’erreurs supplémentaires. L’usage des icônes est une lame à double tranchant, qui peut rendre une application agréable à utiliser ou carrément inutilisable (figure 41).
La conception et le dessin des icônes se font habituellement lorsque toutes les commandes et fonctionnalités de l’application sont identifiées. Ce faisant, on s’assure une certaine homogénéité. Lorsque l’application nécessite l’usage de plusieurs icônes, il est parfois souhaitable d’accompagner celles-ci d’un nom. Que ce nom soit visible soit en permanence, soit après un certain délai d’inactivité du pointeur de la souris, ou encore, par un effet de survol qui affiche une infobulle, il est important d’aménager le design de l’application en tenant compte de ces informations. Il est préférable d’avoir une icône avec une consigne plutôt qu’une icône sans consigne.
Selon une étude, il est souhaitable de maintenir le nombre d’icônes autour de 12, sinon la mémorisation devient difficile. Dernière remarque, il faut éviter de réinventer l’iconographie déjà consacrée par les applications les plus courantes (Maison, Imprimante, Info, Aide...).
La mise en évidenceLa mise en évidence est une technique qui vise à attirer l’attention de l’utilisateur sur certains objets. On y arrive de différentes façons : clignotement, graisse d’un texte, couleur, caractères plus gros ou en italique, surbrillance du texte, puces, etc. Il faut surtout ne pas en abuser, au risque de surcharger l’écran et de submerger l’utilisateur dans une mer d’informations inutiles.
Quelques recommandations :
L’exception est de mise.
Tout au plus cinq éléments mis en évidence par page.
Une seule façon de mettre en évidence les objets pour un même logiciel ou un même site.
La signification d’un objet ne doit pas être affectée par la mise en évidence.
•
•
•
•
•
•
Figure 41 Représentation
iconographiques de différentes fonctions de dessins. Artefact,
CCDMD, 2002.
�1www.ccdmd.qc.ca
Il y a plusieurs façons de mettre en évidence un objet ou une commande. Toutes n’ont pas la même signification ni la même valeur.
Le clignotement sert surtout à attirer l’attention de l’utilisateur. Il est plus efficace en périphérie du champ de vision. Le clignotement est un des bons moyens de mise en évidence, mais il peut aussi agresser. Son utilisation abusive peut nuire plus qu’autre chose. Il est donc important de l’utiliser avec parcimonie et seulement si c’est la seule façon de mettre en évidence. Son usage a tendance à être distrayant et peu utile.
L’inversion vidéo, le négatif ou la surbrillance sont d’autres façons de mettre en évidence, mais de manière beaucoup moins agressive. Ces méthodes sont surtout utilisées pour faire ressortir une chaîne de caractères d’un ensemble de caractères. Toutefois, ces façons de faire sont peu efficaces sur des fonds d’écran de couleur foncée et peuvent parfois amener une certaine confusion.
Les encadrements et la proximité sont deux méthodes de mise en évidence qui se complètent très bien. Par la proximité, on met en évidence les informations qui sont connexes et qui se complètent. En les encadrant, on augmente la mise en évidence en les isolant visuellement de l’ensemble des éléments qui composent l’écran. Ils deviennent importants (figure 42).
Les changements de police, de graisse, de taille et le soulignement d’un caractère ou d’une chaîne de caractères, peuvent remplir la même fonction de mise en évidence que l’inversion vidéo et ses dérivés. Toutefois, elles sont un peu moins efficaces pour attirer l’attention. Cette façon de modifier les caractères pour la mise en évidence est très nuancée et maintient la fluidité de la lecture. En contrepartie, il peut arriver qu’une information importante ne soit pas suffisamment distincte et passe inaperçue. Un bon design devrait permettre d’éviter ces erreurs
Les puces sont une autre façon de mettre en évidence qui permet de structurer visuellement un texte et de le rendre attrayant. Cette façon de faire a comme principal intérêt de ne pas surcharger l’écran.
La forme et la couleur sont une autre façon de mettre en évidence. Mais il faut être sensible aux codes culturels qui peuvent parfois être associés aux formes.
Le son est aussi une méthode de mise en évidence. C’est un moyen très efficace d’attirer l’attention, surtout quand l’utilisateur n’a pas toujours le regard sur l’écran. Toutefois, en classe, lorsque 30 ordinateurs émettent un signal sonore... cela peut être un élément de distraction plus que d’attention.
Évidemment, il faut éviter d’utiliser toutes ces techniques de mise en évidence sur une même page.
•
•
•
•
•
•
•
•
•
Figure 42 Inverse vidéo pour mettre en évidence un énoncé. Encadrement pour regrouper les informations de même nature.
1000 images sur le bout de la langue CCDMD, 2005.
��www.ccdmd.qc.ca
Le langageLe langage est un facteur déterminant qui conditionne l’utilisation d’un logiciel ou d’un site Internet ainsi que sa facilité d’usage. Il est souhaitable de recourir à la même langue et au même niveau de langage que ceux de l’utilisateur auquel on s’adresse. Le niveau de langage d’un logiciel pour enfant ne sera pas le même que celui d’un logiciel qui s’adresse à un adulte, de même qu’on ne trouvera pas des expressions incompréhensibles et un vocabulaire spécifique au domaine de la haute finance dans un logiciel qui vise des graphistes.
Il est important de n’utiliser qu’un seul libellé par commande et de s’assurer de la cohérence des libellés. Afin d’éviter toute confusion et ambiguïté, il est recommandé d’employer pour les libellés une syntaxe homogène et d’éviter les abréviations, à moins que ces dernières ne soient absolument nécessaires et qu’il n’y ait vraiment pas d’autres solutions.
Les messages permettent de communiquer avec l’utilisateur. Ils peuvent intervenir afin de lui expliquer un fonctionnement ou de le questionner afin de déterminer les actions à venir. Ils doivent être rédigés dans une langue claire et concise. Selon la nature du message, si plusieurs types de messages sont requis, il sera important de les distinguer visuellement les uns des autres. Par exemple, un message d’erreur ou un message de confirmation doivent ne pas avoir la même présentation visuelle. Il est important que la forme du message convienne à son contenu.
La venue de l’informatique nous a obligés à faire un usage efficace des mots. Il faut éviter les messages longs, verbeux et imprécis.
Parfois, il peut être pertinent d’utiliser la forme d’un message lorsqu’on désire centrer l’attention de l’utilisateur sur une information importante qui doit être lue. Afin de l’obliger à prendre connaissance du message, il est parfois nécessaire de recourir à une fenêtre modale et d’y rédiger le message.
En conclusionIl n’y a pas de recettes miracles pour concevoir et réaliser des ressources informatisées possédant une ergonomie exemplaire. Chaque nouveau produit demande une attention particulière, et ce, à toutes les étapes de la réalisation. Toutefois, l’intégration réussie des règles touchant l’ergonomie augmente nos chances de réaliser un produit convivial et efficace.
