Notions de design de l interface utilisateur

Transcription

1 Notions de design de l interface utilisateur

2 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) Site Internet : 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 : Centre collégial de développement de matériel didactique

3 Introduction...4 L ergonomie et le dialogue humain-machine...4 La navigation...5 La manipulation directe...6 L interface humain-machine...7 L organisation du dialogue...8 Les fenêtres et leurs composants...9 L affichage des fenêtres et des cadres...13 Les fenêtres de dialogue ou boîtes de dialogue...14 Les boutons...17 Les composants de sélection...17 Les champs de saisie...18 Les menus...19 Les menus déroulants...20 Les menus contextuels...21 Les infobulles...22 Les touches de fonctions (F1 à F15) et raccourcis-clavier...22 La souris...23 L utilisation du clic et du double-clic...23 Le temps de réponse...24 L 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...26 Les polices de caractères...28 Les icônes...30 La mise en évidence...30 Le langage...32 En conclusion...32

4 Introduction Le 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-machine Plusieurs 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).

5 La navigation La 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). Figure 1 Arborescence typique d un logiciel. Ici, celle du logiciel Traitement des requêtes d analyse biomédicales, CCDMD, 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.

6 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 directe La 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.

7 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-machine Dans 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. 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 Figure 4 Interface virtuelle représentant un poste de travail. La piqûre de l injection, CCDMD, 2007.

8 L organisation du dialogue La 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). 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. 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). Figure 6 Voici un exemple de tracé du chemin parcouru dans un logiciel. Ici, le logiciel Interprète, CCDMD, 2005.

9 Les fenêtres et leurs composants La 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.

10 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). Figure 9 Exemple de déplacement d une fenêtre. NetQuiz Pro, CCDMD, 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. Figure10 Exemple d une fenêtre d outils ou palette d outils. Ici, la palette du logiciel Diagnostiqueur expert, CCDMD,

11 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, Figure 12 Exemple de fenêtres superposées. Au premier plan la fenêtre active. La recherche et les sciences humaines, le cours, CCDMD,

12 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, 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,

13 L affichage des fenêtres et des cadres L 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 à 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, 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 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

14 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). 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, 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, Les fenêtres de dialogue ou boîtes de dialogue Les 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é. 14

15 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). Figure 18 Organisation des informations selon leur sens et la tâche à accomplir images sur le bout de la langue, CCDMD, Figures 19a et 19b Commandes usuelles de fermeture des fenêtres sous Mac OS X et sous Windows XP. 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 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,

16 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). 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, Figure 22 Exemple d une page chargée, mais aérée et lisible. Traitement des requêtes d analyse biomédicales, CCDMD, 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 23 Utilisation des onglets pour un meilleur regroupement des fonctions associées à une même tâche. NetQuiz Pro, CCDMD,

17 Les boutons Les 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. 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 Ce tableau démontre les avantages des boutons ou des menus selon l utilisation ou l utilisateur. Les composants de sélection Les 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). Figure 24 Exemple de cases à cocher. Qualilait, CCDMD, Figure 25 Exemple de boutons radio. Qualilait, CCDMD,

18 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). Figure 26 Exemple de listes de sélections. Minérocguide, CCDMD, Jusqu à Jusqu à Plus de Place réduite Les choix -6 choix choix 12 choix peuvent changer Bouton radio X Case à cocher X X... Liste de sélection.. X X X X Ce tableau démontre les conditions d utilisation des composants de sélection. Les champs de saisie Les 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 Figure 27 Exemple de champs de saisie. NetQuiz Pro, CCDMD,

19 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 menus Le 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). 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. 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. 19

20 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. Figure 29 Exemple d un menu simple et de ses raccourcis-clavier. NetQuiz Pro, CCDMD, 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,