Vous êtes ici : Les éléments de base > Les boites de dialogue

Choix du système :

• Tous
• Windows
• Linux

Les boites de dialogue

Les boites de dialogue sont des fenêtres particulières qui permettent de fournir des informations à l'utilisateur ou de saisir simplement des paramètres demandés par les logiciels.

Les boites d'information

En cas de problème informatique, le système d'exploitation ouvre une boite de dialogue donnant des informations sur le problème rencontré. Ce type de boite comprend une zone de message et en général un seul bouton sur lequel il faut cliquer pour fermer la boite. Si un problème est rencontré avec votre navigateur lorsque vous parcourez le web, celui-ci émet aussi un message dans une boite de dialogue de type « information ».

J'ai vu de nombreux utilisateurs fermer rapidement ces boites sans lire le message associé et s'étonner de ne pas comprendre le problème rencontré et bien sûr de ne pas pouvoir le résoudre...

Si les développeurs ont pris la peine d'avertir les utilisateurs en décrivant le problème rencontré, le minimum est de lire le message, voire de le noter (ou de faire une capture d'écran si c'est possible) et d'agir en conséquence : soit l'utilisateur doit effectuer une action particulière pour résoudre le problème, soit l'action n'est pas possible pour la raison qui est souvent décrite dans le message.

Les boites de dialogue

Les composants de base

L’illustration ci-contre montre une boite de dialogue comportant un certain nombre de composants que l'on rencontre couramment dans les boites de dialogues sur tous les systèmes d'exploitation.

Détaillons les composants de cette boite, situés sous la barre de titre qui comprend également le bouton de fermeture en forme de croix :

1. onglet de la boite qui peut en comporter plusieurs (un seul dans cet exemple) ;
2. liste de choix : dans ces listes un seul élément peut être sélectionné (PDFCreator dans cet exemple) alors que l'ensemble des éléments est visible ;
3. barre de défilement encore appelé ascenseur. Comme cette boite de dialogue n'est pas redimensionnable, pour voir tous les choix possibles, la zone 2 se déplace avec l'ascenseur ;
4. zone de messages : montre l'état du système pour l'impression sur l'exemple ;
5. case à cocher : une boite de dialogue peut contenir plusieurs cases à cocher (ici notées 5 et 10). Elles sont indépendantes les unes des autres. Elle est active lorsqu'elle est cochée, le libellé correspondant indique l'action qui sera effectuée ;
6. boutons radio : contrairement aux cases à cocher, les boutons radios forment un ensemble lié : un seul bouton de l'ensemble peut être actif à la fois ;
7. champ de saisie ou zone de texte : l'utilisateur peut entrer une donnée (un nombre dans cet exemple, mais ce peut être aussi un texte dans d'autres cas). Les caractères valides sont explicités sur le libellé sous le champ de saisie ;
8. boutons ouvrant d'autres boites de dialogue ;
9. zone de saisie combinée : il est possible d'entrer une valeur au clavier ou d'utiliser les boutons flèches pour incrémenter ou décrémenter la valeur du champ.
10. case à cocher (comme 5). Sur cet exemple la case est cochée, validant l'action d'assemblage des copies ;
11. boutons d'action de la boite de dialogue. Un clic sur le bouton Imprimer lancera l'impression alors qu'un clic sur le bouton Annuler fermera la boite de dialogue sans effectuer aucune action.

Les autres composants

Voici une liste non exhaustive des composants que l'on peut rencontrer dans une boite de dialogue.

Barre de progression

Elle apparaît souvent seule dans une fenêtre pour indiquer la progression d'une action ou d'un calcul, mais elle peut aussi être un élément d'une boite de dialogue parmi d'autres.

L'exemple ci-contre indique la progression de copie de fichiers d'un endroit à un autre (système d’exploitation Ubuntu version 16.04). Elle est associée ici à des boutons pour arrêter ou reprendre la copie, mais ce n'est pas toujours le cas. À la fin de l'action la boite disparaît sans intervention de l'utilisateur.

Potentiomètre

Encore appelés curseurs de défilement ou sliders en anglais, les potentiomètres permettent de modifier une valeur numérique en modifiant la position du curseur sur une échelle. L'échelle peut être graduée ou être accompagnée d'une boite indiquant la valeur de la position du curseur. Souvent un clic sur une partie de la glissière de la barre amène directement le curseur à cette position.

L'exemple ci-contre est issu de la boite de réglage du contraste et de la luminosité du logiciel éditeur d'images GIMP sous Ubuntu. Cette boite contient deux curseurs libellés Luminosité et Contraste en plus d'autres composants (liste déroulante, case à cocher et boutons).

Champ de mot de passe

C'est une zone de saisie de texte ou les caractères saisis sont masqués (sous Linux) ou transformés en caractères identiques, souvent des gros points (sous Windows et sur de nombreux sites web).

Sur certains champs de mot de passe un bouton sous forme d'un œil permet la visualisation en clair du mot de passe saisi. L'exemple ci-contre permet d'accéder à un site après avoir renseigné l'identifiant qui apparaît en clair et le mot de passe, dans le champ de type mot de passe ou password en anglais qui apparaît visuellement sous forme de points.

Vous pouvez remarquer sur la droite de ce champ un symbole représentant un œil barré : . En cliquant sur cet œil, le symbole se transforme en un œil ouvert et le mot de passe apparaît en clair.

Liste déroulante

L'illustration montre une partie d'une boite de dialogue représentant une liste déroulante ouverte.

Lorsque la liste est fermée, seul le champ contenant le texte Moyen est visible. Un clic sur le bouton flèche à droite de ce champ ouvre la liste et il est alors possible de choisir (on dit sélectionner) une valeur parmi celles présentées. Dès que le choix est effectué, la liste se referme, la valeur sélectionnée est placée dans le champ visible.

Il n'est pas possible d'entrer une valeur dans le champ visible à l'aide du clavier même si ce champ ressemble à un champ de saisie de texte.

L'exemple ci-contre est issu du logiciel GIMP sous Windows 7 pour les paramètres de l'outil Police.

Boite combinée

Encore appelée combobox ou combo-box en anglais, la boite combinée est l'association d'une zone de texte et d'une liste déroulante. Son fonctionnement est identique à celui d'une liste déroulante mais en plus il est possible de saisir une valeur directement dans le champ visible.

L'exemple ci-contre est issu du logiciel de création de machine virtuelle VirtualBox.  C'est une partie de la boite de dialogue de choix du dossier de la machine virtuelle. Un clic sur le bouton flèche ouvre la liste qui montre les choix possibles alors qu'un clic dans la zone de texte permet de saisir directement une valeur qui n'est pas obligatoirement dans la liste.

Zone de texte multiligne

Une zone de texte multiligne permet d'entrer du texte libre sur plusieurs lignes.

Ce type de zone est souvent utilisé dans les formulaires de contact des sites marchands pour que l'utilisateur puisse détailler sa demande.

Parfois le nombre de caractères pouvant être saisis est limité et dans ce cas un message avertit l'utilisateur. Cette zone peut aussi être munie d'un ascenseur vertical qui apparaît pour faire défiler le texte s'il dépasse la zone visible.

Il est possible d'agrandir la zone en positionnant la souris dans le coin bas à droite, signalé ici par des traits obliques (dans le cercle rouge) puis en maintenant le bouton gauche de la souris enfoncé tout en la déplaçant. Cette manœuvre est souvent appelée glisser-déplacer ou glisser-déposer ou encore drag-and-drop en anglais.