# Contrôles

## Utilisation efficace des contrôles

GNOME fournit un ensemble de contrôles, également connus sous le nom de « widgets », qui permet aux utilisateurs d'interagir avec vos applications. Utiliser ces contrôles de manière appropriée et ne pas modifier leur comportement standard est important. Cela permet aux utilisateurs de prévoir les effets de leurs actions et par conséquent d'apprendre à utiliser votre application plus rapidement et efficacement. Les contrôles ne se comportant pas de manière standard, en questionnant l'utilisateur sur la façon dont fonctionne votre application, cassent ses automatismes mentaux et diluent la signification du langage visuel de l'interface.

## Terminologie

Bien qu'ils soient connus sous le nom de « widgets » dans les API GNOME et la documentation des développeurs, n'utilisez pas ce terme dans l'interface ou la documentation utilisateur. Appelez-les par leur nom spécifique (par exemple, « boutons » ou « menus ») ou par le nom générique « contrôles ».

## Sensibilité

Parfois il n'y a pas de raison de permettre à l'utilisateur d'interagir avec un contrôle dans un contexte donné, par exemple appuyer sur le bouton Coller lorsque le presse-papier est vide. Dans ces cas-là, rendez le contrôle insensible pour minimiser le risque d'une erreur utilisateur. Lorsque le contrôle est insensible, il apparaît estompé et ne peut pas recevoir le focus, même si certaines technologies d'assistance comme les lecteurs d'écran sont quand même capables de les détecter et de les signaler.

Il est souvent préférable de rendre un contrôle insensible plutôt que de le masquer complètement. De cette façon l'utilisateur peut prendre connaissance de fonctionnalités qu'il utilisera peut-être plus tard même si elle n'est pas encore disponible.

### Deux cases à cocher : sensible (en haut) et insensible (en bas)

Screenshot showing the visual appearance of sensitive and insensitive check box controls

### Contrôles verrouillés

Dans un environnement où le réseau est administré, comme dans un laboratoire d'informatique, les administrateurs système souhaitent habituellement « verrouiller » les valeurs de certains paramètres, voire les supprimer complètement de l'interface utilisateur. Il leur est ainsi plus facile de résoudre tout problème que les utilisateurs pourraient rencontrer. Dans GNOME, la manière correcte de faire cela pour l'administrateur système est de restreindre l'accès en écriture aux clés GConf correspondant à ces réglages.

Lorsque vous concevez une application, prenez en considération les paramètres qu'un administrateur système pourrait vouloir rendre indisponibles aux utilisateurs. Cela comprend habituellement :

- les paramètres qui, mal configurés, empêcheraient l'application de fonctionner complètement. Par exemple, les paramètres du serveur mandataire pour une application réseau.

- les paramètres qui pourraient être référencés dans des ressources en réseau. Par exemple, le répertoire des modèles dans une application de bureautique dans lequel les fournitures de bureau partagées, telles que les feuilles d'en-tête de fax, peuvent être enregistrées.

- les paramètres qui personnalisent l'interface utilisateur, autres que ceux nécessaires pour l'accessibilité. Par exemple, certaines options de personnalisation de menu, clavier ou barre d'outils.

Votre application doit décider, chaque fois que ces contrôles sont affichés, s'ils sont ou ne sont pas disponibles pour modification selon l'état en écriture de la clé GConf qui contient leur valeur. Dans les cas les plus simples, votre code pour chaque contrôle pourrait ressembler à l'exemple ci-dessous.

#### Exemple de fragment de code montrant comment rendre insensible un contrôle GConf verrouillé

    if (!gconf_key_is_writable (http_proxy))
            gtk_widget_set_sensitive (http_proxy_field, FALSE);

Incorporez dans votre guide d'utilisateur, à l'adresse des administrateurs système, un chapitre expliquant quels paramètres peuvent être verrouillés et leurs clés GConf correspondantes.

Expliquez à l'utilisateur pourquoi ces contrôles ne peuvent pas être modifiés en ce moment. Vous pouvez le faire avec du texte statique, des infobulles ou de l'aide en ligne selon les cas. Par exemple :

#### Exemple de boîte de dialogue contenant des contrôles verrouillés

Screenshot showing disabled proxy controls in a web browser's property dialog, under the caption "Only the system administrator can change these settings"

Notez que, bien qu'ils ne puissent pas être modifiés, ces paramètres restent visibles et sélectionnables ; ils peuvent être copiés dans le presse-papier.

## Champs de saisie de texte

Les champs de saisie de texte sont utilisés pour saisir une ou plusieurs lignes de texte. Dans GTK 2, le contrôle GtkEntry est utilisé pour les entrées texte sur une seule ligne et GtkTextView pour les entrées texte sur plusieurs lignes.

### Champs de saisie mono ou multi-lignes

Screenshot of part of a dialog, containing both single and multi-line entry fields

### Conseils

- Étiquetez le champ de saisie avec un intitulé textuel placé au dessus ou à sa gauche en respectant les règles de mise en majuscule des phrases. Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur de donner le focus directement au champ de saisie.

- Justifiez à droite le contenu des champs de saisie qui ne sont utilisés que pour des entrées numériques, à moins que la convention de la langue locale ne requière autrement. Ceci est utile dans les fenêtres dans lesquelles l'utilisateur peut vouloir comparer deux valeurs numériques dans la même colonne de contrôles. Dans ce cas, assurez-vous que les bords de droite des contrôles concernés sont également alignés.

- Lorsque l'utilisateur donne le focus à un champ de saisie en utilisant le clavier, placez le curseur de texte à la fin du texte existant et mettez en surbrillance son contenu (mais n'écrasez pas la sélection existante du presse-papier PRINCIPAL). Cela facilite l'effacement de ce texte ou l'ajout d'un nouveau texte à la suite, qui sont les deux opérations les plus courantes effectuées sur les champs de saisie.

- Dimensionnez les champs de saisie texte d'après la longueur prévisible de l'entrée. Cela donne une information visuelle utile sur la quantité de données attendue et structure la boîte de dialogue en la rendant plus facile à parcourir. Ne donnez pas la même longueur à tous les champs juste pour faire que tout soit gentiment aligné.

- Dans une fenêtre Propriétés ou Préférences à application instantanée, validez le contenu d'un champ de saisie lorsqu'il perd le focus ou lorsque la fenêtre est fermée et non pas à chaque pression de touche. Exception : si le champ accepte seulement un nombre fixe de caractères, tel qu'un code de couleur hexadécimal, validez et appliquez le changement dès que le nombre de caractères a été saisi.

- Fournissez un texte statique comme exemple pour les boîtes de texte qui ont besoin d'une entrée dans un format particulier ou avec une unité de mesure particulière. Par exemple :

  ### Champ de saisie texte avec un texte statique comme exemple

  A text entry field in which the user must input a time, with the label "hh:mm" beside it to indicate the required format

- Lorsque c'est possible, mettez un contrôle supplémentaire ou alternatif qui restreint les valeurs d'entrée à la plage de validité. Par exemple, placez une zone de sélection numérique ou un un curseur dans une glissière si l'entrée requise se situe dans une plage fixe d'entiers ou donnez accès à un contrôle GtkCalendar si l'utilisateur doit saisir une date valide :

  ### Un champ de saisie texte dans lequel l'utilisateur doit saisir une date avec un bouton à son côté qui fait apparaître un contrôle GtkCalendar pour simplifier la tâche

  A text entry field in which the user must input a date, with a button labelled "Choose" beside it that opens a GtkCalendar control to simplify the task

  C'est moins sujet à erreur que de présupposer que l'utilisateur saisira son entrée texte dans un quelconque format donné. Vous pouvez néanmoins toujours fournir un contrôle champ de saisie pour les utilisateurs experts familiers du format exigé.

- Si vous mettez en place un champ de saisie qui n'accepte que certaines frappes de touche dans le contexte de la tâche, comme des nombres, émettez le signal d'avertissement du système lorsque l'utilisateur essaye de saisir un caractère non valide. Si l'utilisateur saisit trois caractères non valides consécutifs, affichez une alerte qui explique quelles sont les entrées valides pour ce champ de texte.

- Le clignotement du curseur et la durée de son cycle sont globalement définis par les paramètres X « gtk-cursor-blink » et « gtk-cursor-blink-time ». Les contrôles de boîte à outils standard utilisent ces paramètres qui ne doivent être modifié à aucun prix dans les applications. Tout nouveau contrôle avec des curseurs de texte se doit de respecter ces valeurs globales.

### Comportement de la touche Entrée

Normalement, l'appui sur la touche Entrée dans une boîte de dialogue doit activer le bouton par défaut de la boîte de dialogue, à moins que le contrôle qui possède le focus ne l'utilise pour son propre usage. Pour activer cette dernière propriété, vous devez paramétrer la propriété `activates-default` de la plupart des champs de saisie à VRAI (TRUE) (notez que GtkTextView ne possède pas un tel réglage — un appui sur Entrée insère toujours une nouvelle ligne).

Cependant si votre boîte de dialogue contient plusieurs champs de saisie habituellement remplis dans l'ordre, par exemple Nom, Adresse et Numéro de téléphone, songez à paramétrer la propriété `activates-default` de ces champs de saisie à FAUX (FALSE). Un appui sur Entrée déplacera alors le focus vers le contrôle suivant et empêchera l'utilisateur de fermer accidentellement la fenêtre avant d'avoir saisi toutes les informations voulues.

Comme sécurité supplémentaire, pensez à de ne pas définir de bouton par défaut dans une boîte de dialogue tant que le minimum requis d'informations n'a pas été saisi, par exemple, à la fois un nom d'utilisateur et un mot de passe dans une boîte de dialogue de connexion. Encore une fois, dans ce cas vous devez déplacer le focus vers le contrôle suivant lorsque l'utilisateur appuie sur Entrée plutôt que de l'ignorer.

Utilisez Ctrl Entrée en tant que raccourci clavier si vous voulez activer le bouton par défaut lorsqu'un contrôle GtkTextView possède le focus.

#### Note

Actuellement, Gtk ne déplace pas le focus vers le contrôle suivant quand la touche Entrée est pressée et que `activates-default` soit défini égal à FALSE (FAUX) ou qu'il n'y ait pas de bouton par défaut dans la fenêtre. Comme, pour l'instant, Entrée ne fait rien dans ces situations, souvenez-vous donc qu'il vous appartient de gérer le déplacement du focus par vous-même.

### Comportement de la touche Tab

Habituellement, l'appui sur la touche Tab dans un champ de saisie mono-ligne déplace le focus vers le contrôle suivant et, dans un champ de saisie multi-lignes, insére un caractère de tabulation. L'appui sur Ctrl Tab dans un champ de saisie multi-lignes déplace le focus vers le contrôle suivant.

Si vous avez besoin d'un raccourci clavier qui insère un caractère tabulation dans un champ de saisie mono-ligne, utilisez Ctrl Tab. Cependant, vous ne trouverez probablement pas beaucoup de situations où cela est utile.

## Zone de sélection numérique

Une zone de sélection numérique est une boîte texte acceptant une plage de valeurs. Elle contient deux boutons fléchés qui permettent d'augmenter ou de diminuer la valeur actuelle d'une quantité fixée.

### Exemple de zone de sélection numérique

A simple spin box used to specify the spacing between applets on a panel

### Conseils

- Utilisez les zones de sélection numérique uniquement pour des entrées numériques. Utilisez une liste ou un menu d'options lorsque vous avez besoin que l'utilisateur choisisse parmi un ensemble fixé de données d'un autre type.

- Utilisez une zone de sélection numérique si la connaissance de la valeur numérique est significative ou utile pour l'utilisateur et que la plage des entrées valides est illimitée ou fixée à une extrémité seulement. Par exemple, un contrôle pour définir le nombre d'itérations de certaines actions ou une valeur de délai. Si la plage est bornée aux deux extrémités ou que les valeurs numériques sont arbitraires (par exemple, un contrôle de volume), utilisez un contrôle avec un curseur dans une glissière à la place.

- Donnez un nom à la zone de sélection numérique à l'aide d'un texte au dessus ou à sa gauche en utilisant la règle de mise en majuscule des phrases. Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur de donner le focus directement à la zone de sélection numérique.

- Justifiez à droite le contenu des zones de sélection numérique à moins que la convention de la langue locale ne requière autrement. Ceci est utile dans les fenêtres dans lesquelles l'utilisateur peut vouloir comparer deux valeurs numériques dans la même colonne de contrôles. Dans ce cas, assurez-vous que les bords de droite des contrôles concernés sont également alignés.

## Glissières

Un curseur dans une glissière permet à l'utilisateur de choisir rapidement une valeur dans une plage fixée et ordonnée ou d'augmenter ou diminuer la valeur actuelle. Le contrôle ressemble au type de curseur que vous pouvez trouver sur une table de mixage audio ou un égaliseur graphique Hi-Fi. Avec gtk, vous implémentez un curseur dans une glissière en utilisant les contrôles GtkHScale ou GtkVScale pour les glissières horizontales ou verticales respectivement.

### Un simple contrôle à glissière

A slider control used to change the stereo audio balance between left and right speakers

### Conseils

- Utilisez un curseur dans une glissière lorsque :

  - l'ajustement de la valeur par rapport à sa valeur actuelle est plus important que de choisir une valeur précise. Par exemple, un contrôle de volume : l'utilisateur moyen pense habituellement à monter ou descendre le volume pour rendre le son plus fort ou plus faible plutôt que de régler le pic du niveau de sortie à une valeur donnée en décibels,

  - il est utile à l'utilisateur de contrôler le taux de variation de la valeur en temps réel. Par exemple, pour contrôler les effets d'un changement de couleur dans une fenêtre d'aperçu en temps réel lorsqu'il déplace les curseurs dans les glissières RVB.

- Donnez un nom à la glissière à l'aide d'un texte au dessus ou à sa gauche en respectant les règles de mise en majuscule des phrases. Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur de donner directement le focus à la glissière.

- Indiquez les valeurs significatives le long de la glissière avec du texte ou des marques de graduation. Par exemple, les points gauche, droite et central pour un contrôle de balance audio sur la .

- Pour de grandes plages d'entiers (plus de 20 environ) et pour des plages de nombres en virgule flottante, pensez à disposer une boîte de texte ou une zone de sélection numérique liée à la position du curseur dans la glissière. Ainsi, l'utilisateur pourra choisir rapidement ou ajuster finement le réglage plus facilement qu'il ne le ferait avec le curseur du contrôle glissière seul.

  ### Contrôles glissière avec des zones de sélection numérique associées

  Three slider controls used to change RGB values, each with a spinbox beside them to facilitate direct numeric entry

## Boutons

Un bouton lance une action lorsque l'utilisateur clique dessus.

### Boutons classiques dans une boîte de dialogue modale

OK and Cancel buttons as found in a modal dialog

### Conseils

- En anglais, nommez tous les boutons avec un verbe à l'impératif en utilisant les règles d'emploi des majuscules dans les titres (en français, utilisez l'infinitif et ne mettez pas de majuscules sauf en début de phrase ou pour les noms propres). Par exemple Save (Enregistrer), Sort (Trier) ou Update Now (Mettre à jour). Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur de donner le focus directement au bouton à partir du clavier.

- Après avoir appuyé sur un bouton, l'utilisateur s'attend à voir le résultat de son action dans la seconde, par exemple la fermeture de la fenêtre ou l'ouverture d'une autre. Consultez le pour des indications sur ce qu'il faut faire lorsque l'application ne peut pas répondre rapidement.

- Mettez des points de suspension (...) à la fin de l'étiquette si l'action nécessite des entrées supplémentaires de l'utilisateur avant d'être prise en compte. Par exemple, Enregistrer sous... ou Rechercher.... N'ajoutez pas de points de suspension aux commandes comme Propriétés, Préférences ou Paramètres car elles ouvrent des fenêtres qui ne nécessitent pas d'entrées supplémentaires pour être prises en compte.

- Une fois qu'une boîte de dialogue est affichée, ne déplacez pas le bouton par défaut d'un bouton vers un autre. Vous pouvez cependant ajouter ou supprimer la propriété par défaut à un même bouton, si cela aide à éviter une erreur de l'utilisateur. Changer de bouton par défaut peut rendre confus et inefficace l'interface, plus particulièrement pour les utilisateurs qui utilisent des technologies d'assistance.

- Si votre bouton peut afficher du texte, une icône ou les deux, choisissez l'étiquette à afficher au moment de l'exécution selon les préférences utilisateur dans les menus GNOME et la boîte de dialogue Préférences de la barre d'outils. Cependant vous pouvez ignorer cette préférence s'il n'y a pas d'icône adaptée pour décrire graphiquement l'action du bouton, par exemple.

- N'utilisez pas plus d'une ou deux largeurs différentes de boutons dans la même fenêtre et donnez la même hauteur à tous. Vous donnerez ainsi une apparence visuelle uniforme agréable à votre fenêtre, ce qui la rendra plus facile à utiliser.

- N'associez pas d'action à un double-clic ou à un clic-droit sur un bouton. Il est peu probable que les utilisateurs découvrent ces actions, et s'ils le faisaient, leurs attentes des autres boutons du bureau en serait perturbée.

- Rendez insensibles les boutons non valides plutôt que d'afficher un message d'erreur lorsque l'utilisateur clique dessus.

Dans une boîte de dialogue, un seul bouton peut être le bouton par défaut ; il est affiché avec une bordure différente et est activé par un appui sur la touche Entrée. C'est très souvent le bouton Valider ou équivalent. Cependant si l'appui sur ce bouton peut par erreur faire perdre des données, ne paramétrez pas de bouton par défaut pour la fenêtre. Ne configurez pas le bouton Annuler comme bouton par défaut à la place. Consultez la pour plus d'informations.

S'il n'y a pas de raison d'avoir un bouton par défaut tant que plusieurs champs n'ont pas été correctement remplis dans la boîte de dialogue — par exemple les champs Nom d'utilisateur et Mot de passe dans une boîte de dialogue de connexion — ne paramétrez le bouton par défaut que lorsqu'ils sont tous deux complétés.

## Cases à cocher

Les cases à cocher sont utilisées pour afficher ou modifier un paramètre. Leurs deux états, coché ou non coché, sont marqués par la présence ou l'absence d'une coche dans la boîte de l'étiquette.

### Un groupement typique de cases à cocher

A typical group of five check boxes in a dialog

### Conseils

- Ne lancez pas d'action lorsqu'un utilisateur clique sur une case à cocher. Toutefois, si elle est utilisée dans une fenêtre Propriétés ou Préférences à application instantanée, mettez immédiatement à jour le réglage représenté par la case à cocher.

- Un clic dans une case à cocher ne doit pas affecter les valeurs d'un autre contrôle. Cela peut néanmoins rendre sensible ou insensible, masquer ou afficher d'autres contrôles.

- Si un clic dans une case à cocher affecte la sensibilité d'autres contrôles, placez la case à cocher immédiatement au dessus ou à gauche des contrôles qu'elle affecte. Vous indiquez ainsi que les contrôles dépendent de l'état de la case à cocher.

- Utilisez les règles de mise en majuscule des phrases pour les étiquettes de case à cocher, par exemple Utiliser une police personnalisée.

- Nommez les cases à cocher de manière à indiquer clairement les effets des deux états coché et non coché, par exemple Afficher les icônes dans les menus. Si cela pose problème, pensez à utiliser deux boutons radio à la place afin que les deux états possèdent leur propre étiquette. Par exemple :

  ### La case à cocher est ambiguë (en haut), les boutons radio sont explicites (en bas)

  Two images: one showing a single check box ambiguously labelled "Progress bar in left of statusbar", the other making the choice explicit with radio buttons labelled "Left" and "Right" under the heading "Status bar progress indicator position:"

  Dans cet exemple, la case à cocher seule est ambiguë car la position de « l'indicateur de progression » n'est pas clair si la case n'est pas cochée. Deux boutons radio sont préférables dans ce cas : ils clarifient les options.

- Indiquez dans toutes les étiquettes la touche d'accès permettant à l'utilisateur de cocher ou décocher une case directement à partir du clavier.

- Dans le cas d'une sélection multiple, si la case à cocher représente une propriété définie pour certains objets de la sélection et non définie pour d'autres, affichez la case à cocher dans son état mixte. Par exemple :

  ### Cases à cocher (à droite) affichant les propriétés d'une sélection multiple de fichiers dans Nautilus (à gauche)

  Check boxes showing the Hidden, Readable and Writeable states of two selected files in Nautilus. Both files are hidden, neither are writeable, but one is readable. The Readable check box is therefore shown in its mixed state.

  In this example, both selected files are hidden (since their filenames start with "."), and the emblems on their icons show that neither file is writeable, but one is readable. The Readable check box is therefore shown in its mixed state.
  .

  Lorsqu'une case à cocher est dans l'état mixte :

  - cliquer une fois sur la boîte cochera la case et appliquera le réglage (si autorisé) à tous les objets de la sélection multiple,

  - cliquer une deuxième fois sur la boîte décochera la case et supprimera ce réglage (si autorisé) pour tous les objets de la sélection multiple,

  - cliquer une troisième fois sur la case remettra la case dans son état mixte et restaurera la valeur originale du réglage pour chaque objet sélectionné.

- Dénommez un groupement de cases à cocher à l'aide d'un en-tête descriptif au dessus ou à gauche du groupement.

- Utilisez un cadre autour du groupe si nécessaire, mais souvenez-vous que de l'espace vide fonctionne aussi bien et conduit à une boîte de dialogue à l'aspect moins cloisonné.

- Ne mettez pas plus d'environ huit cases à cocher dans un même groupe. Si vous avez besoin de plus de huit, essayez d'utiliser de l'espacement, des étiquettes d'en-tête ou des cadres pour les diviser en groupes plus petits. Sinon, envisagez l'utilisation d'une liste de cases à cocher à la place — mais, probablement, vous devriez également réfléchir à la manière de simplifier votre interface utilisateur.

- Essayez d'aligner les groupes de cases à cocher verticalement plutôt qu'horizontalement car cela les rend plus facile à parcourir. N'utilisez des alignements horizontaux ou en tableau que si l'apparence de la fenêtre en est notablement améliorée.

## Boutons radio

Les boutons radio sont utilisés en groupe pour faire un choix parmi un ensemble d'options mutuellement exclusives. Un seul bouton radio dans un groupe peut être sélectionné à la fois. Comme pour les cases à cocher, n'utilisez pas les boutons radio pour lancer des actions.

### Un groupement typique de boutons radio

A typical group of three radio buttons in a dialog

### Conseils

- N'utilisez les boutons radio qu'en groupe de deux au minimum ; n'utilisez jamais un bouton radio tout seul. Pour représenter un réglage unique, utilisez une case à cocher ou deux boutons radio, un pour chaque état.

- Dans un groupe, seul un bouton radio peut être sélectionné à la fois. La seule exception est lorsque le groupe affiche les propriétés d'une sélection multiple lorsqu'un ou plusieurs boutons peuvent être dans leur état mixte.

- Ne lancez pas une action lorsque l'utilisateur clique sur un bouton radio. Mais s'il sont utilisés dans une fenêtre Propriétés ou Préférences à application instantanée, mettez à jour immédiatement le réglage représenté par le bouton radio.

- Un clic sur un bouton radio ne doit pas affecter les valeurs de tout autre contrôle. Cela peut néanmoins rendre sensible ou insensible, masquer ou afficher d'autres contrôles.

- Si un clic sur un bouton radio affecte la sensibilité d'autres contrôles, placez le bouton radio immédiatement au dessus ou à gauche des contrôles qu'il affecte. Vous indiquerez ainsi les contrôles qui dépendent de l'état du bouton radio.

- Utilisez la règle de mise en majuscule des phrases pour les étiquettes des boutons radio, par exemple Mouvement alterné. Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur d'activer le bouton radio directement à partir du clavier.

- Dans une sélection multiple, si le bouton radio représente un réglage défini pour certains objets de la sélection et non défini pour d'autres, affichez le bouton radio dans son état mixte. Par exemple :

  ### Boutons radio (à droite) affichant les propriétés d'une sélection multiple de formes dans une application de dessin (à gauche)

  Radio buttons showing the Thick, Thin and Dashed drawing styles of two selected shapes in a drawing application. One shape is drawn in the thick style, the other in the dashed style. The Thick and Dashed radio buttons are therefore shown in their mixed state, and the Thin radio button is unset.

  . In this situation, clicking any radio button in the group should set the clicked button, and unset all the others. Thereafter, the group should behave like a normal radio button group— there is no way to reset a radio button to its mixed state by clicking on it. Provide a Reset button or equivalent in the window that allows the previous mixed settings to be restored without closing the window or cancelling the dialog.

- Dénommez un groupement de boutons radio à l'aide d'un en-tête descriptif au dessus ou à gauche du groupement.

- Utilisez un cadre autour du groupe si nécessaire, mais souvenez-vous que de l'espace vide fonctionne aussi bien et conduit à une boîte de dialogue à l'aspect moins cloisonné.

- Ne mettez pas plus d'environ huit boutons radio dans un même groupe. Si vous avez besoin de plus de huit, essayez d'utiliser à la place une liste à sélection unique — mais vous devriez également réfléchir à une manière de simplifier votre interface utilisateur.

- Essayez d'aligner les groupes de boutons radio verticalement plutôt qu'horizontalement car cela les rend plus facile à parcourir. N'utilisez des alignements horizontaux ou en tableau que si l'apparence de la fenêtre en est notablement améliorée.

## Boutons bascules

Les boutons bascules ressemblent aux boutons normaux mais ils sont utilisés pour afficher ou modifier un état plutôt que pour initier une action. Les deux états d'un bouton bascule, activé et désactivé, sont respectivement montrés par son apparence « enfoncé » ou « non enfoncé ».

### Un groupement typique de boutons bascules

A group of four toggle buttons representing a choice of measurement units: inches, centimeters, feet and meters

### Conseils

- N'utilisez pas de groupes de boutons bascules dans les boîtes de dialogue à moins que des contraintes d'espace ne vous y obligent ou que vous deviez montrer une certaine cohérence avec une barre d'outils dans votre application. Les cases à cocher ou les boutons radio sont généralement préférables car ils permettent l'usage d'étiquettes plus descriptives et sont moins facilement confondus avec d'autres types de contrôle.

- N'utilisez les boutons bascules qu'en groupe afin qu'ils ne soient pas confondus avec des boutons classiques. Le groupe doit se comporter soit comme un groupe de cases à cocher ou comme un groupe de boutons radio selon vos besoins.

- Indiquez dans toutes les étiquettes de boutons bascules la touche d'accès permettant d'activer ou désactiver le bouton directement à partir du clavier.

- Dénommez un groupement de boutons bascules à l'aide d'un en-tête descriptif au dessus ou à gauche du groupement comme vous le feriez pour un groupe de cases à cocher ou de boutons radio.

- Utilisez un cadre autour du groupe de boutons si nécessaire mais souvenez-vous que de l'espace vide fonctionne aussi bien et conduit à une boîte de dialogue à l'aspect moins cloisonné.

- Essayez d'aligner les groupes de boutons bascules horizontalement plutôt que verticalement. C'est l'apparence normale des boutons bascules dans une barre d'outils ; l'utilisateur est plus habitué à cette disposition.

- Ne laissez pas d'espace entre les boutons bascules d'un groupement, sinon ils risquent de sembler être sans relation ou d'être confondus avec des boutons classiques.

- Utilisez (en anglais) les règles des majuscules dans les titres pour les étiquettes de bouton bascule, par exemple No Wallpaper, Embossed Logo.

- Si votre bouton bascule peut afficher du texte, une icône ou les deux, choisissez l'étiquette à afficher en moment de l'exécution en fonction des préférences utilisateur dans les menus GNOME et la boîte de dialogue Préférences des barres d'outils.

- Utilisez la même étiquette de texte ou le même graphique pour un bouton bascule, qu'il soit activé ou pas.

- Si le bouton bascule représente un réglage pour une sélection multiple qui est activé pour certains objets de la sélection et non activé pour les autres, affichez le bouton bascule dans son état mixte. Par exemple :

  ### Boutons bascules (à droite) affichant les propriétés d'une sélection multiple de formes dans une application de dessin (à gauche)

  Toggle buttons showing the Thick, Thin and Dashed drawing styles of two selected shapes in a drawing application. One shape is drawn in the thick style, the other in the dashed style. The Thick and Dashed toggle buttons are therefore shown in their mixed state, and the Thin toggle button is unset.

## Listes déroulantes

Les listes déroulantes sont utilisées pour faire un choix parmi un ensemble mutuellement exclusif d'options. Elles peuvent être utiles lorsqu'il n'y a pas assez de place dans une fenêtre pour pouvoir utiliser un groupe de boutons radio ou une liste à choix unique qui possède la même fonctionnalité.

### Une liste déroulante affichant la sélection actuelle (à gauche) et la liste de choix disponibles lors d'un clic (à droite)

Two images, one of a drop-down list displaying its current setting, and the other showing its popup menu of available choices when clicked on

Conseils :

- N'utilisez pas de listes déroulantes avec moins de trois éléments ou plus d'une dizaine. Pour proposer le choix entre deux options, utilisez des boutons radio ou des boutons bascules. Pour proposer un choix parmi plus de dix options, utilisez une liste.

- Ne lancez pas d'action lorsque l'utilisateur sélectionne un élément dans une liste déroulante. Mais si elle est utilisée dans une fenêtre Propriétés ou Préférences à application instantanée, mettez à jour le réglage représenté par le menu immédiatement.

- La sélection d'un élément dans une liste déroulante ne doit pas affecter les valeurs d'un autre contrôle. Cela peut néanmoins rendre sensible ou insensible, masquer ou afficher d'autres contrôles.

- Donnez un nom à la liste déroulante à l'aide d'une étiquette de texte placée au dessus ou à sa gauche en utilisant les règles de mise en majuscule des phrases. Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur de donner le focus directement à la liste déroulante.

- Utilisez les règles de mise en majuscule des phrases pour les éléments de la liste déroulante, par exemple Switched movement.

- Assignez une touche d'accès à chaque élément de la liste déroulante. Assurez-vous que la touche d'accès est unique dans la fenêtre ou boîte de dialogue la contenant et non pas seulement dans le menu.

- N'attribuez pas par défaut de raccourcis clavier aux éléments de la liste déroulante. L'utilisateur peut cependant attribuer ses propres raccourcis de la manière classique s'il le souhaite.

- N'utilisez pas de liste déroulante dans une situation où vous pourriez avoir à afficher une propriété d'une sélection multiple : les listes déroulantes ne possèdent pas le concept d'état mixte. Utilisez un groupe de boutons radio ou bascules à la place car ils peuvent afficher des états activé, désactivé ou mixte.

- N'utilisez pas de sous-menu dans une liste déroulante.

Vous devriez normalement utiliser des boutons radio ou une liste à la place de listes déroulantes car ces contrôles présentent toutes les options disponibles à la fois sans aucune interaction supplémentaire. Cependant, les listes déroulantes peuvent être préférables dans une fenêtre où :

- il y a peu d'espace disponible,

- la liste des options peut évoluer dans le temps,

- le contenu de la partie cachée du menu est évident d'après son étiquette ou l'élément sélectionné. Par exemple si vous avez une liste déroulante nommée « Mois : » avec l'élément « Janvier » sélectionné, l'utilisateur peut raisonnablement postuler que la liste contient les 12 mois de l'année sans avoir à regarder dedans.

Les listes déroulantes peuvent également être utiles dans les barres d'outils pour remplacer un groupe de plusieurs boutons bascules mutuellement exclusifs.

## Zones de liste déroulante modifiable

Les zones de liste déroulante modifiables combinent un champ de saisie de texte et une liste déroulante contenant des valeurs prédéfinies. La sélection d'une des valeurs prédéfinies configure le champ de saisie à cette valeur.

### Une zone de liste déroulante modifiable avant et après que sa liste déroulante est affichée

Two images, one of a drop-down combination box entry field displaying its current selection, and the other showing its drop-down list of available choices when clicked on

### Conseils

- N'utilisez une zone de liste déroulante modifiable à la place d'une liste, une liste déroulante ou un groupe de boutons radio que lorsqu'il est important que l'utilisateur puisse saisir une nouvelle valeur qui n'est pas déjà dans la liste des choix prédéfinis.

- Ne lancez pas d'action lorsque l'utilisateur sélectionne un élément dans la liste d'une zone de liste déroulante modifiable. Mais si elle est utilisée dans une fenêtre Propriétés ou Préférences à application instantanée, mettez à jour le réglage représenté par la zone de liste déroulante modifiable immédiatement si possible. Si ce n'est pas possible car le contenu du champ de saisie est non valide pendant que l'utilisateur est toujours en train de saisir, mettez plutôt à jour le réglage associé lorsque la zone de liste déroulante modifiable perd le focus.

- Si l'utilisateur saisit une valeur dans la zone de liste déroulante modifiable qui n'est pas déjà dans la liste déroulante, ajoutez-la à la liste lorsque la zone de liste déroulante modifiable perd le focus afin qu'elle puisse être sélectionnée la prochaine fois.

- Interprétez l'entrée utilisateur dans une zone de liste déroulante modifiable sans tenir compte de la casse. Par exemple, si l'utilisateur saisit `bleu`, `Bleu` et `BLEU` dans la même zone de liste déroulante modifiable à différentes occasions, n'enregistrez qu'une seule valeur dans la liste déroulante à moins que votre application ne fasse une distinction entre les différentes formes (ce qui est normalement une mauvaise idée).

- Nommez une zone de liste déroulante modifiable à l'aide d'une étiquette de texte placée au dessus ou à sa gauche en utilisant les règles de mise en majuscule des phrases. Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur de donner le focus directement à la zone de liste déroulante modifiable.

- Utilisez les règles de mise en majuscule des phrases pour les éléments de la liste déroulante, par exemple Switched movement.

## Barres de défilement

Souvent un objet (tel qu'un document ou une liste) ne peut pas être contenu en entier dans le contrôle qui l'affiche. Dans ces cas, une barre de défilement peut être apposée à ce contrôle. La barre de défilement modifie la partie présentement visible de l'objet dans le contrôle d'affichage : il fait glisser la vue derrière sa fenêtre selon un axe (horizontal ou vertical).

### Conseils

- N'affichez des barres de défilement que lorsqu'elles sont nécessaires pour faire glisser la vue. Si un objet entre en totalité dans son afficheur, ne mettez pas de barres de défilement. Si vous utilisez un objet GtkScrolledWindow, appelez la fonction `gtk_scrolled_window_set_policy` avec le paramètre GTK_POLICY_AUTOMATIC pour placer automatiquement une barre de défilement selon l'axe (ou les axes) appropriés.

- N'utilisez pas des barres de défilement pour remplacer un curseur dans sa glissière. Les barres de défilement ne doivent être utilisées qu'apposées à une vue qu'elles modifient directement et non pas utilisées comme un contrôle commun d'entrées continues.

- Placez les barres de défilement du côté droit du contrôle d'affichage (pour déplacer verticalement la vue) ou en bas (pour la faire glisser horizontalement). N'apposez pas les barres de défilement en haut ou du côté gauche du contrôle d'affichage.

- Dans l'une ou l'autre direction, les barres de défilement doivent avoir la même dimension que la vue à laquelle elles sont apposées dans le sens qu'elles contrôlent. Autrement dit, les barres de défilement horizontales doivent être disposées sur toute la largeur du contrôle afficheur et les barres de défilement verticales sur toute sa hauteur.

- Si des barres de défilement horizontales et verticales sont simultanément actives sur une vue, l'alignement imposera qu'un petit rectangle dans le coin inférieur droit, là où les ascenseurs horizontaux et verticaux se rencontrent, soit vide. Cela ne pose pas de problème.

- Les barres de défilement doivent modifier en temps réel la vue à laquelle ils sont apposés : lorsque l'utilisateur la fait glisser ou clique dessus, la vue doit changer. Un délai serait déconcertant et aurait un impact négatif sur les possibilités de navigation des utilisateurs dans le contenu de la vue.

## Listes

Un contrôle liste permet à l'utilisateur d'examiner, manipuler ou sélectionner des éléments d'une liste. Les listes peuvent avoir une colonne ou plus et contenir du texte, des graphiques, des contrôles simples ou une combinaison des trois.

### Une simple liste à deux colonnes

Picture of list control containing two unsorted columns of text

### Conseils

- Nommez les contrôles de liste avec une étiquette texte placée au dessus ou à gauche en utilisant les règles de mise en majuscule des phrases. Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur de donner le focus directement à la liste.

- Faites un contrôle de liste suffisamment grand pour qu'il puisse afficher au moins quatre éléments à la fois sans défilement. Pour les listes de dix éléments ou plus, augmentez cette taille minimale de manière appropriée.

- Si la liste apparaît dans une boîte de dialogue ou dans une fenêtre utilitaire, pensez à rendre la fenêtre et la liste qu'elle contient redimensionnables afin que l'utilisateur puisse choisir le nombre d'éléments de la liste visibles à la fois sans défilement. Chaque fois que l'utilisateur ouvre cette boîte de dialogue, paramétrez ses dimensions à celles choisies par l'utilisateur la fois précédente.

- N'utilisez pas de listes avec moins d'environ cinq éléments, à moins que le nombre d'éléments puisse augmenter dans le temps. Utilisez des cases à cocher, des boutons radio ou une liste déroulante s'il y a moins d'éléments.

- N'utilisez d'en-têtes de colonnes que si :

  - la liste a plus d'une colonne ou

  - la liste n'a qu'une colonne, mais l'utilisateur souhaite modifier l'ordre dans la liste (c'est rarement utile avec des listes à une seule colonne).

  Dans la plupart des autres situations, les en-têtes de colonne prennent inutilement de la place et les étiquettes en trop ajoutent au cloisonnement visuel.

- Quand vous utilisez les en-têtes de colonne, étiquetez-les dans tous les cas. Si la colonne est trop étroite pour une étiquette explicite, dotez la colonne d'une infobulle à la place. Hormis son utilisation triviale, les technologies d'assistance pourront ainsi décrire l'usage de la colonne aux utilisateurs ayant des problèmes visuels.

- Pensez à utiliser une liste de cases à cocher pour les listes à sélections multiples, car le fait que des sélections multiples sont possibles est ainsi mis en évidence :

  ### Une simple liste avec cases à cocher

  Picture of list control with two columns. The first column consists of check boxes showing whether or not the corresponding item in the second column is selected for further action.

  Si vous faites ce choix, vous devrez normalement paramétrer le contrôle liste lui-même comme étant à sélection unique, mais ce paramétrage dépend de la tâche particulière à laquelle il est associé.

- Dans une liste à sélection multiple, affichez le nombre d'éléments présentement sélectionnés dans une étiquette textuelle statique au dessous de la liste, par exemple Noms sélectionnés : 3. Cette mention met également en évidence le fait qu'une sélection multiple est possible.

- Pensez à placer des boutons Sélectionner tout et Désélectionner tout à côté des listes à sélection multiple si c'est approprié.

### Listes triables

Les utilisateurs préfèrent souvent trier les longues listes, soit alphabétiquement, soit numériquement, pour faciliter la recherche d'éléments. Donnez la possibilité aux utilisateurs de trier les listes longues ou multi-colonnes en cliquant sur l'en-tête de la colonne qu'ils veulent trier.

#### Conseils

- Indiquez la colonne actuellement triée en affichant une flèche vers le haut ou vers le bas dans son en-tête :

  Ordre de tri | Sens de la flèche | Exemple
  --- | --- | ---
  Naturel | Bas | Alphabétique, plus petit nombre en premier, date la plus ancienne en premier, éléments cochés en premier
  Inverse | Haut | Alphabétique inverse, plus grand nombre en premier, date la plus récente en premier, éléments décochés en premier

- Un clic sur une colonne non triée trie la colonne dans l'ordre naturel, indiqué par l'affichage d'une flèche vers le bas dans l'en-tête.

- Un clic sur une colonne triée dans l'ordre naturel trie à nouveau la colonne dans l'ordre inverse, indiqué par l'affichage d'une flèche vers le haut dans l'en-tête.

  #### Listes non triées

  Parfois, un état non-trié peut se révéler utile, par exemple pour montrer les éléments dans l'ordre où l'utilisateur les a ajoutés à la liste. Dans de tels cas, un clic sur une colonne trié en ordre inverse annule son tri, ce qui est indiqué par la suppression de la flèche dans l'en-tête de colonne.

  Habituellement, il est toutefois plus facile d'ajouter une colonne supplémentaire que l'utilisateur peut trier de la manière habituelle, comme une colonne de nombres séquentiels par exemple.

## Arborescences

Un contrôle arborescence permet à l'utilisateur d'examiner, de manipuler ou de sélectionner des éléments d'une liste hiérarchique. Les arborescences peuvent avoir une colonne ou plus et contenir du texte, des graphiques, des contrôles simples ou une combinaison des trois.

### Utilisez les arborescences avec parcimonie !

À cause de leur complexité par rapport aux autres contrôles, les utilisateurs novices ou de niveau intermédiaire ont souvent des problèmes à utiliser et comprendre les arborescences. Si votre application est conçue pour ce type d'utilisateurs, vous devriez réfléchir à des alternatives de présentation de l'information, telles que la vue liste ou icône de Nautilus ou les listes de navigation hiérarchiques dans l'explorateur de fichiers de GNUstep.

### Un simple contrôle arborescence avec un niveau de hiérarchie

Picture of tree control showing months of the year as top level nodes, and public holidays in those months as their children

### Conseils

- Nommez toujours les arborescences avec une étiquette texte placée au dessus ou à gauche respectant les règles de la mise en majuscule des phrases. Indiquez dans l'étiquette la touche d'accès permettant à l'utilisateur de donner le focus directement à l'arborescence.

- Utilisez des en-têtes de colonnes si :

  - l'arborescence a plus d'une colonne ou

  - l'arborescence n'a qu'une colonne mais l'utilisateur peut vouloir réordonner l'arborescence (c'est très rarement utile avec des arborescences à une seule colonne).

  Dans la plupart des autres situations, les en-têtes de colonne prennent inutilement de la place et les étiquettes en trop ajoutent au cloisonnement visuel.

- Quand vous utilisez les en-têtes de colonne, étiquetez-les dans tous les cas. Si la colonne est trop étroite pour une étiquette explicite, dotez la colonne d'une infobulle à la place. Hormis son utilisation triviale, les technologies d'assistance pourront ainsi décrire l'usage de la colonne aux utilisateurs ayant des problèmes visuels.

- Pensez à utiliser une liste de cases à cocher pour les arborescences à sélections multiples, car le fait que des sélections multiples sont possibles est ainsi mis en évidence :

  ### Une simple arborescence avec case à cocher

  Picture of tree control with two columns. The first column consists of check boxes showing whether or not the corresponding item in the second column is selected for further action.

  Si vous faites ce choix, vous devez normalement paramétrer le contrôle arborescence lui-même comme étant à sélection unique, mais ce paramétrage dépend de la tâche particulière auquel il est associé.

- Pour les arborescences à sélection multiple, affichez le nombre d'éléments présentement sélectionnés dans une étiquette textuelle statique en dessous de l'arborescence, par exemple Noms sélectionnés : 3. Cette mention met également en évidence le fait qu'une sélection multiple est possible.

- Pensez à disposer des boutons Sélectionner tout et Désélectionner tout à côté des arborescences à sélection multiple si c'est approprié.

### Arborescence triables

Tout comme pour les listes, l'utilisateur peut trouver utile de trier les arborescences longues ou multi-colonnes. Consultez les conseils de la pour plus d'informations.

## Bloc-notes à onglets

Un contrôle bloc-notes à onglets est une manière pratique d'afficher des informations apparentées dans une même fenêtre sans avoir à les afficher toutes en même temps. C'est analogue aux onglets diviseurs dans un classeur à anneaux ou à chemises.

### Un contrôle bloc-notes classique avec trois onglets

Picture of notebook control with three tabs

### Conseils

- Ne mettez pas trop de pages dans le même bloc-notes. Si vous ne pouvez pas voir tous les onglets sans les faire défiler ou sans les diviser sur plusieurs lignes, c'est probablement que vous en utilisez trop et que vous devriez utiliser un contrôle liste à la place. Voyez l'exemple ci-dessous.

- Nommez les onglets (en anglais) en respectant les règles d'emploi des majuscules dans les titres et utilisez des noms plutôt que des verbes, par exemple Font ou Alignment. Essayez de conserver grosso modo la même longueur pour toutes les étiquettes d'un bloc-notes.

- N'attribuez pas de touches d'accès aux étiquettes d'onglet : vous ne pourriez plus utiliser ces raccourcis pour n'importe quel autre contrôle de chacune des pages du bloc-notes sans conflit. Même si vous arriviez à attribuer ces touches d'accès sans conflit, il reste préférable de ne pas le faire : il se pourrait qu'il ne soit pas possible d'éviter les conflits si l'application est traduite dans d'autres langues. Attribuez néanmoins une touche d'accès à tous les contrôles de chaque page.

- Ne concevez pas un bloc-notes de façon à ce qu'une modification d'un contrôle sur une page modifie les contrôles sur d'autres pages. Il est peu probable que les utilisateurs découvrent de telles dépendances.

- Si un contrôle ne modifie qu'une page de bloc-notes, placez-le sur cette page de bloc-notes. S'il modifie toutes les pages du bloc-notes, placez-le à l'extérieur du contrôle bloc-notes, par exemple à côté des boutons Valider et Annuler de la fenêtre.

- Utilisez des onglets de taille proportionnée à la longueur de leurs étiquettes. Ne paramétrez pas tous les onglets à la même longueur car cela les rend plus difficiles à parcourir visuellement et limite le nombre d'onglets que peut contenir le bloc-notes sans défilement. Par exemple :

  ### Onglets de longueur fixe et proportionnelle (préférable)

  Side-by-side comparison of one notebook whose tabs are all the same width, and one whose tabs are only wide enough to accommodate the tab labels. The latter takes up around 33% less screen space.

- Même si le contenu de chaque page d'un bloc-notes prend une quantité de place différente, n'utilisez pas d'espacements plus grands que la normale autour des contrôles dans les pages « les plus vides » et ne centrez pas les contrôles sur la page.

- Si vos étiquettes d'onglet incluent des icônes, choisissez d'afficher ou pas les icônes au moment de l'exécution selon les préférences exprimées par l'utilisateur dans les menus GNOME et la boîte de dialogue Préférences de la barre d'outils. Cependant affichez toujours la partie texte de l'étiquette.

Si vous avez environ plus de six onglets dans un bloc-notes, utilisez un contrôle liste au lieu d'onglets pour naviguer parmi les pages de contrôles. Par exemple :

### Utilisation de contrôles liste quand les onglets sont trop nombreux pour entrer facilement dans le bloc-notes

Part of a window including a list control with 7 items, each item representing a category of settings such as "Appearance" and "Navigation". The controls in the rest of the window change depending on which item is selected in the list.

As in this example, place the list control on the left-hand side of the window, with the dynamic portion of the window immediately to its right.

### Indicateurs d'état

Dans certaines fenêtres à onglets telles que les fenêtres de préférences, il peut être souhaitable d'indiquer l'état d'un onglet particulier. Par exemple, pour indiquer à l'utilisateur qu'une page Web est en cours de chargement ou a été chargée, qu'un nouveau message est en attente dans une conversation de messagerie instantanée donnée ou qu'un document n'a pas été enregistré. Un indicateur d'état doit être une icône placée directement à gauche de l'étiquette de l'onglet. En plus, la couleur de l'étiquette de l'onglet peut être modifiée pour indiquer un certain état. Ne vous fondez pas uniquement sur un schéma de couleurs différentes pour une indication d'état.

## Barres de progression

Les barres de progression sont des indicateurs visuels de la progression d'une tâche en cours de traitement par l'application ; elles participent de manière importante aux retours d'information. Pour des indications sur l'usage d'une barre de progression dans une fenêtre de progression, consultez la .

Dans vos applications, vous avez la possibilité d'utiliser principalement deux types de barre de progression ; les barres de progression à mesures et les barres de progression indéterminée (celles dont le curseur fait des aller-retours dans la coulisse). De plus, on distingue trois types de barres de progression à mesures.

### Conseils

- Utilisez toujours une barre de progression à mesures lorsque la durée de la tâche peut être précisément ou approximativement prévue. Sinon utilisez un indicateur de progression indéterminée ou une fenêtre à liste de contrôles.

- Assurez-vous qu'une barre de progression à mesure soit rapportée à la durée totale d'une opération ou d'une quantité totale de travail, pas uniquement à une étape isolée — exception faite de barres de progression mesurant la durée ou le travail total de l'étape en cours dans l'avancement d'une liste de vérifications.

### Indicateur de progression du temps restant

C'est une animation constituée d'une barre dont la longueur varie en indiquant le temps écoulé au cours d'une opération et d'un texte indiquant le temps restant avant l'achèvement de l'opération. Les barres de temps restant sont le type de barre de progression le plus utile.

#### Une simple barre de progression « temps restant »

A simple time-remaining progress dialog

Utilisez une barre de temps restant si l'application affiche une première estimation de la durée d'une opération, puis affiche périodiquement une mise à jour de l'estimation. Chaque nouvelle estimation doit se fonder sur les changements apportés au déroulement, changements qui font que l'opération se terminera plus ou moins vite. Si l'opération doit se terminer moins rapidement qu'initialement prévu, l'application peut afficher une nouvelle estimation supérieure à la précédente.

### Indicateur de progression de durée-type

C'est une barre dont le changement de longueur indique le temps restant rapporté à la durée habituelle de l'opération. La barre de durée-type est le type le moins précis de barre de progression à mesure, mais elle reste plus utile qu'une barre de progression indéterminée.

#### Une simple barre de progression du « temps-type restant »

A simple 'typical time remaining' progress dialog

Pour certaines opérations, vous ne pouvez pas estimer le temps restant ou la proportion de travail effectuée. Cependant, si vous savez estimer la durée typique d'une telle opération, vous pourrez informer l'utilisateur avec une barre de durée-type.

Si l'application sur-estime la quantité de travail effectuée, la longueur de la barre peut indiquer « pratiquement terminé » jusqu'à ce que l'opération soit effectivement terminée. Si votre application sous-estime la quantité de travail effectuée, l'application peut remplir d'un coup la partie restante de la barre lorsque l'opération est terminée.

### Indicateur de progression indéterminée

C'est une barre animée indiquant seulement qu'une opération est en cours et non le temps que cela va prendre. Le « pulsateur » d'un navigateur Web en est un exemple. Les barres de progression indéterminée sont le type de barre de progression le moins précis.

#### Une simple barre de progression « durée indéterminée » ; le curseur se déplace alternativement d'une extrémité de la barre à l'autre jusqu'à la fin de l'opération

A simple 'indeterminate time' progress dialog, showing a slider moving back and forth until the operation is complete

Utilisez une barre de progression indéterminée pour donner un retour d'information uniquement pour les opérations dont la durée ne peut pas être estimée du tout.

## Barres d'état

Une barre d'état est une zone en bas d'une fenêtre qui peut être utilisée pour afficher une information brève sur l'état de l'application.

### Une simple barre d'état

A statusbar at the bottom of a document window, showing current zoom level and a status message indicating that the document has been modified since it was last saved

### Conseils

- Utilisez les barres d'état seulement dans les fenêtres d'applications ou de documents. Ne les utilisez pas dans les boîtes de dialogue, les alertes ou d'autres fenêtres secondaires.

- Ne placez une barre d'état qu'au bas de la fenêtre.

- N'utilisez les barres d'état que pour afficher des informations non-critiques. Cela comprend :

  - des informations générales à propos du document ou de l'application. Par exemple, l'état de la connexion actuelle dans une application réseau ou la taille du document actuel dans un éditeur de texte.

  - des informations sur la tâche que l'utilisateur est en train d'accomplir. Par exemple, lorsque l'outil de sélection est utilisé dans une application de dessin « Appuyez sur la touche Maj. pour étendre la sélection ».

  - la progression d'une opération en arrière-plan. Par exemple, « Envoi vers l'imprimante », « Impression de la page 10 sur 20 », « Impression terminée ».

  - une description du contrôle ou de la zone de la fenêtre sous le pointeur de la souris. Par exemple, « Déposez les fichiers ici pour les téléverser ».

  Souvenez-vous que les barres d'état sont normalement dans le champ de vision périphérique de l'utilisateur et peuvent être masquées complètement en utilisant l'élément de menu Affichage Barre d'état de l'application. L'utilisateur peut par conséquent ne jamais voir ce que vous y affichez, à moins qu'il ne sache quand et où le chercher.

- Lorsqu'il n'y a aucun état digne d'intérêt à rapporter, laissez le panneau de la barre d'état vide plutôt que d'afficher quelque chose de ne donne aucune information comme « Prêt ». Ainsi, lorsque quelque chose intéressant apparaît dans la barre d'état, l'utilisateur est plus apte à s'en rendre compte.

- Si vous voulez rendre tout ou partie de votre barre d'état interactive, utilisez les conventions suivantes :

  - apparence incrustée pour les zones qui répondent au double-clic,

  - apparence plate pour les zones qui ne sont pas interactives.

  Dans la , l'apparence indique que la zone de gauche répond au double-clic (peut-être en enregistrant le document) et que l'indicateur de progression sur la droite n'est pas interactif.

  ### Une barre d'état interactive

  A statusbar with a text panel that responds to a double click, a button that responds to a single click, and a non-interactive progress area

  Assurez-vous qu'un double-clic dans la zone d'état n'offre pas une fonctionnalité qui ne serait pas disponible dans la barre de menu principale de l'application ou accessible par un autre moyen.

- Prévoyez une poignée de redimensionnement dans le coin inférieur droit de la barre d'état des fenêtres redimensionnables. Les classes dérivées de GtkStatusbar doivent utiliser la poignée de redimensionnement fournie par cette classe. Une ré-implémentation d'une barre d'état, ce qui est déconseillé, doit également ré-implémenter la poignée de redimensionnement de GtkStatusbar à la fois dans sa fonction et son apparence.

## Cadres et séparateurs

Un cadre est une boîte avec un titre que vous pouvez dessiner autour des contrôles pour les organiser en groupes fonctionnels. Un séparateur est une simple ligne horizontale ou verticale qui peut être utilisée pour diviser les fenêtres en groupes fonctionnels.

Les cadres avec bordure autour de leur périmètre ont traditionnellement été utilisés pour marquer des groupes de contrôles en relation. C'est avantageux car cela isole physiquement des contrôles non similaires et évite également la répétition de l'étiquette du cadre dans les étiquettes des contrôles membres individuels. Malheureusement, ils ajoutent du bruit visuel qui peut, à la fois, rendre une fenêtre plus complexe qu'elle n'est et diminuer la possibilité de parcourir rapidement les éléments de la fenêtre.

Plutôt que d'utiliser des cadres avec bordure, utilisez des cadres sans bordure, avec les étiquettes en gras pour que la catégorie ressorte et avec un contenu indenté. Cette disposition, combinée à un agencement et un espacement adéquats, est habituellement une meilleure alternative aux cadres avec bordure.

### Style de cadre préféré, utilisant des étiquettes en gras, des espacements et de l'indentation

Frame showing the preferred style described above

### Style de cadre traditionnel utilisant des bordures (déconseillé)

Frame showing the traditional style described above

### Conseils

- Avant d'ajouter un cadre avec un bord visible ou un séparateur dans une fenêtre, demandez-vous soigneusement si vous en avez vraiment besoin. Il est généralement mieux de faire sans, si les groupes peuvent être séparés par des espaces seulement. N'utilisez pas des cadres et des séparateurs pour compenser un mauvais agencement ou alignement de contrôles.

- Ne mélangez pas des groupes avec et sans cadre dans la même fenêtre.

- N'insérez pas un cadre dans un autre. Cette disposition donne un résultat cloisonné.

- Si tous les éléments d'un groupe sont désactivés, désactivez le titre du groupe aussi.