Ce document présente les principaux objets d'interaction disponibles dans les interfaces graphiques. Pour chacun d'entre eux, nous présentons son fonctionnement détaillé, les différents états que chaque objet peut prendre ainsi que des règles d'ergonomie applicables. Notons tout de suite deux points importants :
Les termes utilisés tout au long de ce document sont à la fois les termes français et les termes anglais : si notre volonté est de créer un site français, les documentations techniques sont souvent anglaises et l'utilisation de cette langue facilitera le lien avec le codage.
Synonymes : bouton, bouton poussoir, bouton de commande.
Un
bouton est composé :
Lors de l'appui sur le bouton, l'ombrage se modifie pour donner l'impression
que le bouton s'enfonce.
Le
rôle d'un bouton est de déclencher un traitement de la machine
comme par exemple une vérification des données, la mise en marche
d'un moteur, la notification d'un choix de l'utilisateur, etc. Dans le cas où
l'appui sur le bouton provoque une demande de renseignements
complémentaires à l'utilisateur, le libellé du bouton est
suivi de trois points de suspension.
La taille des boutons doit être constante pour un même
groupe.
Placer les boutons de façon homogène tout au long de votre
application, et le cas échéant de façon homogène
avec les autres applications.
Si un bouton concerne un objet spécifique, le placer à
côté de celui-ci.
Il ne faut pas utiliser l'aspect 3D des boutons poussoirs pour afficher un texte que l'on veut faire ressortir de la masse d'information existante sur l'écran : l'utilisateur serait alors dans l'incapacité de différencier un bouton d'un texte, et ne pourrait pas prédire l'action provoquée par l'appui sur le bouton.
voir Push Button.
voir Push Button.
voir Radio button.
voir Push Button.
Synonymes : boutons d'option.
Les
boutons radio sont des objets d'interaction qui ne peuvent exister qu'en
groupe. En effet, ils servent à faire un choix d'un
élément parmi n.
Comme le montre la figure précédente, le choix d'un bouton
radio déselectionne les autres boutons du même groupe. Un bouton
radio est composé :
* d'un symbole graphique susceptible d'être sélectionné ou
non,
* d'un libellé explicatif sur le choix offert.
L'un des boutons radios du groupe doit être sélectionné par
défaut. Cette règle doit être surveillée pour
l'initialisation puisqu'en principe, la boîte à outils la
gère à chaque clic utilisateur.
Les
boutons radios doivent être utilisés lorsqu'un choix exclusif doit
être fait entre 2 possibilités minimum, et 5 maximum.
Les boutons radios d'un même groupe doivent être visuellement
proches. À l'inverse, des boutons radios non liés doivent
être suffisamment éloignés.
Il est nécessaire de nommer le groupe de boutons radios afin d'en
préciser le rôle.
Il est préférable de positionner le libellé à
droite du symbole graphique.
Le
choix d'un bouton radio ne doit pas débuter un traitement, le traitement
doit être différé à la validation du formulaire.
Lorsqu'un choix réalisable par bouton radio présente un risque,
il ne faut pas interrompre l'utilisateur pour lui demander confirmation de son
choix. Il est préférable de lui demander confirmation au moment
de la validation du formulaire.
Voir Radio button.
Synonymes : case à cocher.
Les
cases à cocher permettent de faire n choix parmi un ensemble de m
possibilités.
Comme le montre la figure précédente, le choix d'une case
à cocher n'implique aucune modification des autres cases à
cocher. Une case à cocher est composée :
* d'un symbole graphique susceptible d'être sélectionné ou
non,
* d'un libellé explicatif sur le choix offert.
Les
cases à cocher d'un même groupe doivent être visuellement
proches. À l'inverse, des cases à cocher non liées doivent
être suffisamment éloignées.
Si plusieurs case à cocher sont liées, regroupez les dans une case
et nommer le cadre afin d'en préciser le rôle.
Il est préférable de positionner le libellé à
droite du symbole graphique.
Évitez d'utiliser les cases à cocher pour déclencher une
option importante (mise en position de sécurité d'un appareil,
sauvegarde d'un document, etc.).
Les cases à cocher doivent être utilisées lorsqu'un choix
doit être fait parmi un ensemble de 1 à 5 possibilités.
Les cases à cocher remplacent avantageusement les boutons radios sur des
choix binaires, comme le montre l'exemple suivant :
La selection
d'une case à cocher ne doit pas débuter un traitement, le
traitement doit être différé à la validation du
formulaire.
Lorsqu'un choix réalisable par case à cocher présente un
risque, il ne faut pas interrompre l'utilisateur pour lui demander confirmation
de son choix. Il est préférable de lui demander confirmation au
moment de la validation du formulaire.
Voir Checkbox.
voir Text.
Les
textes sont parmi les objets d'interaction les plus simples puisque
l'utilisateur ne peut que peu (ou pas) interagir avec eux. Cette interaction
est parfois possible (suivant le système d'interface utilisateur) par
exemple en permettant la sélection du texte pour le copier.
Les textes sont utilisés pour afficher de l'information non modifiable à l'utilisateur. Lorsque cette information n'est pas pertinente dans le contexte actuel, il est possible de la griser.
Donner
les informations dans la forme attendue par l'utilisateur (contre exemple :
erreur d'entrée de type 54), si le pays utilise le système
métrique ne pas afficher des pouces,
Lorsqu'un format standard existe, présenter les informations suivant ce
format. Si certaines informations manquent, afficher <information
absente> plutôt que de supprimer l'information (et ne plus suivre le
format).
Éviter les abréviations ou se limiter a celles standard si elles
sont connues par les utilisateurs.
Eviter la ponctuation dans les abréviations : USA est mieux que
U.S.A.
Pour les longs textes, prévoir une zone d'affichage de 50
caractères de large au minimum, avec une hauteur minimale de 4
lignes.
Les phrases affirmatives sont plus aisées à comprendre que les
phrases négatives : utilisez les de préférence (et
non pas : il est préférable de ne pas utiliser les phrases
négatives).
Certaines boîtes à outils permettent à l'utilisateur de sélectionner les libellés et les textes. Si vous désirez supprimer ce comportement, ne désactivez pas le texte : il deviendrait alors grisé (ou risque de le devenir lorsque vous porterez votre application sur la prochaine version de la boîte à outils). Le texte grisé perd énormément de sa lisibilité et ressemble à de l'information non pertinente, deux critères qui ne correspondent pas au texte que vous affichez.
voir Text.
