Projet de convivialité GNOME
2002-2010
Calum Benson, Adam Elman, Seth Nickell, colin z robertson
2010
Bruno Brouard (annoa.b@gmail.com)
2010
Gérard Baylard (Geodebay at gmail.com)
02/03/2010
2.2.1

Ce document vous indique comment créer une application de bel aspect, de comportement correct et complètement intégrée dans l'interface utilisateur GNOME. Il est écrit pour les concepteurs d'interfaces, les artistes graphiques et les développeurs créateurs de logiciels pour l'environnement GNOME. Il expose des conseils précis sur l'art d'utiliser efficacement les éléments de l'interface, mais il couvre aussi la philosophie et les principes généraux de conception qui se cachent derrière l'interface GNOME.

Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de la licence de documentation libre GNU, Version 1.1 ou ultérieure publiée par la Free Software Foundation sans section inaltérable, sans texte de première page de couverture ni texte de dernière page de couverture. Vous trouverez un exemplaire de cette licence en suivant ce lien ou en écrivant à : Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.

La plupart des noms utilisés par les entreprises pour distinguer leurs produits et services sont des marques déposées. Lorsque ces noms apparaissent dans la documentation GNOME et que les membres du projet de Documentation GNOME sont informés de l'existence de ces marques déposées, soit ces noms entiers, soit leur première lettre est en majuscule.

# Guide de l'interface utilisateur (GIU) 2.2.1 pour GNOME

## Nouveautés

Ce paragraphe met l'accent sur les modifications du présent ouvrage pouvant avoir une incidence sur votre application.

Les modifications suivantes ont été apportées à la version 2.2.1 de l'ouvrage :

- Dans la , a été mentionné que les indicateurs de progression in-situ sont préférables à des boîtes de dialogue modales de progression.

- Dans la , a été remplacé le conseil à propos des fenêtres de progression de même titre que leur texte principal, ce qui conduisait à une redondance inutile. Il est maintenant conseillé que le titre des fenêtres de progression résume globalement l'opération.

Les sections suivantes ont été ajoutées dans la version 2.2 de l'ouvrage :

Des conseils nouveaux ou révisés ont été ajoutés dans les parties suivantes de la version 2.0 de l'ouvrage :

Les modifications de terminologie suivantes ont été introduites dans la version 2.2 de l'ouvrage :

- Les « menus d'options » sont maintenant appelés « listes déroulantes ».

- Les « boîtes combinées » sont maintenant appelés « zones de liste déroulante modifiable ».

## Introduction

Ce document vous indique comment créer une application de bel aspect, de comportement correct et complètement intégrée dans l'interface utilisateur GNOME. Il est écrit pour les concepteurs d'interfaces, les artistes graphiques et les développeurs créateurs de logiciels pour l'environnement GNOME. Il expose des conseils précis sur l'art d'utiliser efficacement les éléments de l'interface, mais il couvre aussi la philosophie et les principes généraux de conception qui se cachent derrière l'interface GNOME.

Le but de ce guide est de vous aider à concevoir et écrire des applications faciles à utiliser et cohérentes avec le bureau GNOME. Suivre ces conseils vous est bénéfique sur de nombreux points :

- les utilisateurs apprennent à utiliser votre programme plus rapidement parce que les éléments de l'interface s'affichent et se comportent de manière habituelle,

- les utilisateurs novices, mais aussi les plus expérimentés, réalisent leurs tâches rapidement et facilement parce que l'interface n'est pas confuse et ne rend pas les choses difficiles,

- votre application a une apparence attirante en harmonie avec celle du reste du bureau,

- votre application reste belle lorsque l'utilisateur modifie les thèmes, les polices et les couleurs du bureau,

- votre application est accessible à tous les utilisateurs, y compris ceux qui souffrent de handicaps ou ont des besoins particuliers.

Pour vous aider à atteindre ces objectifs, ce guide traite des éléments d'interface élémentaires ; comment les utiliser et les mettre ensemble utilement et comment faire pour que votre application s'intègre bien dans le bureau.

Les recommandations ont été créés sur des critères de conception qui ont bien fonctionné pour d'autres systèmes dont Mac OS, Windows, Java et KDE. En même temps, elles conservent une saveur GNOME unique.

### Souvenez-vous...

Suivre le guide rendra votre travail plus facile et non pas plus dur !

## Principes d'ergonomie

Cette section explique quelques-uns des principes de base cachés derrière les conseils techniques plus spécifiques recommandés dans ce document. Nous pensons que ces principes sont importants pour tout développement d'applications.

### Concevoir pour des humains

Souvenez-vous que le but de tout logiciel est de permettre à un groupe de personnes de réaliser un ensemble précis de tâches. La première chose à définir lorsque vous concevez votre application est donc :

1. qui sont les utilisateurs,

2. que voulez-vous leur permettre de faire.

Par exemple, vous pouvez concevoir une application qui permette à des ingénieurs (concepteur de logiciels, électricien ou mécanicien) de créer des diagrammes ; une autre qui permette à des administrateurs systèmes de configurer et surveiller un serveur Web ; une autre qui aide des étudiants d'école primaire à apprendre les mathématiques.

Il est important que vous connaissiez votre public et que vous compreniez à la fois ses buts et les tâches nécessaires pour les atteindre. Un grand nombre d'ergonomes professionnels écrivent des livres et donnent des cours sur des méthodes de conception pouvant vous aider dans cette démarche. Beaucoup de ces méthodes sont très utiles ; consultez la pour en consulter un échantillon. La plupart de ces méthodes, cependant, se résument à des moyens précis de compréhension des besoins des utilisateurs, des tâches que vous voulez les aider à accomplir et à la recherche des façons de prendre en charge ces tâches dans l'application.

### Ne pas limiter le socle des utilisateurs

Si vous concevez une application dont les utilisateurs sont des ingénieurs, des enfants ou des administrateurs système, assurez-vous de créer une application utilisable par tous les ingénieurs, tous les enfants ou tous les administrateurs système, y compris ceux confrontées à des handicaps ou bien ceux dont la langue maternelle est différente de la vôtre. Soyez attentif aux problèmes d'accessibilité, d'internationalisation et de localisation : les conseils de ce document concernent nombre d'entre eux.

#### Accessibilité

Accessibilité (parfois désignée par a11y pour « accessibility ») signifie « permettre aux personnes souffrant d'un handicap particulier de participer aux activités de la vie » : dans ce cas précis, utiliser votre logiciel. Par exemple :

- il se peut que les daltoniens ne puissent pas utiliser votre application si vous ne vous fondez que sur un code couleur pour différencier les types d'informations,

- il se peut que les utilisateurs atteints de surdité ne puissent pas utiliser votre programme si vous ne comptez que sur des sons pour leur donner des informations critiques.

- il se peut que les utilisateurs à mobilité réduite ne puissent pas utiliser votre programme si vous ne fournissez pas des équivalents clavier pour les commandes.

Votre logiciel devrait aussi être utilisable à l'aide d'interfaces vocales, de lecteurs d'écran tels que Gnopernicus, de périphériques d'entrée alternatifs et d'autres outils d'accessibilité. La bibliothèque standard GNOME réalise la plupart de ces tâches pour vous mais, avec un petit effort supplémentaire, vous pouvez rendre votre application utile aux utilisateurs qui utilisent ce type de technologie comme à ceux qui ne le font pas.

GNOME possède une excellente prise en charge intégrée pour l'accessibilité via les bibliothèques ATK et GAIL qui, dans beaucoup de cas, peuvent faire la plupart du travail pour vous. Vous trouverez plus d'informations sur l'accessibilité dans GNOME dans le projet d'accessibilité de GNOME.

#### Internationalisation et localisation

Internationalisation signifie « concevoir le logiciel afin qu'il puisse fonctionner dans des environnements linguistiques différents ». La localisation est le processus réel de traduction dans une autre langue des messages, étiquettes et autres éléments de l'interface d'une application.

GNOME possède une excellente prise en charge à la fois de l'internationalisation (également désignée par i18n) et la localisation (également désignée par l10n). Dans la plupart des cas, la simple utilisation des API standard de GNOME pour afficher le texte et les messages permettra à vous ou à d'autres de régionaliser votre application pour d'autres environnements linguistiques. Pour obtenir plus d'informations sur la façon de rendre votre application localisable, consultez la page Web du projet Pango (Pango est la bibliothèque GNOME de rendu de texte international), la page des traductions GNOME et la page du projet de traduction GNOME.

Une sensibilité aux problèmes culturels et politiques doit également être prise en compte. La conception d'icônes et de sons et même le choix de couleurs nécessitent la compréhension des connotations qui peuvent exister pour les utilisateurs d'une autre partie du monde.

Pour ces raisons, voici quelques exemples d'éléments qu'il vaut mieux éviter :

- des images de drapeaux ou de pièces de monnaie,

- des cartes affichant des frontières politiques ou des noms d'emplacements litigieux,

- des listes de pays ou de villes dans un ordre autre qu'alphabétique (à moins que cela ne soit demandé spécifiquement ou exigé par le contexte),

- des icônes représentant des animaux,

- des icônes représentant seulement des mains ou des pieds.

### Création d'un lien entre votre application et le monde réel

Utilisez toujours des mots, phrases et concepts familiers à l'utilisateur plutôt que des termes provenant du système informatique sous-jacent. Pour les actions que votre application prend en charge, utilisez des termes relatifs aux connaissances de l'utilisateur. Par exemple, en médecine la chemise qui contient toutes les informations concernant un patient donné, s'appelle un « dossier médical ». Ainsi, une application médicale faisant référence aux données d'un patient de même nature que celles d'un dossier médical papier, doit les désigner sous le nom « dossier médical du patient » plutôt que sous le nom « enregistrements de la base de données du patient ».

Vous pouvez souvent tirer avantage de votre connaissance du monde réel des utilisateurs en utilisant une métaphore (c'est-à-dire, un concept familier du monde extérieur) pour représenter des éléments de votre application. Par exemple :

- une image de dossier de fichiers suggère une chemise dans laquelle les documents peuvent être rangés,

- une corbeille à papier suggère un panier dans lequel des éléments peuvent être placés quand ils ne servent plus à rien.

Cependant, lorsque vous utilisez des métaphores, il est important de ne jamais les prendre trop à la lettre, ni de les projeter au delà d'une utilisation raisonnable. Par exemple, la capacité d'un dossier de fichiers ne doit pas être limitée à la capacité d'une chemise physique classique, qui ne peut certainement contenir que quelques documents sauf à devenir ingérable. D'un autre côté, une corbeille à papier ne doit contenir rien d'autre que des fichiers détruits. Elle ne doit pas être utilisée, par exemple, pour éjecter un disque amovible tel qu'une disquette ou un CD.

### Rendre votre application cohérente

Rendez votre application cohérente en soi et avec les autres applications, à la fois dans son apparence et dans son comportement. C'est un des principes de conception parmi les plus importants, certainement le plus connu, mais également le plus fréquemment oublié. Puisque ce document sert de base à la cohérence entre applications GNOME, nous vous conseillons de le consulter et de ne suivre d'autres conventions d'applications que là où ce document ne donne aucune directive.

La cohérence permet aux utilisateurs d'utiliser leur propre expérience de leur environnement informatique et d'autres applications pour comprendre une nouvelle application. Cela permet non seulement aux utilisateurs de devenir plus rapidement familiers avec des nouvelles applications, mais également aide à créer une sensation de confort et de confiance dans l'environnement global. La plupart des recommandations de ce guide pour les interfaces utilisateurs GNOME sont conçues pour vous aider à créer des applications cohérentes avec l'environnement GNOME et les autres applications GNOME.

Prenez garde : une cohérence à moitié réalisée ou incomplète est souvent pire qu'une incohérence. Si votre application inclut un élément de menu Annuler pour être cohérent, mais que celui-ci est toujours désactivé parce que l'application en fait ne le prend pas en charge, cela va diminuer la confiance de l'utilisateur dans la disponibilité de la fonction Annuler dans d'autres applications du bureau. Soit faites en sorte que l'application prenne en charge l'annulation, soit éliminez l'élément de menu Annuler.

### Garder l'utilisateur informé

Il faut toujours informer l'utilisateur de ce qui se passe dans une application en utilisant des retours d'informations appropriés au moment opportun. L'utilisateur ne devrait jamais avoir à faire de suppositions sur l'état du système ou de l'application. Lorsque l'utilisateur réalise une action, tenez-le informé en indiquant que le système a reçu l'entrée et qu'il est en train d'agir en conséquence. Le retour peut être visuel, sonore ou les deux. Si le système a besoin de beaucoup de temps pour réaliser l'opération, donnez autant d'indications que possible sur la durée de l'opération. Des types de retours utiles incluent, mais sans s'y limiter, des modifications du curseur, des « indicateurs d'activité » animés, des barres de progression, des retours audio tels qu'un bip et des messages d'erreurs. Les messages d'erreurs doivent utiliser un langage simple, poser clairement le problème et donner des solutions ou dire à l'utilisateur comment se sortir de la situation actuelle si possible.

Il est très important que les retours soient exacts et précis. Si vous affichez une barre de progression pour indiquer l'état d'avancement de la tâche et qu'elle n'est pas précise, l'utilisateur perd confiance dans les barres de progression et il trouvera l'environnement moins fonctionnel. Si vous affichez un message d'erreur générique qui indique qu'il y a un problème mais qui ne fournit pas assez d'informations pour diagnostiquer ou résoudre le problème, vos utilisateurs ne pourront pas continuer leur travail.

Consultez le et la pour avoir plus d'informations sur les retours d'informations.

### Conserver la simplicité et rendre joli

Votre application doit permettre à l'utilisateur de se concentrer sur son travail en cours. Concevez donc votre application pour qu'elle affiche seulement les informations et éléments d'interface utiles et pertinents. Chaque bout d'information ou de contrôle d'interface en trop fait de l'ombre aux informations vraiment pertinentes et distrait l'utilisateur des informations importantes. Par conséquent, n'encombrez pas votre interface et ne noyez pas l'utilisateur sous des boutons, options de menu, icônes ou informations non pertinentes. À la place, utilisez des révélations progressives et d'autres techniques pour limiter la quantité de choses que l'utilisateur voit à chaque instant.

Enfin, présentez votre information et les éléments de l'interface de manière esthétique. Une interface désorganisée et à l'aspect encombré avec quelques éléments peut être aussi perturbante qu'une interface organisée avec trop d'informations. Vérifiez que les éléments des boîtes de dialogue sont correctement alignés et qu'ils n'utilisent ni trop ni pas assez de couleurs ou graphiques. Si vous connaissez un concepteur graphique, suivez ses conseils si possible. Les conseils de ce document vous aideront en ce qui concerne les bases mais rien ne vaut un œil expérimenté.

Consultez le et le pour avoir plus d'informations sur la conception de l'apparence visuelle de votre application.

### Laisser le contrôle à l'utilisateur

Souvenez-vous que les ordinateurs sont là pour rendre service aux hommes. Un utilisateur doit toujours avoir le sentiment d'avoir le contrôle et d'être capable de faire ce qu'il veut quand il veut. Cela signifie qu'en règle générale vous devez éviter les fenêtres modales ; les utilisateurs doivent être capables de basculer entre différentes tâches (et plus particulièrement, différentes fenêtres) à tout moment. Consultez la pour plus d'informations sur les fenêtres modales.

L'utilisateur doit également être capable de personnaliser l'aspect de son environnement pour satisfaire ses préférences personnelles. Il est très important cependant d'éviter le piège d'autoriser trop de possibilités de configuration ou d'autoriser la configuration de paramètres que la plupart des utilisateurs ne comprendront pas ou ne trouveront pas utiles de modifier. Quand c'est possible, essayez de dériver les paramètres visuels et comportementaux des réglages et préférences globales tels que le thème GTK+ actuel.

### Pardonner à l'utilisateur

Nous faisons tous des erreurs. Soit nous explorons et apprenons comment utiliser le système, soit nous sommes des experts qui tapons tout simplement sur la mauvaise touche, nous ne sommes que des hommes. Votre application doit par conséquent permettre à l'utilisateur d'annuler rapidement le résultat de ses actions.

Si une action est très dangereuse et qu'il n'y a aucun moyen d'annuler le résultat, avertissez l'utilisateur et demandez confirmation. Ne faites cela qu'en cas extrême ; si les utilisateurs sont fréquemment confrontés à de tels messages de confirmation, les utilisateurs commencent à les ignorer ce qui les rend pires qu'inutiles.

Dans tous les cas, le travail de l'utilisateur est sacrosaint. L'application ne doit rien faire qui puisse entraîner la perte ou la destruction du travail de l'utilisateur sans une action explicite de ce dernier. Entre autres techniques, cela peut être obtenu en faisant automatiquement des sauvegardes des documents et en permettant de nombreux niveaux d'annulation.

### Permettre des manipulations directes

À chaque fois que c'est possible, permettez à l'utilisateur d'agir sur les objets et les données directement plutôt qu'à travers des boîtes de dialogue ou des commandes explicites. Par exemple, il est plus intuitif de déplacer un cercle dans un diagramme plutôt que de choisir une commande « Déplacer » dans un menu alors que le cercle est sélectionné. De la même façon, dans une application de courriels, permettez à l'utilisateur d'attacher des fichiers en les déplaçant à partir d'un gestionnaire de fichiers dans la fenêtre de composition du message, s'il le souhaite.

Consultez le pour plus d'informations sur les manipulations directes.

## Intégration au bureau

Il y a deux aspects concernant l'intégration de base dans l'environnement de l'utilisateur du bureau GNOME.

1. placez une entrée pour votre application dans le menu Applications. C'est le mécanisme principal de découverte et de lancement des applications par l'utilisateur,

2. si votre application peut ouvrir et enregistrer des fichiers, écrivez des entrées pour ces types de fichiers dans la base de données des applications et celle des types MIME de documents. Cela permet au gestionnaire de fichiers et aux autres applications de lancer automatiquement votre application lorsqu'ils rencontrent des fichiers que votre application prend en charge.

N'ajoutez pas de lanceurs ou d'autres icônes sur le bureau lorsque votre application est installée. Le bureau est le domaine de l'utilisateur et est réservé aux icônes qu'il a explicitement demandées ou ajoutées lui-même.

### Mise en place d'entrées dans le menu Applications

#### Le menu Applications

Capture d'écran du menu Applications du tableau de bord des menus GNOME

Le menu Applications, qui apparaît par défaut sur le tableau de bord en haut de l'écran, est le mécanisme principal de découverte et de lancement des applications par l'utilisateur. Vous placez des entrées dans ce menu en installant un fichier `.desktop` approprié.

Le menu est arrangé par ensembles de catégories, tels que Accessoires et Jeux. Les applications sont placées dans des catégories données grâce à un ensemble de mots-clés inclus dans le fichier `.desktop`.

#### Conseils

- n'attribuez votre application qu'à une seule catégorie du menu Applications,

- pour les suites d'applications, qui contiennent de nombreuses sous-applications plus petites dans une fenêtre unique, telles que Evolution ou OpenOffice.org, ajoutez un élément de menu pour chaque sous-application. Par exemple, le courriel, le calendrier, la liste des tâches dans Evolution devraient posséder leur propre élément de menu.

Des détails techniques sont disponibles dans les spécifications de freedesktop.org pour les menus et les entrées de bureau.

#### Noms des éléments de menu

##### Inclusion d'une description fonctionnelle dans le nom d'un élément de menu

Dans le nom d'un élément de menu, outre le nom correct de l'application, incorporez une description des fonctionnalités. La chose est particulièrement utile aux utilisateurs novices et aux utilisateurs de systèmes où de nombreuses applications sont installées par défaut. Les utilisateurs trouveront plus facilement une application si le nom qui apparaît dans le menu inclut une description de ses fonctionnalités.

Par exemple, les utilisateurs testeurs du système Athena du MIT nous ont appris que les utilisateurs ont eu du mal à trouver le gestionnaire de fichiers parce qu'ils n'étaient pas familiers avec le nom « Nautilus ». Parce que les utilisateurs n'ont pas fait l'association entre le mot « Nautilus » et le concept de « gestionnaire de fichiers », l'élément de menu ne les a pas aidés. C'est un exemple de non-utilisation du langage utilisateur. Lisez la pour en savoir plus sur ce sujet.

###### Inclusion d'une description fonctionnelle dans les noms de menu

Élément de menu initial | Élément de menu révisé
--- | ---
Epiphany | Navigateur Web Epiphany

##### Inclusion des seules informations utiles dans le nom des éléments de menu

Ne mettez pas des mots comme « GNOME », « Système X Window », « GTK+ » ou autres détails de plateformes dans les noms des éléments du menu Applications. L'utilisateur connait probablement déjà la plateforme qu'il utilise et dans le cas contraire le nom des applications n'est pas un bon endroit pour le renseigner.

###### Suppression des informations non essentielles du nom des éléments de menu

Élément de menu initial | Élément de menu révisé
--- | ---
Visionneur d'images GNOME | Visionneur d'images
Éditeur de blog GTK | Éditeur de blog

N'ajoutez pas de détails techniques quand l'utilisateur n'a pas besoin de les connaître ou bien lorsqu'il peut les déduire du contexte. Évitez le jargon technique à moins que l'application ne soit conçue que pour être utilisée par un public de techniciens.

Par exemple, lorsqu'un client et un serveur pour quelque chose sont affichés tous deux dans les menus, supprimez le mot « client » du nom du menu pour le client.

###### Suppression du jargon technique des noms de menu

Élément de menu initial | Élément de menu révisé
--- | ---
Client Bataille navale GNOME | Bataille navale
Serveur Bataille navale GNOME | Serveur multi-joueurs Bataille navale
Client VideoLAN GNOME | Lecteur vidéo VideoLAN

###### Fournir la bonne information

Essayez d'imaginer quels sont les mots que les utilisateurs vont rechercher lorsqu'ils choisissent une application dans le menu Applications. C'est cette information qui doit être dans le nom de menu. Par exemple, un utilisateur qui désire regarder un film ne cherchera probablement pas le mot « client ». D'autre part, un utilisateur qui veut transmettre des films à partir de son ordinateur risque bien de chercher le mot « serveur ». Évitez de pensez au menu d'une application comme à une ontologie !

##### Formats du nom des éléments de menu

1. Si le nom propre de votre application décrit déjà ses fonctionnalités, mais pas uniquement de manière allusive, utilisez le format : Nom de l'application

   ###### Utilisation du nom de l'application comme nom de menu

   Nom de l'application | Nom du menu
   --- | ---
   Dictionnaire | Dictionnaire
   Outil de recherche | Outil de recherche

2. Si une brève description fonctionnelle de votre application existe, utilisez le format : NomApplication DescriptionFonctionnelle

   ###### Utilisation d'une description fonctionnelle comme nom de menu

   Nom de l'application | Nom de l'élément de menu
   --- | ---
   The GIMP | Éditeur d'image GIMP
   Sous-application de courriel Evolution | Messagerie d'Evolution
   AbiWord | Traitement de texte AbiWord
   Galeon | Navigateur Web Galeon
   Gramps | Généalogie Gramps
   AisleRiot | Solitaire AisleRiot

3. Quelques applications, en particulier les jeux, n'ont pas de description fonctionnelle appropriée (mais notez que beaucoup de jeux en ont une). Dans ce cas, utilisez le nom de l'application comme nom de menu.

   ###### Utilisation du nom de l'application quand aucune description fonctionnelle n'existe

   Nom de l'application | Nom de l'élément de menu
   --- | ---
   Bomber Maze | Bomber Maze

#### Infobulles d'élément de menu

L'aide des infobulles fournit aux utilisateurs assez d'informations pour lancer la bonne application. Beaucoup d'utilisateurs utilisent les infobulles pour parcourir un nouvel environnement.

Prévoyez une infobulle pour chaque élément ajouté au menu Applications en suivant ces conseils :

##### Conseils

- formulez le texte de l'infobulle à l'aide d'un verbe à l'impératif en anglais (mais à l'infinitif en français), par exemple « concevoir », « écrire » ou « vérifier »,

- décrivez les tâches les plus importantes que les utilisateurs pourront réaliser avec l'application,

- les infobulles ne doivent pas être verbeuses, mais elles doivent être plus longues et plus descriptives que le nom de l'élément.

##### Exemples d'infobulles pour des applications GNOME

Application | Infobulle de l'élément de menu
--- | ---
Table de caractères | Insérer des caractères spéciaux dans vos documents
Memprof | Vérifier les faiblesses mémoire de vos applications
Same Gnome | Vider l'écran en supprimant des groupes de billes de même couleur
Client Bataille navale GNOME | Chercher et couler les bateaux ennemis dans cette version réseau de Battleship

### Clés GConf

Chaque clé GConf doit posséder une description longue et une description courte. De nombreuses clés ne sont pas interfacées par les applications, donc pour quelqu'un qui gère les valeurs des clés via une autre application, chaque champ de description est la seule interface disponible.

#### Conseils

- La description courte doit être courte, moins de 8 mots ; elle décrit le but de la clé.

- La description longue doit donner toutes les valeurs possibles de la clé ainsi que les effets de ces valeurs sur l'application.

#### Exemples de descriptions de clés GConf de gnome-terminal

Clé/Touche | Description courte | Description longue
--- | --- | ---
background_type | Type d'arrière-plan | Type d'arrière-plan du terminal. Les valeurs possibles sont « solid » pour une couleur uniforme, « image » pour une image ou « transparent » pour la pseudo-transparence.
delete_binding | Effet de la touche Suppr. | Indique le code généré par la touche « Suppr. ». Les valeurs possibles sont « ascii-del » (caractère ASCII DEL), « control-h » (Ctrl-H, c'est à dire le caractère ASCII BS) et « escape-sequence » (séquence d'échappement usuelle liée à « retour arrière » ou à « suppr. »). La valeur normale est « escape-sequence ».

### Correspondance entre types de documents et applications

La base de données des types de document (MIME) permet aux utilisateurs d'indiquer leurs applications préférées pour l'ouverture des différents types de document. C'est par ce mécanisme que Nautilus, Evolution et les autres applications décident quelle application lancer lorsqu'elles rencontrent un document qu'elles ne peuvent pas ouvrir elles-mêmes.

Il est important pour les utilisateurs d'avoir la possibilité de double-cliquer sur les documents qu'ils voient sur le bureau, tels que fichiers, messages électroniques, pour les ouvrir dans leur application favorite. Par conséquent, au moment de l'installation, votre application GNOME devra être associée à tous les types de document qu'elle peut prendre en charge. Les détails techniques pour réaliser cette liaison peuvent être obtenus dans la référence API GnomeVFS.

### Utilisation de la zone de notification d'état

En utilisant la zone de notification d'état, les applications peuvent informer l'utilisateur d'évènements non-critiques (par exemple, l'arrivée d'un nouveau courriel ou un « copain » de discussion qui vient de se connecter) et afficher l'état des processus actifs du système (par exemple, un document en cours d'impression ou une batterie de portable en charge).

Suivre les conseils de cette section vous aidera à éclairer l'esprit des utilisateurs sur la différence entre « informations présentées dans la zone de notification » et « informations et contrôles présentés ailleurs dans le tableau de bord ».

L'utilité de la zone de notification diminue rapidement si plus de quatre icônes environ y sont présentes en permanence. Pour cette raison, il faut préférer des icônes qui apparaissent seulement temporairement en réponse à des évènements.

#### Zone de notification ou applet du tableau de bord ?

Vous devriez probablement écrire une applet plutôt qu'utiliser la zone de notification si :

- un clic sur l'icône de la zone de notification ne fait rien d'autre d'ouvrir une fenêtre associée directement à l'icône (par ex. une fenêtre d'un dossier de courriel pour une icône de nouveau courriel ou une fenêtre de file d'impression pour une icône de notification d'imprimante) ou si

- il y a des options spécifiques à l'icône dans son menu contextuel pour faire n'importe quoi d'autre que cela ou si

- votre application n'a jamais besoin d'afficher plus d'une icône de notification en même temps.

#### Apparence de l'icône

##### Conseils

- Utilisez un effet de perspective d'objets sur une table pour les icônes représentant des périphériques physiques, avec la source de lumière au dessus et à gauche de l'objet représenté. Par exemple, une icône d'imprimante pendant l'impression. Consultez la pour plus d'informations sur la perspective sur table.

- Utilisez un effet de perspective à plat, avec éclairage par dessus, pour toutes les autres icônes. Par exemple, une enveloppe affichée lorsqu'un nouveau courriel arrive. Consultez la pour plus d'informations sur la perspective à plat.

- Pour des contrôleurs ou des barres de progression qui évoluent au cours du temps, tel qu'un contrôleur de charge de batterie, délimitez clairement la zone.

##### Conseils

- Seuls les programmes du noyau GNOME peuvent afficher de manière permanente une icône dans la zone d'état.

- Les programmes ne faisant pas partie du noyau pour lesquels une icône permanente pourrait être utile, ne doivent pas, par défaut, afficher d'icône permanente. Les utilisateurs peuvent choisir d'activer une icône permanente pour l'application en tant que préférence.

#### Animation

##### Conseils

- Les icônes ne doivent normalement pas être animées. Elles peuvent être modifiées pour indiquer un changement d'état, mais il ne faut pas le faire si cette modification est régulière et rapide. Un contrôleur d'état de batterie évolue normalement lentement, par conséquent une icône est appropriée. Au contraire, un analyseur de charge change constamment, par conséquent il doit utiliser une image fixe.

- Aucune icône ne doit clignoter pour indiquer une erreur eu égard aux alertes. Par exemple, une icône d'impression en cours peut clignoter lorsqu'il y a un bourrage papier, mais pas quand l'imprimante est en feu - cela devrait déclencher l'affichage d'une alerte.

- Ne prévoyez pas des clignotements ou des animations comme moyens d'alerte de l'utilisateur pour n'importe quel évènement particulier.

#### Interaction

Les icônes doivent répondre aux actions suivantes de l'utilisateur (les appuis sur les touches du clavier n'ont d'effet que si l'icône possède le focus, bien sûr).

##### Conseils

- Un double-clic ou un appui sur la barre d'espace doit lancer l'action par défaut de l'icône. Normalement, cela doit ouvrir une fenêtre contenant les données pertinentes, par exemple :

  - la file d'attente pour une icône d'impression en cours,

  - la boîte de réception pour une icône d'arrivée de courriels,

  - le message pour l'arrivée d'un message.

- Un clic à droite ou un appui sur Maj F10 doit afficher le menu contextuel de l'icône ; il comporte a minima l'action par défaut de l'icône.

- Si les propriétés de l'icône peuvent être modifiées, il doit y avoir un élément de menu Propriétés dans son menu et la fenêtre des propriétés doit s'afficher en réponse à Alt+Entrée.

- Les icônes doivent obéir aux conventions habituelles des infobulles.

## Fenêtres

### Composants des fenêtres et interactions avec le système

#### Titres

Donnez un titre à chaque fenêtre (à l'exception des alertes et des boîtes à outils). Un bon titre de fenêtre contient une information pertinente pour l'utilisateur et permet de distinguer une fenêtre particulière des autres fenêtres ouvertes. Ne mettez pas d'information qui n'aiderait pas à faire ce choix, par exemple le numéro de version de l'application ou le nom du fournisseur.

##### Exemple de titre de fenêtre

Capture d'écran affichant la barre titre d'une fenêtre intitulée « Composants des fenêtres et interaction avec le système - Mozilla Firefox »

Consultez la description des formats de titre pour chaque type particulier de fenêtre.

#### Encadrements et commandes de fenêtre

La plupart des fenêtres possèdent un cadre, sauf certaines fenêtres mises en forme et certaines fenêtres détachées (torn-off). N'essayez pas de dessiner vos propres cadres de fenêtre, mais au contraire indiquez au gestionnaire de fenêtre le type de cadre souhaité.

Chaque type de fenêtre dispose de commandes appropriées. Consultez la description de chaque type particulier de fenêtre pour obtenir la liste des commandes de fenêtre en relation. Voici les commandes de fenêtre possibles :

- ##### Fermeture

  Ferme la fenêtre. Représentez-la toujours sous forme d'un bouton en bord de fenêtre, si cela correspond au type de la fenêtre.

- ##### Maximisation

  Agrandit la fenêtre de façon à ce qu'elle occupe tout l'espace libre de l'écran.

- ##### Minimisation

  Masque temporairement la fenêtre. Elle continue à apparaître dans la liste des fenêtres du bureau.

- ##### Enrouler/Dérouler

  N'affiche que la barre de titre de la fenêtre comme si elle avait été « enroulée ».

#### Modalité

Une fenêtre non modale n'interdit en aucune façon l'interaction de l'utilisateur avec les autres fenêtres ouvertes du bureau. L'utilisation de fenêtres non-modales offre à l'utilisateur la souplesse maximale pour réaliser des tâches dans l'application dans n'importe quel ordre et de la façon qu'il veut.

Une fenêtre modale applicative, tant qu'elle est ouverte, empêche l'utilisateur d'interagir avec les autres fenêtres de la même application.

Une fenêtre modale système, tant qu'elle est ouverte, empêche l'utilisateur d'interagir avec n'importe quelle autre fenêtre de n'importe quelle application, dont le bureau lui-même.

##### Conseils

- N'utilisez de fenêtre modale applicative que si l'autorisation d'interagir avec d'autres parties de l'application pendant que la fenêtre est ouverte risque de provoquer des pertes de données ou d'autres problèmes sérieux. Proposez une façon claire de quitter la fenêtre modale comme un bouton Annuler dans une alerte.

- N'utilisez pas de fenêtre modale système.

#### Focus

Le focus est le moyen utilisé par l'utilisateur pour indiquer la fenêtre qui doit recevoir les données du clavier, de la souris ou d'autres périphériques d'entrée. Si vous utilisez un lecteur d'écran ou d'autres outils d'accessibilité, le focus peut également indiquer la fenêtre dont l'utilisateur veut recevoir de l'information. La fenêtre qui a le focus est considérée comme la fenêtre dans laquelle l'utilisateur « travaille » actuellement.

Assurez-vous que votre application réagit correctement aux trois mécanismes différents par lesquels les fenêtres peuvent recevoir le focus dans GNOME :

- ##### Cliquer pour recevoir le focus (click-to-focus)

  Une fenêtre reçoit le focus si vous cliquez dessus.

- ##### Pointer pour recevoir le focus (point-to-focus)

  Une fenêtre reçoit le focus lorsque le pointeur de la souris se trouve au dessus d'elle. Parfois connu sous le nom de « sloppy focus ».

- ##### Focus au clavier (keyboard focus)

  Une fenêtre reçoit le focus à l'aide d'un raccourci clavier tel que Alt Tab.

##### Restrictions spéciales pour « point to focus »

Notez que « point-to-focus » impose un grand nombre de restrictions pour les applications GNOME, restrictions qui n'existent pas dans des environnements tel que MacOS ou Windows. Par exemple, des fenêtres d'utilitaires partagées par plusieurs fenêtres de documents, comme les boîtes à outils de l'éditeur d'image GIMP, ne peuvent pas être sensibles au contexte — ainsi, elles ne peuvent pas initier une action comme Enregistrer le document actuel. En déplaçant la souris du document actuel à la fenêtre utilitaire, l'utilisateur pourrait par inadvertance déplacer le pointeur sur une autre fenêtre de document, par conséquent changer le focus et peut-être enregistrer le mauvais document.

#### Affichage et masquage des fenêtres

La façon dont votre application affiche ou masque les fenêtres peut grandement affecter la perception de votre application par l'utilisateur, plus particulièrement de ses performances.

##### Conseils

- Affichez toujours une fenêtre dès que possible mais vérifiez bien que votre fenêtre possède la bonne taille avant de l'afficher. Redimensionner une fenêtre une fois qu'elle est visible, désoriente et donne un aspect brouillon à votre application.

- Si une fenêtre contient des informations qui prennent quelques secondes à calculer et à afficher, il est souvent mieux de ne pas la remplir complètement avant de commencer à l'afficher. Par exemple, une fenêtre destinée à contenir une grande zone de texte peut être affichée rapidement, et ensuite le texte inséré après coup (à condition que cela ne provoque pas un redimensionnement de la fenêtre). Cela donnera l'impression que votre application est plus réactive que si vous n'affichez pas la fenêtre avant qu'elle ne soit complètement remplie.

- Masquez une fenêtre le plus rapidement possible après sa fermeture. À moins qu'un message d'avertissement ne soit affiché, masquez immédiatement une fenêtre que l'utilisateur a fermée en cliquant sur le bouton Fermer en bordure de la fenêtre ; votre application peut continuer à réaliser des opérations internes de nettoyage par la suite. En plus de donner l'apparence que le système est lent, ne pas faire cela peut donner l'impression au gestionnaire de fenêtres que l'application ne répond plus et provoquer l'affichage d'une fenêtre d'avertissement inutile pour l'utilisateur.

### Fenêtres principales

Une fenêtre principale présente habituellement une vue des données de l'utilisateur, tel que le document texte dans une application de traitement de texte, une image dans un programme de dessin ou des calculs dans un tableur ou une calculatrice. Cela peut également être une vue de quelque chose plus abstrait, comme un jeu. Une instance unique d'une application peut posséder plus d'une fenêtre principale et plus d'un type de fenêtre principale.

Une fenêtre principale apparaît toujours dans la liste des fenêtres du tableau de bord.

#### Une fenêtre principale classique (gedit)

Une fenêtre principale classique : affichage d'un document gedit

Une fenêtre principale d'application possède normalement un encadrement, une barre de menu et peut également contenir une ou plusieurs barres d'outils.

#### Titre

L'élément le plus important dans le titre d'une fenêtre d'une application basée sur des documents est le nom du document ouvert. Pour les autres applications, c'est généralement le nom de l'application.

##### Conseils

- Utilisez le nom du fichier comme titre de fenêtre pour les applications basées sur des documents. N'utilisez pas le chemin complet car le nom du fichier seul est plus facile à distinguer parmi les titres des autres fenêtres ouvertes, par exemple dans la liste des fenêtres.

  ##### Utilisation des noms de documents comme titres de fenêtre

  Application | Exemple de titre de fenêtre
  --- | ---
  AbiWord | Mon rapport.abw
  Evolution | Boîte de réception
  Lecteur de musique | Téléphone - Dure limite

  Si le chemin est important, par exemple si l'utilisateur a ouvert deux documents portant le même nom dans des répertoires différents dans la même application, affichez le nom complet dans la barre d'état.

- Avant qu'un document ne soit enregistré pour la première fois, paramétrez le titre de la fenêtre à <Type de document> non enregistré. Par exemple, Dessin non enregistré, Feuille de calcul non enregistré ou de manière plus générique Document non enregistré.

- Lorsqu'un document possède des modifications non enregistrées, insérez un astérisque (*) au début du titre de la fenêtre. Par exemple, *Dessin non enregistré, *Rapport Annuel

- Pour une application non basée sur des documents, utilisez le nom de l'application comme titre de fenêtre.

  ##### Utilisation des noms d'applications comme titre de fenêtre

  Application | Titre de fenêtre
  --- | ---
  Dictionnaire | Dictionnaire
  Calculatrice | Calculatrice

- Ne mettez pas de numéros de version, noms de société ou d'autres informations qui ne sont pas immédiatement utiles à l'utilisateur dans le titre de la fenêtre. Cela prend de la place, rend les titres dans un espace limité tel que la liste des fenêtres du système moins lisibles et ajoute du texte supplémentaire que l'utilisateur doit parcourir pour trouver l'information utile. Dans une version « bêta » où les numéros de version sont critiques pour les informations de bogues, mettre des numéros de version peut être utile, mais retirez-les dans les versions stables. Placez plutôt les informations de version dans la boîte de dialogue « À propos ».

Bien que les noms de document soient les plus pertinents pour les utilisateurs, nous comprenons que les développeurs d'applications souhaitent augmenter la visibilité de leur application. Si vous avez l'intention d'ajouter le nom de votre programme dans le titre de la fenêtre principale, utilisez le format suivant : Nom du document - Nom de l'application. Cela permet de s'assurer que le nom du document restera visible dans les cas où l'espace est limité, comme la liste des fenêtres du système.

Inclure le nom de l'application dans le titre d'une application basée sur des documents n'est pas recommandé.

Quand vous donnez un nom à vos fenêtres, placez-vous dans le contexte de la liste des fenêtres du tableau de bord. Sur un écran classique avec un nombre relativement petit de fenêtres ouvertes, une fenêtre disposera de 20-30 caractères de texte et d'une icône. Pensez au texte qui donnera le plus rapidement des indices parlants à un utilisateur qui rechercherait une fenêtre donnée.

#### Commandes de fenêtre

Fermer, maximiser/restaurer, minimiser, enrouler/dérouler

#### Relation entre les documents et les fenêtres

##### Interface à document unique (SDI)

Une interface à document unique place chaque document dans sa propre fenêtre principale. Les boîtes à outils et autres fenêtres utilitaires peuvent être partagées entre plusieurs documents d'interface SDI mais leur fermeture ne doit pas avoir d'effet sur les fenêtres de document. Utilisez des interfaces SDI pour vos applications GNOME à moins qu'il y ait une raison valable de ne pas le faire.

###### Une application typique SDI (Eye of GNOME)

Une application typique SDI : Eye of GNOME affichant une icône

##### Interface à plusieurs documents (MDI)

Une interface à documents multiples affiche une représentation de chacun d'entre eux dans un panneau, sous un onglet ou quelque chose de similaire dans une fenêtre unique.

###### Une application MDI typique (gedit) affichant trois documents ouverts dans des onglets

Une application MDI typique : gedit avec trois documents ouverts dans une même fenêtre

Les interfaces MDI présentent plusieurs problèmes d'ergonomie sous-jacents, donc nous déconseillons leur utilisation dans les applications. Il est préférable d'ouvrir chaque document dans une nouvelle fenêtre principale, avec sa propre barre de menu, ses barres d'outils et sa barre d'état ou d'autoriser le lancement simultané de plusieurs instances de l'application. Dans l'un ou l'autre cas, le gestionnaire de fenêtres (en agissant sur les préférences de l'utilisateur) décidera à la place de votre application de la manière de regrouper et présenter les fenêtres des documents d'une même application.

##### Interface à document unique contrôlé (CSDI)

Dans une application SDI type, les fenêtres document sont traitées en tant que fenêtres principales. Par exemple, quand l'ensemble des fenêtres document ont été fermées, l'application (y compris les fenêtres utilitaires) se ferment également. Dans une interface CSDI, une fenêtre utilitaire est considérée comme fenêtre principale. Par exemple, la fermeture de cette fenêtre utilitaire ferme toutes les fenêtres document et quitte l'application.

L'utilisation d'interface CSDI n'est pas recommandée.

Les interfaces CSDI sont parfois utilisées parce que les fenêtres document sont trop petites pour posséder des barres de menu. Ce n'est habituellement pas le cas normal d'utilisation des applications, mais cela pourrait représenter une minorité non négligeable. Par exemple, si un éditeur d'image est utilisé pour modifier les petits éléments graphiques d'une page Web, il pourrait souvent en résulter de très petites fenêtres document qui ne peuvent même pas être accompagnées d'une barre de titre.

Le meilleur moyen pour résoudre ce problème est de permettre aux éléments de barres de menus de se « rassembler » dans un bouton de dépassement, tout comme les boutons de barres d'outils font lorsque la largeur de la fenêtre est trop petite pour accueillir tous les boutons de la barre d'outils. Cela autorise les petites fenêtres tout en suggérant à l'utilisateur l'endroit où ont été rangés les éléments de menu.

Notez que si votre application a comme principale utilisation le traitement de tous petits éléments, vous devriez rechercher un moyen d'éviter complètement les fenêtres. La fenêtre n'est pas l'interface efficace pour traiter un grand nombre de petits éléments. Pensez à rechercher un système d'agencement fixe ou automatique de présentation des « documents ». Considérez également que, si les « documents » étaient regroupés dans une entité de plus haut niveau, ce regroupement pourrait dans ce cas devenir le document.

### Fenêtres utilitaires

Les fenêtres utilitaires, telles que les palettes et les boîtes à outils, possèdent normalement des encadrements. Elles ne contiennent ni barre de menus, ni barre d'outils, ni barre d'état.

Une fenêtre utilitaire ne doit pas apparaître dans la liste des fenêtres du tableau de bord à moins que ce ne soit la seule fenêtre affichée par l'application. Par contre, la fenêtre utilitaire doit apparaître au dessus de l'application lorsque la fenêtre de l'application est elle-même sélectionnée parmi la liste des fenêtres.

#### Fenêtres à application immédiate

Pour les fenêtres permettant à l'utilisateur de modifier des valeurs ou des réglages, telles que les fenêtres de propriétés ou de préférences, mettez à jour ces valeurs ou réglages immédiatement pour refléter les modifications dans la fenêtre. Ce fait est connu en anglais sous le terme « instant apply (application immédiate) ». N'obligez pas l'utilisateur à cliquer sur un bouton Valider ou Appliquer pour rendre les modifications effectives à moins que :

- les modifications ne prennent plus d'une seconde à s'exécuter, car, dans ce cas, l'application des modifications pourrait donner l'impression que le système est lent ou ne répond pas,

- les modifications de la fenêtre doivent être appliquées simultanément pour éviter que le système n'entre potentiellement dans un état instable. Par exemple, les champs de nom d'hôte et de serveur mandataire dans une fenêtre des propriétés de réseau.

Si l'une ou l'autre de ces conditions n'affectent qu'un nombre limité de contrôles dans la fenêtre, rassemblez ces contrôles dans un ou plusieurs groupes, chacun d'entre eux possédant son propre bouton Appliquer. Laissez le reste des autres contrôles en application immédiate.

##### Conseils

- N'essayez pas de valider ou d'appliquer les changements résultant des modifications d'un contrôle de saisie avant que l'utilisateur n'ait déplacé le focus vers un autre contrôle de la fenêtre ou bien que la fenêtre ne soit fermée. Une validation après chaque appui sur une touche est généralement agaçante et inutile. Une exception : si le champ n'accepte qu'un nombre fixé de caractères, comme un code hexadécimal de couleur, validez et appliquez la modification dès que le nombre correct de caractères a été saisi.

- Lorsque l'utilisateur déplace le focus vers un autre contrôle, n'indiquez pas une entrée non valide en affichant un message d'avertissement ou en annulant la modification que l'utilisateur a effectuée. Ces deux façons de faire sont particulièrement perturbantes pour les utilisateurs qui utilisent le focus sous le pointeur ; pour ces utilisateurs, le focus peut quitter le contrôle plus souvent que dans le cas d'un utilisateur qui clique pour recevoir le focus.

#### Fenêtres à application explicite

Si la plupart des contrôles de votre fenêtre ne sont pas adaptés à une application immédiate, songez à rendre la totalité de la fenêtre à « application explicite ». Une fenêtre à application explicite dispose de trois boutons dans sa boîte de groupement, plus en option le bouton Aide :

- ##### Appliquer

  Applique tous les réglages de la fenêtre, mais ne la ferme pas au cas où l'utilisateur souhaiterait changer d'avis.

- ##### Annuler

  Annule tous les réglages de la fenêtre et revient à ceux en cours lors de l'ouverture de la fenêtre. Remarque : cela doit annuler les effets de tous les clics sur le bouton Appliquer depuis l'ouverture de la fenêtre et non uniquement le plus récent.

- ##### Valider

  Applique tous les réglages de la fenêtre et ferme la fenêtre.

##### Boutons dans une fenêtre à application explicite

Capture d'écran affichant les positions correctes pour les boutons Aide, Appliquer, Annuler et Valider dans une boîte de dialogue

#### Boutons par défaut

Lorsque vous concevez une boîte de dialogue ou une fenêtre utilitaire, vous pouvez associer la touche Entrée à l'activation d'un bouton particulier de la fenêtre. GNOME indique ce bouton à l'utilisateur en dessinant une bordure différente autour de celui-ci. Par exemple le bouton Valider sur la figure .

Choisissez comme bouton par défaut celui qui correspond à l'action la plus probable, telle qu'une action de confirmation ou une action qui applique les modifications dans les fenêtres utilitaires. Ne choisissez pas comme bouton par défaut, un bouton dont l'action est irréversible, destructive ou bien inopportune pour l'utilisateur. Si aucun bouton n'est approprié dans votre fenêtre comme bouton par défaut, n'en paramétrez aucun.

En particulier, il n'est actuellement pas recommandé de paramétrer le bouton Fermer comme bouton par défaut dans une fenêtre à application immédiate ; cela pourrait amener les utilisateurs à fermer la fenêtre accidentellement avant d'avoir fini de l'utiliser.

#### Fenêtres Propriétés

Les fenêtres Propriétés permettent à l'utilisateur d'afficher et de modifier les caractéristiques d'un objet tel qu'un document, un fichier, un dessin ou un lanceur d'application.

##### Exemple de fenêtres de propriétés

Capture d'écran affichant la fenêtre « Propriétés de fichier » dans Nautilus

##### Format du titre :

Propriétés de nom de l'objet

##### Commandes de la fenêtre :

Fermer, minimiser, enrouler/dérouler

##### Boutons :

Placez un bouton Fermer dans l'angle inférieur droit. Il est possible de mettre un bouton Aide dans l'angle inférieur gauche.

#### Fenêtres Préférences

Les fenêtres Préférences permettent à l'utilisateur de modifier l'apparence d'une application ainsi que la façon dont elle se comporte.

##### Exemple d'une fenêtres préférences

Capture d'écran affichant la fenêtre Préférences de Gnibbles

##### Format du titre :

Préférences de nom de l'application

##### Commandes de la fenêtre :

Fermer, minimiser, enrouler/dérouler

##### Boutons :

Placez un bouton Fermer dans l'angle inférieur droit. Il est possible de mettre un bouton Aide dans l'angle inférieur gauche.

##### Personnalisation des polices et des couleurs

Si votre fenêtre préférences permet à l'utilisateur de personnaliser les polices et les couleurs, utilisez les termes et dispositions suivants comme guide pour ces contrôles :

###### Termes recommandés pour modifier des éléments du thème - à remplacer par une capture d'écran

    	(o) Utiliser la police du thème
    	(o) Utiliser cette police : [ Sélecteur de police ]

    	(o) Utiliser les couleurs du thème
    	(o) Utiliser ces couleurs :
    		Arrière-plan: [ Sélecteur de couleur ]
    		Couleur de police: [ Sélecteur de couleur ]

La terminologie des boutons radio peut être encore plus précise là où c'est requis, par exemple, « Utiliser la police à chasse fixe du thème » ou « Utiliser la couleur d'arrière-plan du thème ».

#### Boîtes à outils

Une boîte à outils fournit un accès pratique à un ensemble d'actions ou de bascules à travers un ensemble de petits boutons style barre à outils. Les boîtes à outils peuvent être utilisées pour fournir un regroupement spécialisé d'outils pour compléter une barre d'outils contenant des éléments plus généraux tels que des boutons Enregistrer et Ouvrir. Une boîte à outils peut être partagée entre plusieurs documents pour gagner de la place à l'écran.

##### Un exemple de boîte à outils

Une capture d'écran d'une boîte à outils contenant huit boutons rangés sur deux lignes

##### Format du titre :

Les boîtes à outils n'ont pas de titre

##### Commandes de la fenêtre :

Fermer, enrouler/dérouler

##### Boutons :

Les boîtes à outils n'ont pas de boutons

##### Redimensionnement :

Il faut que les boîtes à outils puissent être redimensionnées, mais uniquement par multiples entiers de la longueur des éléments de la boîte à outils. Autrement dit, l'utilisateur peut configurer la taille de la boîte à outils à un, deux ou trois éléments de large, etc. mais pas une fois et demie.

##### Conseils

- Ne mettez pas de boutons qui ouvrent une autre fenêtre dans une boîte à outils.

- Il est préférable d'utiliser les boîtes à outils pour des boutons de changement de mode, boutons qui modifient la nature de l'opération réalisable avec la souris dans le document, tel qu'un jeu de boutons pour sélectionner entre un pinceau, une gomme ou des modes de remplissage dans une application de dessin. Les boutons qui lancent des actions lorsqu'ils sont pressés (comme un bouton enregistrer) sont plus à leur place dans les barres d'outils.

- Assurez-vous que la fermeture d'une boîte à outils ne ferme ou ne modifie aucune des fenêtres principales auxquelles elle est associée.

- Ne placez pas les boîtes à outils dans la liste des fenêtres du système. Les boîtes à outils doivent toujours rester au dessus de toutes les fenêtres principales auxquelles elles sont associées.

- Si toutes les fenêtres principales associées à une boîte à outils sont fermées ou minimisées, masquez la boîte à outils également. Affichez la boîte à outils à nouveau dès qu'une des fenêtres principales est ouverte ou restaurée.

- Faites des boîtes à outils de deux éléments sur la largeur par défaut, excepté si elle est divisée en catégories ; dans ce dernier cas, faites des boîtes à outils de quatre éléments sur la largeur par défaut.

##### Boîte à outils à catégories

Même si les boîtes à outils à catégories ne sont pas visuellement aussi séduisantes qu'une boîte à outils remplie de manière homogène avec de belles icônes, elles facilitent la gestion des grosses boîtes à outils. Pointer sur une petite icône parmi plus de quinze autres éléments est une tâche difficile. De plus, les catégories permettent aux utilisateurs de masquer des groupes d'outils qui ne sont pas pertinents pour la tâche en cours.

###### Une grande boîte à outils divisée en catégories

###### Conseils

- Divisez en catégories les boîtes à outils qui possèdent plus de seize éléments. La meilleure taille pour une catégorie se situe entre quatre et dix éléments.

- Donnez à chaque catégorie une étiquette et une flèche d'enroulement/déroulement. En cliquant sur l'étiquette ou la flèche, les boutons de la catégorie sont alternativement masqués ou apparents.

### Alertes

Une alerte fournit des informations sur l'état de l'application ou demande des informations essentielles sur la manière de réaliser une tâche particulière. Elle se distingue des autres types de fenêtre par le fait qu'elle n'est pas directement demandée par l'utilisateur et qu'elle contient habituellement un message ou une question plutôt que des contrôles modifiables. Comme les alertes sont des intrusions importunes dans le travail de l'utilisateur, ne les utilisez pas à moins que cela ne soit nécessaire pour éviter des éventuelles pertes de données ou d'autres problèmes importants.

Une alerte possède une bordure similaire à celle d'une boîte de dialogue et est un objet modal.

Une alerte ne doit pas apparaître dans la liste des fenêtres du tableau de bord à moins qu'elle ne soit, ou puisse être, la seule fenêtre affichée par l'application. Par exemple, une alerte concernant un rappel de rendez-vous peut être affichée après que la fenêtre principale de l'application calendrier a été fermée.

De plus, une alerte doit apparaître au dessus de l'application lorsque la fenêtre de l'application elle-même est sélectionnée dans la liste des fenêtres.

#### Un exemple d'alerte

Un exemple d'alerte affichant le texte « Vous avez un rendez-vous avec George Wells dans 15 minutes » avec le bouton Valider pour fermer la fenêtre.

#### Format du titre

Les fenêtres d'alerte ne possèdent pas de titre car le titre ne ferait que dupliquer inutilement le texte principal de l'alerte. De cette manière, les utilisateurs peuvent lire et répondre à l'alerte plus rapidement car il y a moins de bruit visuel et de texte confus.

#### Redimensionnement

Les fenêtres d'alerte ne peuvent pas être redimensionnées. Si l'utilisateur a besoin de les redimensionner, c'est que le texte n'est probablement pas assez concis.

#### Commandes de la fenêtre :

Aucune

#### Les alertes doivent être disposées au dessus de leur parent

Les alertes n'apparaissent pas dans la liste des fenêtres du système. En conséquence, prenez bien soin de vérifier que les alertes sont au dessus de leur fenêtre parent. Sinon les utilisateurs perdront probablement l'alerte et trouveront que votre application ne répond plus sans raison apparente. Les fenêtres modales doivent toujours rester au dessus des fenêtres qu'elles bloquent.

#### Texte d'alerte

Une alerte peut contenir à la fois un texte principal et un texte secondaire. Le texte principal résume brièvement la situation. Le texte secondaire fournit des informations supplémentaires.

À la fois, le texte principal et le texte secondaire doivent pouvoir être sélectionnés. Cela facilite pour l'utilisateur la copie et le collage du texte dans une autre fenêtre telle qu'un message de courriel.

##### Positionnement du texte principal et secondaire

Capture d'écran d'une alerte affichant un exemple de texte principal en gras et de texte secondaire avec une police plus petite au dessous.

##### Texte principal

Le texte principal fournit à l'utilisateur en une seule phrase un résumé de l'information ou de l'action suggérée. Ce résumé doit contenir de manière concise les détails essentiels concernant le problème ou la suggestion. Toutes les alertes possèdent un texte principal, affiché avec une police grasse plus grande que celle par défaut. La ponctuation du texte principale est dans le style de celui d'un « titre de journal », c'est-à-dire, il ne possède pas de point terminal mais il peut se terminer par un point d'interrogation.

Marquez le texte principal avec la balise pango :

    <span weight="bold"
          size="larger">Texte principal</span>

##### Texte secondaire

Le texte secondaire fournit une description un peu plus approfondie du problème et de l'action suggérée, y compris les possibles effets collatéraux. Il peut également fournir des informations susceptibles d'aider l'utilisateur à prendre une décision de manière avertie. Dans la plupart des situations, l'utilisateur ne devrait avoir besoin que du texte principal pour prendre une décision rapide, mais il peut lire le texte secondaire s'il n'est pas sûr du moyen d'action correct ou s'il a besoin de détails supplémentaires. Le texte secondaire est optionnel mais, s'il est utilisé, positionnez-le à une distance égale à la hauteur d'une ligne en dessous du texte principal en utilisant la taille et la graisse de la police par défaut.

#### Boutons d'alerte

Placez dans toutes les alertes un bouton de confirmation qui ferme l'alerte et réalise l'action suggérée par le texte principal. Mettez un bouton Annuler pour toutes les alertes affichées en réponse aux actions de l'utilisateur, tel que Quitter. Si l'alerte concerne un problème technique ou autre situation qui pourrait provoquer des pertes d'informations, placez un bouton Aide donnant plus d'informations sur la situation particulière et expliquant les possibilités offertes à l'utilisateur. Vous pouvez également mettre des boutons pour réaliser des actions alternatives offrant des variantes possibles, résolvant des problèmes potentiels ou bien ouvrant des boîtes de dialogue ou des programmes en relation.

##### Ordre et positionnement des boutons pour les alertes

Capture d'écran affichant l'ordre et le positionnement des boutons pour les alertes : le bouton Aide en bas à gauche, les boutons Autres, Annuler et Affirmation en bas à droite.

##### Rédaction des intitulés de boutons

En anglais, rédigez les étiquettes de boutons avec des verbes à l'impératif, par exemple Save (Enregistrer), Print (Imprimer). Cela permet aux utilisateurs de choisir l'action avec moins d'hésitations. Également, la forme active, contrairement à la passive, est mieux adaptée au rôle du bouton qui est d'initier une action. Par exemple, Find (Chercher) et Log In (Se connecter) sont des boutons plus explicites que Yes (Oui) et OK (Valider).

- ##### Bouton de confirmation

  Placez le bouton de confirmation dans l'angle inférieur droit de l'alerte. Le bouton de confirmation accepte l'action proposée par l'alerte ou simplement ferme l'alerte si aucune action n'est suggérée (comme c'est le cas pour une alerte informative).

- ##### Bouton Annuler

  Si l'alerte a été provoquée en réponse à une action de l'utilisateur, placez un bouton Annuler immédiatement à la gauche du bouton de confirmation. Ce bouton d'annulation est un échappatoire pour les utilisateurs ; il permet de stopper l'action en réponse à une nouvelle information ou simplement en cas de clic accidentel. Un clic sur le bouton Annuler remet l'application dans l'état précédant l'action de l'utilisateur.

- ##### Bouton Aide

  Un bouton Aide peut s'utiliser pour expliciter les alertes qui avertissent d'options potentiellement destructrices. Placez le bouton Aide dans l'angle inférieur gauche de l'alerte. Lorsqu'il est cliqué, une fenêtre d'aide s'ouvre éclairant la situation, détaillant les actions inférées par les autres boutons et expliquant tout effet collatéral induit par chaque action.

- ##### Autres boutons

  Des boutons supplémentaires peuvent s'utiliser pour fournir une alternative à l'action principale proposée par le texte de l'alerte. Placez ces boutons à gauche du bouton Annuler ou du bouton de confirmation si le bouton Annuler n'existe pas. Un exemple trivial d'action alternative est donné par le bouton Quitter sans enregistrer dans une alerte de confirmation d'enregistrement. C'est une alternative à l'action principale suggérée Enregistrer et au bouton Annuler.

#### Espacement et positionnement dans les fenêtres d'alertes

L'utilisation d'un espacement clair et cohérent dans les alertes rend le message plus facile à comprendre et les réponses disponibles plus évidentes.

##### Espacement dans une fenêtre d'alerte

Diagramme affichant l'espacement correct à utiliser entre contrôles et boutons dans une fenêtre d'alerte. Ceci est détaillé dans les conseils ci-dessous.

##### Conseils

- La bordure sur les côtés de la fenêtre d'alerte, de même qu'espacement entre icône et texte, ont une largeur de 12 pixels.

- L'espacement horizontal entre boutons est de 6 pixels.

- Ajoutez un saut de ligne de la taille de la police standard au dessous à la fois du texte principal et du texte secondaire, ou bien de 24 pixels si vous utilisez Glade.

- Alignez le haut de l'icône avec le haut du texte principal.

- Alignez à gauche le texte du message pour les langues occidentales.

##### Détails techniques pour un agencement correct

Créez une nouvelle fenêtre GtkDialog en précisant le nombre de boutons que vous souhaitez que l'alerte contienne (et un bouton d'aide si nécessaire). L'objet GtkDialog contient un conteneur GtkVBox avec la ligne du haut vide et celle du bas contenant un objet GtkButtonBox contenant lui-même les boutons. Dans la partie vide du haut, placez un nouveau conteneur GtkHBox. Dans la colonne de gauche du GtkHBox, placez un objet GtkImage. Dans la colonne de droite du GtkHBox, placez un objet GtkLabel. À l'intérieur du GtkLabel, placez le texte principal d'abord (avec la balise Pango appropriée, consultez la ), puis deux retours à la ligne (Entrée), puis placez le texte secondaire. Ensuite modifiez les propriétés de chaque contrôle selon ce tableau :

##### Propriétés du GtkDialog

Propriété | Valeur
--- | ---
Titre | (aucun)
Largeur de bordure | 6
Type | Premier niveau
Redimensionnable | Non
Possède un séparateur | Non

##### Propriétés du GtkVBox (inclus par défaut dans la boîte de dialogue)

Propriété | Valeur
--- | ---
Espacement | 12

##### Propriétés du GtkHBox

Propriété | Valeur
--- | ---
Espacement | 12
Largeur de bordure | 6

##### Propriétés du GtkImage

Propriété | Valeur
--- | ---
Alignement Y | 0.00
Taille d'icône | Dialogue

##### Propriétés pour le GtkLabel

Propriété | Valeur
--- | ---
Utilisation de balise | Oui
Retour à la ligne du texte | Oui
Alignement Y | 0.00

#### Alertes informatives

Utilisez une alerte informative lorsque l'utilisateur doit prendre connaissance d'informations affichées avant de continuer ou lorsqu'il a précisément demandé des informations. Présentez les informations moins importantes par d'autres biais tels qu'un message de barre d'état.

##### Une alerte informative

##### Une alerte informative...

- utilise l'icône information de la collection (stock icon),

- présente un message qui peut être sélectionné et un bouton OK (Valider). Le bouton est placé dans le coin inférieur droite de l'alerte. Un appui sur Entrée ou Échap ferme l'alerte.

- peut être munie d'un bouton pratique qui donne accès à un objet pertinent. Par exemple, un bouton Détails dans une alerte de rappel de rendez-vous qui ouvre une fenêtre des caractéristiques du rendez-vous. Placez ce bouton à gauche du bouton de confirmation.

##### Commandes de la fenêtre :

Enrouler/Dérouler, Minimiser (si l'alerte ne possède pas de fenêtre parent), Fermer

#### Alertes d'erreur

Affichez une alerte d'erreur lorsqu'une opération demandée par l'utilisateur ne peut pas être réalisée avec succès. Présentez les erreurs causées par des opérations non demandées par l'utilisateur d'une autre manière à moins que l'erreur ne puisse provoquer des pertes de données ou d'autres problèmes sérieux. Par exemple, une erreur rencontrée pendant une vérification de présence de courriels initiée par l'utilisateur en cliquant un bouton de la barre d'outils doit être affichée à l'aide d'une alerte d'erreur. Cependant il est plus approprié de présenter une erreur rencontrée dans une vérification automatique et périodique du courriel par un message dans la barre d'état.

##### Une alerte d'erreur

##### Une alerte d'erreur...

- utilise l'icône erreur de la collection (stock icon),

- présente un message qui peut être sélectionné et un bouton OK (Valider). Le bouton est placé dans le coin inférieur droit de l'alerte. Un appui sur Entrée peut fermer l'alerte d'erreur.

- peut être muni d'un bouton pratique pour permettre la gestion immédiate de l'erreur. Par exemple, un bouton Format... dans une alerte « Le disque n'est pas formaté ». Placez ce bouton à gauche du bouton de confirmation.

##### Commandes de la fenêtre :

Enrouler/Dérouler

#### Alertes de confirmation

Présentez une alerte de confirmation lorsque la commande de l'utilisateur peut supprimer des données, créer un risque au niveau de la sécurité ou nécessiter plus de 30 secondes de travail de l'utilisateur pour retrouver l'état initial si la commande résulte d'une erreur.

##### Une alerte pour confirmation

##### Une alerte pour confirmation...

- utilise l'icône avertissement de la collection (stock icon),

- présente un message pouvant être sélectionné avec, soit un bouton étiqueté d'un verbe ou d'une phrase verbale décrivant l'action à confirmer, soit le bouton OK (Valider) si l'étiquette nécessite plus de trois mots. Ce bouton est placé dans l'angle inférieur droit de l'alerte.

- présente un bouton Annuler qui empêche l'exécution de la commande de l'utilisateur. Ce bouton est placé immédiatement à gauche du bouton OK (Valider) ou du bouton équivalent.

- peut présenter un bouton d'action alternative ou un bouton pratique. Positionnez ce bouton à gauche du bouton Cancel (Annuler).

##### Commandes de la fenêtre :

Enrouler/Dérouler

##### Alertes pour confirmation d'enregistrement

Les alertes pour confirmation d'enregistrement aident à s'assurer que les utilisateurs ne perdent pas les modifications de leur document lorsqu'ils ferment les applications. Cela rend l'opération de fermeture moins risquée.

###### Une alertes pour confirmation d'enregistrement

Alertes pour confirmation d'enregistrement : « [Fermer sans enregistrer] [Annuler] [Enregistrer] »

###### Texte principal

Enregistrer les modifications du document Nom du document avant de fermer ?

Vous pouvez remplacer document par une description plus exacte, par exemple image ou diagramme si le document en question n'est pas principalement du texte.

###### Texte secondaire

Si vous fermez sans enregistrer, les modifications effectuées lors de la dernière session seront définitivement perdues.

Le texte secondaire indique à l'utilisateur un contexte à propos des modifications qui pourraient être perdues.

###### Boutons

Fermer sans enregistrer, Annuler, Enregistrer

Lorsqu'une alerte de confirmation est nécessaire, affichez-la immédiatement. Si l'utilisateur confirme la fermeture sans enregistrement, masquez l'alerte et le document ou la fenêtre de l'application immédiatement avant de faire le ménage interne nécessaire. Si l'utilisateur choisit d'enregistrer avant de fermer, masquez l'alerte immédiatement, mais affichez la fenêtre du document jusqu'à ce que l'enregistrement soit terminé au cas où des erreurs apparaîtraient. Masquez la fenêtre du document immédiatement après qu'il a été enregistré avec succès.

#### Alertes d'authentification

Les alertes d'authentification demandent à l'utilisateur les informations nécessaires pour obtenir l'accès à des ressources protégées, telles que le nom d'utilisateur ou le mot de passe. Les alertes pour authentification sont un type spécial d'alerte : elles sont à la fois habituelles et grandement inévitables. Tout doit être tenté pour retenir aussi longtemps que possible les informations saisies dans une alerte d'authentification tout en respectant les contraintes de sécurité.

##### Une alerte d'authentification

##### Conseils

- Utilisez l'icône authentification de la collection (stock icon),

- Affichez un champ de saisie avec étiquette pour chaque élément d'information requis. Les champs suggérés sont Nom d'utilisateur et Mot de passe (dans cet ordre) si besoin.

- Si le fait de retenir le nom d'utilisateur plus longtemps que le mot de passe n'affecte pas la sécurité, pré-remplissez le champ nom d'utilisateur et donnez le focus au champ du mot de passe à l'affichage de l'alerte.

- Affichez, soit un bouton étiqueté à l'aide d'un verbe ou d'une phrase verbale décrivant l'action d'authentification, soit le bouton OK (Valider) s'il n'y a pas d'expression appropriée ou si la longueur de la phrase excède trois mots. Ce bouton est placé dans l'angle inférieur droit de l'alerte.

- N'activez pas le bouton Valider ou son équivalent tant que tous les champs requis ne sont pas saisis par l'utilisateur. Souvenez-vous cependant qu'il est possible que tous les champs ne soient pas nécessaires, par exemple un mot de passe vide peut être accepté dans certaines applications.

- Affichez un bouton Annuler qui empêche l'authentification et ferme l'alerte. Placez ce bouton immédiatement à gauche du bouton Valider ou de son équivalent.

- Placez tout bouton d'action alternative ou bouton pratique à gauche du bouton Annuler.

- Lorsque l'utilisateur appuie sur la touche Entrée dans le dernier champ, activez le bouton par défaut. Lorsque l'utilisateur appuie sur Entrée dans tout autre champ, placez le focus dans le champ suivant.

##### Commandes de la fenêtre :

Enrouler/Dérouler

### Fenêtres de progression

Une fenêtre de progression peut être utilisée pour donner un retour d'informations pendant une opération qui prend plus de quelques secondes. Consultez la pour plus de détails sur un usage correct des barres de progression.

Une fenêtre de progression doit toujours apparaître comme une fenêtre indépendante dans une liste de fenêtre. Si la progression d'une tâche rend une fenêtre temporairement inutilisable, ne présentez pas une fenêtre de progression de type boîte de dialogue modale au dessus d'elle. Affichez plutôt la progression quelque part dans la fenêtre originale en rendant tous ses autres éléments temporairement insensibles. Cela aide à réduire l'encombrement visuel.

#### Un exemple de fenêtre de progression

Un exemple de fenêtre de progression

#### Format du titre

Les fenêtres de progression doivent posséder un titre représentant l'opération complète : par exemple, Copie des fichiers, Installation ou Appel. Tout comme les autres titres de fenêtres, ne les terminez pas par des points de suspension.

#### Redimensionnement

Les fenêtres de progression peuvent être redimensionnables si elles contiennent des informations non statiques que l'utilisateur pourrait vouloir copier (par exemple, l'URL source d'une fenêtre de progression de téléchargement). Sinon elles ne doivent pas être redimensionnables.

#### Conseils

- Il est souvent préférable d'utiliser la barre de progression contenue dans beaucoup de barres d'état de fenêtres principales plutôt qu'une fenêtre de progression. Consultez la pour des détails sur le choix à faire.

- Les fenêtres de progression doivent utiliser texte principal et secondaire de la même façon qu'une alerte. Consultez la .

- Le texte de la barre de progression doit donner une idée de la quantité de travail déjà effectuée. Il est préférable de fournir une information précise plutôt qu'un pourcentage sans unités. Par exemple, « 13 sur 19 images pivotées » ou « 12,1 sur 30 Mio téléchargés » plutôt que « 13 % de réalisé ».

- Si possible, une estimation du temps restant avant que l'opération ne soit terminée, doit également être incluse dans le texte de la barre de progression. Indiquez que la « durée restante » est estimée en utilisant le mot « environ ».

- Immédiatement dessous la barre de progression, placez du texte en italique indiquant la sous-opération actuellement en cours. Cela peut être une étape d'une séquence « Connexion à la tour de contrôle pour obtenir la permission d'atterrir » ou cela peut être l'objet actuellement traité dans une opération volumineuse « Rotation de Monalisa.png », « Rotation de StarryNight.png ».

- Si l'opération en cours est potentiellement risquée (destructrice, coûteuse, etc.) ou charge lourdement une ressource limitée pendant plus de dix secondes (bande passante réseau, disque dur, CPU, etc.) pensez à placer un bouton bascule Pause à droite du bouton Annuler. Lors de la pause, le terme « (en pause) » doit être ajouté à la fin du texte de la sous-opération actuelle en italique. Cela permet aux utilisateurs de réaliser des tâches importantes nécessitant cette ressource ou de leur donner le temps de réfléchir s'ils veulent poursuivre une opération risquée déclenchée par inadvertance.

#### Une fenêtre de progression pour une opération de copie de fichier

Une fenêtre de progression pour une opération de copie

#### Fenêtres à liste de contrôle

Parfois, une procédure est composée d'une suite d'actions à réaliser par l'utilisateur. Dans ce cas, et plus particulièrement lorsqu'il est souhaitable que l'utilisateur devienne coutumier des actions concernant cette procédure, il peut être fait usage de fenêtres à liste de contrôle.

##### Assistant de configuration de pare-feu

Un assistant de configuration personnelle de pare-feu peut installer le paquet « firewall », ajouter des entrées pour le pare-feu dans /etc/xinetd.conf, redémarrer le super-démon internet et configurer le navigateur Web de l'utilisateur pour qu'il opère à travers le pare-feu. Il peut être souhaitable que l'utilisateur connaisse la série d'actions impliquées dans la configuration du pare-feu pour augmenter ses chances de réussite dans ce processus s'il veut opérer des modifications ultérieurement.

##### Une exemple de fenêtre à liste de contrôle (avant lancement)

Une fenêtre à liste de contrôle

##### Une exemple de fenêtre à liste de contrôle (progression en cours)

Une fenêtre à liste de contrôle

##### Un exemple de fenêtre à liste de contrôle (terminée)

Une fenêtre à liste de contrôle

##### Conseils

- Si la connaissance de la série d'étapes d'une opération n'est pas très utile à l'utilisateur, n'utilisez qu'une fenêtre de progression classique. Souvenez-vous que vous êtes probablement plus intéressé par ces informations que la plupart des utilisateurs, la plupart trouveront ces étapes techniques plus déroutantes qu'utiles.

- Contrairement aux fenêtres de progression classiques, les fenêtres à liste de contrôle ne doivent pas se fermer automatiquement lorsque l'opération est terminée et doivent avoir besoin d'entrées explicites de l'utilisateur avant de commencer car, l'un de leurs buts est l'information de l'utilisateur à propos des étapes constitutives de l'opération.

- La barre de progression indique la progression globale de l'opération et non pas de chaque étape. Bien que cela soit plus difficile à programmer, c'est l'information la plus utile à l'utilisateur. Estimez simplement la durée relative de chacune des étapes et attribuez-leur le quota fixe correspondant de progression dans l'avancement de la barre.

- N'utilisez pas de fenêtre à liste de contrôle pour une série d'étapes internes à la programmation, utilisez une fenêtre de progression classique. Par exemple « Connexion au serveur de courriel », « Authentification avec le serveur de courriel », « Téléchargement des messages », « Déconnexion » n'est pas une série appropriée d'étapes pour une fenêtre à liste de contrôle, mais serait une série appropriée d'étapes de sous-opérations pour une fenêtre de progression classique.

### Boîtes de dialogue

Une boîte de dialogue fournit un échange d'informations, ou dialogue, entre l'utilisateur et l'application. Utilisez une boîte de dialogue pour obtenir de la part de l'utilisateur des informations supplémentaires nécessaires à la réalisation d'une commande ou d'une tâche particulière.

Une boîte de dialogue ne doit pas apparaître dans la liste des fenêtres du tableau de bord. Toute boîte de dialogue doit apparaître au dessus de l'application lorsque la fenêtre de l'application elle-même est sélectionnée dans la liste des fenêtres.

#### Un exemple de boîte de dialogue

Un exemple de boîte de dialogue à onglets : la boîte de dialogue d'impression GNOME

#### Format du titre :

Nom de la commande qui ouvre la boîte de dialogue (sans points de suspension à la fin)

#### Commandes de la fenêtre :

Minimiser, enrouler/dérouler

#### Boutons :

Suivez les conseils donnés pour les boutons des alertes, consultez la .

Votre boîte de dialogue peut indiquer un bouton par défaut, c'est-à-dire activé lorsque l'utilisateur appuie sur la touche Entrée. Consultez la pour des conseils sur le choix approprié d'un bouton par défaut.

#### Boutons supplémentaires

Vous pouvez ajouter d'autres boutons dans la zone principale des boutons de la boîte de dialogue en plus du bouton de confirmation et du bouton Annuler, mais plus d'un ou deux boutons ajoutés rendront la boîte de dialogue compliquée et difficile à utiliser. Comme pour tous les autres boutons, utilisez des étiquettes aussi concises que possible pour minimiser ces effets.

##### Conseils

- Placez les boutons qui concernent l'ensemble de la boîte de dialogue dans la zone principale des boutons au bas de la boîte de dialogue, à gauche du bouton Annuler.

- Placez les boutons qui se rapportent à un ou plusieurs contrôles à côté des contrôles concernés. Par exemple, placez un bouton Rechercher... à la suite du champ texte qu'il contrôle.

#### Agencement

Un agencement propre et logique de boîte de dialogue aide l'utilisateur à comprendre rapidement quelles informations lui sont demandées.

##### Conseils

- Disposez les contrôles dans votre boîte de dialogue dans le sens habituel de lecture des personnes. Dans les environnements linguistiques européens, c'est en général de la gauche vers la droite, de haut en bas. Placez les contrôles principaux avec lequel les utilisateurs interagiront aussi près que possible de l'angle supérieur gauche. Suivez les mêmes conseils pour disposer les contrôles dans les groupes de la boîte de dialogue et utilisez la touche Tab pour indiquer l'ordre de parcours des contrôles.

- Lors de l'ouverture d'une boîte de dialogue, donnez le focus initial au composant que, selon vous, l'utilisateur traitera en premier. Ce focus est particulièrement important pour les utilisateurs qui doivent utiliser un clavier pour naviguer dans votre application.

- Placez et affichez, dès l'ouverture, des valeurs par défaut judicieuses dans les contrôles, pour autant que ce soit possible, afin que l'utilisateur n'ait pas à créer de l'information à partir de rien. Ces valeurs par défaut peuvent provenir des paramètres du système (par exemple, nom d'hôte ou adresse IP) ou d'informations que l'utilisateur a saisies auparavant dans cette application ou dans une autre (par exemple, une adresse électronique ou un serveur mandataire de réseau).

Consultez le pour plus d'informations détaillées sur la disposition des contrôles dans les boîtes de dialogue.

Consultez la pour des informations sur l'usage de contrôles bloc-notes à onglets dans les boîtes de dialogue.

#### Boîtes de dialogue courantes

La bibliothèque gtk et GNOME fournissent des boîtes de dialogue standard pour beaucoup de tâches usuelles comme l'ouverture et l'enregistrement de fichiers, la sélection de polices et de couleurs et l'impression. Utilisez-les toujours lorsque l'utilisateur doit opérer l'une de ces tâches. Vous pouvez modifier les boîtes de dialogue pour refléter les besoins particuliers de votre application (par exemple, ajout de boutons de pré-écoute Lire et Arrêter dans la boîte de dialogue « Ouvrir un fichier » dans une application audio) mais ne modifiez pas ou ne supprimez pas des caractéristiques au point de les rendre méconnaissables.

### Assistants

Un assistant est une fenêtre auxiliaire qui guide l'utilisateur au cours d'une opération en la divisant en étapes séquentielles. Les assistants sont utiles pour rendre les opérations complexes moins intimidantes car ils restreignent l'information visible par l'utilisateur à un instant donné.

Étant donné que les assistants ne comportent qu'un nombre relativement restreint de contrôles à l'écran à un moment donné, ils disposent de suffisamment d'espace pour de la documentation en ligne. Par conséquent, n'incorporez pas de bouton Aide dans une fenêtre d'assistant. Si vous ne pouvez pas rendre une opération suffisamment claire dans un assistant sans recourir à un bouton Aide, vous devez la simplifier encore plus.

Les assistants ont un défaut majeur. Après avoir utilisé un assistant, il est souvent difficile de comprendre où ont été enregistrés les paramètres individuels regroupés dans l'assistant. Souvent les gens recourent à une nouvelle exécution de l'assistant en saisissant à nouveau de nombreux paramètres alors qu'ils ne souhaitaient pas les modifier.

Les assistants sont souvent utilisés dans des situations où une meilleure solution consisterait à simplifier ou même à automatiser le processus. Avant d'utiliser un assistant pour guider l'utilisateur pas à pas au cours d'une opération complexe, examinez s'il ne serait pas possible de simplifier l'opération foncièrement afin qu'un assistant ne soit pas nécessaire.

#### Commandes de la fenêtre :

Fermer, minimiser/ré-afficher, enrouler/dérouler

#### Page d'introduction

La première page donne à l'utilisateur un « aperçu grossier ». Placez le titre de l'assistant dans la barre de titre de la fenêtre et dans la zone de titre de l'assistant accompagné d'un dessin optionnel. Exposez en dessous le but de l'assistant et, si ce n'est pas évident, l'emplacement où l'utilisateur peut trouver les informations demandées par l'assistant.

##### Format du titre :

Titre de l'assistant

##### Boutons :

Annuler, Suivant

##### Exemple de première page d'un assistant

Capture d'écran affichant la première page d'un assistant pour la création d'un nouveau compte de courriel

#### Pages de contenu

Les pages de contenu comportent les réglages effectifs de l'assistant. Résumez le type de paramètres présents dans le contenu de la page dans sa zone de titre, par exemple Serveur de courriel.

##### Format du titre :

Titre de l'assistant - (page actuelle sur nombre de pages totales)

##### Boutons :

Annuler, Précédent, Suivant

#### Dernière page

La dernière page doit résumer les paramètres qui seront modifiés par l'assistant et comment l'utilisateur pourra les modifier par la suite.

##### Format du titre :

Fin Titre de l'assistant

##### Boutons :

Annuler, Précédent, Terminer

## Menus

Les menus présentent l'ensemble complet des commandes d'une application à l'utilisateur et souvent un sous-ensemble de ses préférences. Lorsque vous concevez une nouvelle application, placez les éléments courants du menu aux mêmes endroits où ils apparaissent dans les autres applications, car cela permet à l'utilisateur de les mémoriser plus facilement.

Dans la plupart des applications, seules les fenêtres principales doivent avoir une barre de menu. Les fenêtres utilitaires et les boîtes de dialogue doivent être suffisamment simples pour que leurs fonctions puissent être fournies par des contrôles tels que les boutons placés dans la fenêtre.

De temps en temps cependant une fenêtre utilitaire ou une boîte de dialogue est tellement complexe qu'il y aurait trop de contrôles de ce type. Dans ce cas, vous pouvez utiliser une barre de menu à condition que :

- les menus suivent l'agencement standard tel que décrit à la ,

- la fenêtre ne doit pas comporter la zone des boutons de la boîte de dialogue ou tout bouton qui la fermerait comme Valider, Fermer ou Annuler. Placez ces commandes dans le menu Fichier ou son équivalent à la place.

### Conseils

- Nommez les éléments de menu à l'aide de verbes pour les commandes et d'adjectifs pour les réglages, selon les règles de la .

- Rendez un élément de menu insensible lorsque sa commande n'est pas disponible. Par exemple, l'élément Édition Copier qui exécute la commande qui copie les données sélectionnées vers le presse-papier, ne doit pas être activé lorsqu'il n'y a pas de données sélectionnées.

- Indiquez une touche d'accès pour tout élément de menu. Vous pouvez utiliser la même touche d'accès dans différents menus de votre application mais évitez de dupliquer les touches d'accès dans un même menu. Notez que contrairement aux autres contrôles, une fois qu'un menu est affiché, ses touches d'accès peuvent être utilisées en saisissant uniquement la lettre ; il n'est pas nécessaire d'appuyer sur la touche Alt en même temps.

- Concevez votre structure de menu pour éviter plus d'un niveau de sous-menus. Les hiérarchies profondes de menu sont plus difficiles à mémoriser et physiquement difficiles à parcourir.

- N'ayez pas de menu contenant moins de trois éléments (sauf le menu Aide standard qui ne possède que deux éléments par défaut). Si vous avez un sous-menu avec moins de trois éléments, déplacez-les dans leur menu parent. Si vous avez un menu de haut-niveau avec moins de trois éléments, trouvez un autre menu approprié pour les y ajouter ou trouvez des éléments appropriés d'autres menus à ajouter.

### Barre de menus

#### Une barre de menus classique

Une barre de menus classique affichant les menus Fichier, Édition, Affichage, Insérer, Format, Aller, Marque-pages, Fenêtres et Aide

La barre de menus propose de nombreux menus déroulants. Seuls les menus titres sont affichés jusqu'à ce que l'utilisateur clique sur l'un d'entre eux.

La barre de menus est normalement toujours visible et accessible à partir du clavier. Il faut donc rendre toutes les commandes de votre application disponibles dans la barre de menus.

#### Mode plein écran

Lorsque votre application est en mode plein écran, masquez la barre de menus par défaut. Cependant, il faut que ses menus et éléments restent accessibles à partir du clavier comme d'habitude. Un appui sur la touche Échap doit faire quitter le mode plein écran à l'application. Un bouton Quitter le mode plein écran doit être placé dans le coin supérieur droit de la fenêtre. Le bouton doit disparaître lorsque la souris est inutilisée pendant 5 secondes et doit réapparaître lorsque la souris est déplacée. Sinon pour les applications où la souris est fréquemment utilisée en mode plein écran, la totalité du bouton, sauf une ligne de deux pixels, peut se glisser sous le haut de l'écran. Le bouton doit revenir à l'écran lorsque la souris s'approche de lui.

#### Conseils

- Chaque fenêtre principale d'une application doit posséder une barre de menus contenant au moins un menu Fichier et un menu Aide.

- Organisez les titres de menu dans l'ordre standard — consultez la

- Ne désactivez pas les titres de menu. L'utilisateur doit pouvoir explorer le menu même s'il n'y a aucun élément disponible dans celui-ci à ce moment-là.

- Les titres de menu d'une barre de menus sont composés d'un seul mot commençant par une majuscule. N'utilisez pas d'espace dans les titres de menu sinon il serait possible de les confondre avec deux titres de menu séparés. N'utilisez pas de mots composés (comme OptionsFenêtre) ou des tirets (comme Options-Fenêtre) pour contourner cette indication.

- N'implémentez pas de mécanisme pour masquer la barre des menus, car il risquerait d'être activé accidentellement. Certains utilisateurs risqueraient de ne pas savoir comment retrouver la barre de menus dans ce cas.

### Types de menu

#### Menus déroulants

##### Un menu déroulant classique

Capture d'écran d'un menu déroulant classique

Un menu déroulant apparaît quand l'utilisateur clique sur son titre dans la barre de menu ou place le focus sur le titre et appuie sur Entrée.

##### Conseils

- Ne placez dans un menu que des éléments ayant un rapport avec le titre du menu.

- Organisez les éléments de menu dans l'ordre classique — consultez la . Pour les éléments propres à l'application pour lesquels il n'y a pas d'ordre défini, classez-les par ordre numérique ou autre façon logique (par exemple, 50 %, 100 %, 200 %), dans l'ordre des tâches (par exemple, Compiler suivi de Déboguer) ou suivant la fréquence supposée d'utilisation.

- Limitez les menus de haut niveau à un maximum de 15 éléments. Si vous avez plus d'éléments, pensez à déplacer un sous-ensemble d'éléments aux fonctionnalités liées dans un sous-menu ou dans un nouveau menu de haut niveau.

- N'ajoutez et ne supprimez pas d'éléments de menu individuels pendant que l'application est lancée, rendez-les plutôt inactifs. Des menus complets peuvent cependant être ajoutés ou supprimés de la barre de menus en cours d'exécution, par exemple dans des applications basées sur des composants.

- Mettez immédiatement à jour les éléments de menu qui sont modifiés directement ou indirectement par l'utilisateur, tels que ceux du sous-menu Documents récents et du menu Signets.

#### Sous-menus

##### Un menu déroulant avec un sous-menu

Capture d'écran d'un menu déroulant avec un sous-menu

Un sous-menu apparaît lorsque l'utilisateur clique sur son titre qui est marqué par un petit symbole de flèche à côté de son étiquette. Vous pouvez gagnez de la place dans les menus avec beaucoup d'articles en regroupant les commandes en relation dans un sous-menu unique.

##### Conseils

- Utilisez les sous-menus avec parcimonie, car il est foncièrement difficile de s'y déplacer ; la recherche et l'accessibilité des éléments qu'ils contiennent en est rendue malaisée.

- Ne créez pas de sous-menus avec moins de trois éléments à moins que les éléments ne soient ajoutés dynamiquement (par exemple le sous-menu Fichier Nouvel onglet dans gnome-terminal).

- N'imbriquez pas de sous-menus dans des sous-menus. Il est difficile de se souvenir de plus de deux niveaux de hiérarchie et de naviguer parmi eux.

#### Menus contextuels

##### Un menu contextuel pour un dossier de courriels

Capture d'écran d'un menu contextuel pour un dossier de courriels affichant les actions qui peuvent être réalisées sur ce dossier

Les menus contextuels fournissent des raccourcis vers des éléments de menu qui ne s'appliquent qu'à l'objet actuellement sélectionné. Un menu contextuel s'affiche lorsque l'utilisateur clique avec le bouton de droite sur un objet ou sélectionne l'objet et appuie sur Maj F10.

Soyez attentif au fait que les menus contextuels sont principalement utilisés par les utilisateurs de niveau intermédiaire et avancé. Même certains utilisateurs qui utilisent des environnements graphiques depuis des années ne connaissent pas les menus contextuels jusqu'à ce que quelqu'un leur montre.

##### Conseils

- Dotez d'un menu contextuel chaque objet, chaque élément pouvant être sélectionné et chaque cible d'entrée de texte comme les champs de saisie.

- Indiquez dans chaque élément de menu une touche d'accès. Cependant, pour améliorer le rendement spatial et la lisibilité, n'affichez pas les raccourcis clavier dans les menus contextuels.

- Puisqu'il est possible que l'utilisateur ne soit pas au courant de leur présence, ne créez pas de fonctions accessibles uniquement à partir de menus contextuels à moins d'être sûr que le public ciblé sait utiliser les menus contextuels.

- Classez les éléments dans un menu contextuel comme suit :

  - l'action correspondant à un double-clic sur l'objet, si elle existe,

  - les autres commandes et paramètres classés par fréquence d'utilisation supposée,

  - les commandes de transfert comme `Couper`, `Copier` et `Coller`,

  - les méthodes d'entrées lorsque des méthodes d'entrées utilisables sont fournies par GTK+ pour prendre en charge des alternatives au clavier pour la saisie (comme celles utilisées par les japonais, les chinois et certaines techniques d'accessibilité).

- Les menus contextuels doivent être les plus simples possibles afin d'être efficaces. Ne mettez pas plus d'environ dix éléments dans un menu contextuel et évitez les sous-menus.

### Conception d'un menu

#### Regroupement d'éléments de menus

##### Regroupement d'éléments dans un menu à l'aide de séparateurs

Capture d'écran d'un menu divisé en cinq groupes logiques avec séparateurs de menu

Les séparateurs de menu sont des lignes horizontales qui séparent visuellement des groupes d'éléments logiquement reliés entre eux dans un menu déroulant, un sous-menu ou un menu contextuel. Par exemple, les séparateurs sur la divisent en cinq groupes de fonctionnalités communes. Un bon usage des séparateurs aide à regrouper l'information dans un menu et le rend plus facile à parcourir et mémoriser.

##### Conseils

- La meilleure taille pour un groupe est d'environ 2 à 5 éléments. Il vaut mieux placer les groupes à un seul élément au sommet ou en bas d'un menu sinon essayez de les regrouper avec d'autres éléments uniques du même type dans le même menu.

- Ordonnez les éléments dans un groupe de manière logique, numériquement, dans l'ordre des tâches ou classés par fréquence d'utilisation attendue, selon les circonstances.

- Ne mettez qu'un seul type d'élément de menu dans chaque groupe — commande, mutable, case à cocher ou bouton radio. Par exemple, ne mettez pas des commandes (comme Affichage Recharger) et des paramètres (comme Affichage Barre d'outils) dans le même groupe.

#### Types d'élément de menu

##### Éléments commande

###### Un groupe d'éléments commande dans un menu

Capture d'écran d'un groupe dans un menu contenant seulement des éléments commandes : Enregistrer, Enregistrer sous et Annuler

Les éléments commandes sont des éléments de menu qui lancent une commande ou réalisent une action telles que Enregistrer, Imprimer ou Quitter. Ils agissent sur le document actuellement actif dans une application basée sur les documents ou sur l'application elle-même.

###### Conseils

- Associez un raccourci clavier pour les éléments commandes souvent utilisés. Consultez la pour plus d'informations sur le choix des touches de raccourci.

- Ne supprimez pas les éléments commandes du menu lorsqu'ils ne sont pas disponibles, rendez-les plutôt inactifs. Cela permet à l'utilisateur de déduire la fonctionnalité que l'application fournit même si elle n'est actuellement pas disponible et de conserver une structure de menu statique qui rend plus facile leur mémorisation.

- Ne mettez des points de suspension (« ... ») à la fin de l'étiquette que si la commande a besoin d'entrées supplémentaires de la part d'utilisateur avant d'être exécutée. N'ajoutez pas de points de suspension aux éléments qui n'affichent qu'une boîte de dialogue de confirmation (tel que Supprimer) ou qui ne nécessitent pas d'entrée supplémentaire (tel que Propriétés, Préférences ou À propos).

##### Éléments modifiables

Un élément de menu mutable change de dénomination lorsqu'il est sélectionné. Par exemple, Affichage Recharger dans un navigateur peut devenir Arrêter pour permettre à l'utilisateur d'interrompre l'opération si cela prend trop de temps.

Notez qu'un élément de menu mutable peut poser des problèmes car l'utilisateur ne voit jamais le changement ; il ne lui est donc pas évident qu'une fonction différente est maintenant à sa disposition.

###### Conseils

- Si vos éléments de menu mutables sont des éléments commandes et que vous avez suffisamment de place dans votre menu, songez plutôt à fournir deux éléments de menu adjacents pour les commandes. Ensuite rendez les éléments actifs ou inactifs en fonction du contexte. Ceci permet également à l'utilisateur de savoir si des raccourcis différents sont disponibles pour chaque commande, par exemple Ctrl R pour Recharger et Échap. pour Arrêter.

- N'utilisez pas d'élément de menu mutable pour un paramètre à deux états (par exemple Afficher la barre d'outils et Masquer la barre d'outils). Affichez plutôt ces éléments comme un simple élément case à cocher.

##### Éléments case à cocher

###### Un ensemble d'éléments case à cocher dans un menu

Capture d'écran d'un groupe dans un menu Affichage contenant quatre éléments case à cocher : Barre d'outils, Panneau latéral, Barre d'emplacement et Barre d'état

Un élément de menu case à cocher affiche l'état actuel d'un paramètre à deux états et permet à l'utilisateur de le modifier en sélectionnant l'élément de menu.

###### Conseils

- Utilisez un élément de menu case à cocher seulement si la signification des états activé et désactivé est évidente d'après la dénomination de l'élément. Cela signifie que les deux états sont logiques et naturellement opposés, tels que « Marche » et « Arrêt ». Si ce n'est pas le cas, utilisez plutôt deux éléments bouton radio.

- Ne modifiez jamais la dénomination d'un élément de menu case à cocher lorsque l'utilisateur le sélectionne.

##### Éléments bouton radio

###### Un ensemble d'éléments bouton radio dans un menu

Capture d'écran d'un groupe dans un menu contenant trois éléments bouton radio : Vue en icônes, vue en liste, vue détaillée

Les éléments de menu bouton radio affichent quel réglage, parmi deux (ou plus) s'excluant mutuellement, est actuellement sélectionné et permettent à l'utilisateur de choisir un réglage différent en sélectionnant l'élément de menu.

- Si vous devez proposer un choix parmi deux réglages qui s'excluent mutuellement à l'utilisateur, utilisez deux éléments bouton radio au lieu d'un unique élément de menu case à cocher si les réglages ne sont pas clairement opposés. Par exemple, représentez Vue en icônes et Vue en liste comme deux éléments bouton radio.

- Ne modifiez jamais la dénomination d'un élément bouton radio lorsque l'utilisateur sélectionne ou dé-sélectionne l'élément.

### Menus standards

La plupart des applications possèdent beaucoup de fonctionnalités communes telles que Couper, Copier, Coller et Quitter. Pour aider à apprendre et à mémoriser ces éléments de menu et les menus dans lesquels ils apparaissent celles-ci doivent apparaître avec les mêmes étiquettes et dans le même ordre dans toutes les applications. La même commande doit également se comporter de la même façon dans les différentes applications pour éviter des surprises à l'utilisateur.

Cette section présente les menus et éléments de menu les plus courants ainsi que leur comportement. Vous n'aurez certainement pas besoin de tous ces menus ou éléments de menu dans toutes les applications que vous écrirez mais vous devez conserver l'ordre des titres de menu ou des éléments de menu pour ceux que vous utilisez.

#### Conseils

- Mettez les menus spécifiques à votre application après le menu Format et avant le menu Aller à.

- Placez les éléments de menu spécifiques à l'application vers le milieu d'un menu standard à moins qu'ils ne trouvent leur place dans l'un des groupes standards déjà présents dans le menu.

#### Une barre de menus affichant tous les titres de menus standards dans le bon ordre

- File (Fichier)
- Edit (Édition)
- View (Affichage)
- Insert (Insérer)
- Format (Format)
- Go (Aller à)
- Bookmarks (Signets)
- Windows (Fenêtres)
- Help (Aide)

#### Fichier

Le menu Fichier contient les commandes qui agissent sur le document actuel. C'est l'élément le plus à gauche dans la barre de menus à cause de son importance et de son emploi fréquent et parce que c'est un menu utile dans beaucoup d'applications. Historiquement, parce que la plupart des applications possèdent déjà ce menu et parce que la distinction entre fermeture de documents et fermeture de fenêtres est devenue floue dans le temps, le menu Fichier est également devenu l'emplacement standard pour l'élément de menu Quitter.

Les éléments du menu Fichier sont en général classés par voisinage, le plus proche en premier. C'est-à-dire, les éléments pour enregistrer ou charger un fichier, suivi par l'impression, suivi par l'envoi vers un utilisateur à distance. Essayez de maintenir cet ordre si vous devez ajouter de nouveaux éléments au menu.

Si votre application n'opère pas sur des documents, appelez cet élément du nom des éléments affichés. Par exemple, beaucoup de jeux ont un menu Jeu au lieu d'un menu Fichier. Cependant, mettez l'élément de menu Quitter en dernière position néanmoins.

##### Un menu fichier générique

    Fichier
    New Ctrl+N
    Open... Ctrl+O

    ---
    Save Ctrl+S
    Save As... Shift+Ctrl+S
    Save a Copy...
    Revert (Rétablir)
    ---
    Page Setup (Configuration de l'impression)
    Print Preview Shift+Ctrl+P
    Print... Ctrl+P
    Send To... Ctrl+M
    ---
    Properties (Propriétés)
    ---
    1. Recent Document
    2. Recent Document
    3. Recent Document
    4. Recent Document
    ---
    Close Ctrl+W
    Quit Ctrl+Q

##### Opérations de création et d'ouverture

###### Éléments de menu opérations de création et d'ouverture

Dénomination | Raccourci | Description
--- | --- | ---

New (Nouveau)

Ctrl N

Crée un nouveau document. Ouvre une nouvelle fenêtre principale de titre Nom du document contenant un document vierge. La manière dont la fenêtre est affichée, par ex. onglet ou fenêtre séparée, dépend du gestionnaire de fenêtres.

Si votre application est capable de créer un grand nombre de différents types de document, vous pouvez transformer l'élément Nouveau en sous-menu contenant un élément de menu pour chaque type. Nommez ces éléments Nouveau type de document, la première entrée du menu doit être la plus souvent utilisée et attribuez-lui le raccourci Ctrl N.

Note : un document vierge n'est pas nécessairement complètement vide. Par exemple, un document créé à partir d'un modèle peut contenir initialement certaines données.

Open... (Ouvrir) | Ctrl O | Ouvre un document existant dans une nouvelle fenêtre. Affiche la boîte de dialogue standard « Ouverture de fichiers » permettant de sélectionner un fichier existant. Si le fichier choisi est déjà ouvert dans l'application, fait apparaître cette fenêtre au lieu d'en ouvrir une nouvelle.

##### Opérations d'enregistrement d'état

###### Éléments de menu opération d'enregistrement d'état

Dénomination | Raccourci | Description
--- | --- | ---

Save (Enregistrer)

Ctrl S

Enregistre le document sous le nom du fichier actuel. Si le document possède déjà un nom de fichier, enregistre le document immédiatement sans aucune autre interaction de l'utilisateur. S'il existe des options supplémentaires impliquées par l'enregistrement (par ex. fins de lignes de style DOS ou UNIX dans un fichier texte), demandez-les à la première sauvegarde du document mais ensuite utilisez les mêmes valeurs à chaque fois jusqu'à ce que l'utilisateur les modifie.

Si le document ne possède pas encore un nom de fichier ou est en lecture-seule, choisir cet élément équivaut à sélectionner Enregistrer sous.

Save As... (Enregistrer sous) | Maj Ctrl S | Enregistre le document sous un nouveau nom. Affiche la boîte de dialogue standard « Enregistrer sous » et enregistre le fichier sous le nom choisi.

Save a Copy... (Enregistrer une copie)

Aucune

Demande à l'utilisateur de saisir un nom de fichier dans lequel une copie du document sera enregistrée. Ne modifiez pas l'affichage ou le nom du fichier du document d'origine. Toutes les modifications ultérieures sont toujours faites au document d'origine jusqu'à ce que l'utilisateur ne le spécifie d'une autre façon, par exemple en choisissant la commande Enregistrer sous.

Tout comme la boîte de dialogue Enregistrer sous, la boîte de dialogue Enregistrer une copie peut présenter différentes façons d'enregistrer les données. Par exemple, une image peut être enregistrée dans un format natif ou PNG.

Revert (Rétablir) | Aucune | Rétablit le document dans le dernier état enregistré. Présente à l'utilisateur un avertissement sur le fait que toutes les modifications seront perdues et propose une possibilité d'annulation avant de recharger le fichier.
Save Version... (Enregistrer une version) | Aucune | Une alternative à la commande Enregistrer une copie. Doit être utilisé en conjonction avec la commande Recharger une version .
Restore Version... (Recharger une version) | Aucune | Demande à l'utilisateur une version du document actuel à restaurer. Présente à l'utilisateur un avertissement sur le fait que toutes les modifications seront perdues et propose une possibilité d'annulation avant de recharger la version. Doit être utilisé en conjonction avec la commande Save Version.
Versions... | Aucune | Une alternative aux commandes Save Version et Recharger une version. Utilisez cela lorsque d'autres utilitaires, tels que la commande diff, sont disponibles.

##### Opérations d'exportation

###### Éléments de menu opération d'exportation

Dénomination | Raccourci | Description
--- | --- | ---
Page Setup (Configuration de l'impression) | Aucune | Permet à l'utilisateur de contrôler les réglages en rapport avec l'impression. Affiche une boîte de dialogue permettant à l'utilisateur de paramétrer des options comme le format portrait ou paysage, les marges, etc.
Print Preview (Aperçu avant impression) | Maj Ctrl P | Montre à l'utilisateur l'aspect du document imprimé. Affiche une nouvelle fenêtre contenant une représentation précise de l'apparence du document tel qu'il sera imprimé. La bibliothèque libgnomeprintui fournit une fenêtre standard d'aperçu avant impression que vous devez utiliser si possible.

Print... (Imprimer)

Ctrl P

Imprime le document actuel. Affiche une boîte de dialogue permettant à l'utilisateur de paramétrer des options comme la plage des pages à imprimer, l'imprimante à utiliser, etc. La boîte de dialogue doit contenir un bouton appelé Imprimer qui lance l'impression et ferme la boîte de dialogue. La bibliothèque `libgnomeprintui` fournit une boîte de dialogue d'impression standard qui vous devez utiliser si possible.

Send To... (Envoyer vers)

Ctrl M

Donne la possibilité à l'utilisateur d'attacher ou d'envoyer le document actuel dans un courriel, en fonction de son format.

Vous pouvez fournir plus d'un élément Envoyer en fonction des options disponibles. S'il y a plus de deux éléments, déplacez-les dans un sous-menu. Par exemple, si seul Envoyer par courriel et Envoyer par fax sont disponibles, laissez-les dans le menu de premier niveau. S'il y a une troisième option, telle que Envoyer par FTP, placez toutes les options dans un sous-menu Envoyer.

##### Propriétés de fichier

###### Éléments de menu Propriétés

Dénomination | Raccourci | Description
--- | --- | ---
Properties (Propriétés) | Alt Entrée | Ouvre la fenêtre Propriétés du document. Elle peut contenir des informations modifiables comme le nom de l'auteur ou des informations en lecture-seule comme le nombre de mots d'un document ou une combinaison des deux. Le raccourci Alt Entrée ne doit pas être fourni si Entrée est très souvent utilisé pour insérer une nouvelle ligne.

##### Opérations de fermeture

###### Éléments de menu opération de fermeture

Dénomination | Raccourci | Description
--- | --- | ---

Close (Fermer)

Ctrl W

Ferme le document actuel. S'il y a des modifications non enregistrées, affiche une message d'alerte pour confirmation permettant à l'utilisateur d'enregistrer les modifications, de les annuler ou d'annuler l'action sans fermer ni enregistrer le document.

Si la fenêtre que vous fermez est le dernier document ouvert dans l'application, l'action correcte dépend du type d'application :

- Interface à document unique : fermez l'application.

- Interface à document unique contrôlé : laissez seulement la fenêtre de contrôle ouverte.

- Interface à document multiple : fermez le document actuel et créez un nouveau document vierge.

Quit (Quitter)

Ctrl Q

Ferme l'application. S'il y a des modifications non enregistrées dans un des documents ouverts, affiche un message d'alerte pour confirmation pour chaque document concerné, permettant à l'utilisateur d'enregistrer les modifications, de les annuler ou d'annuler l'action. S'il n'y a pas de modification non enregistrée, ferme l'application immédiatement sans ouvrir de boîte de dialogue et sans afficher de message.

En particulier, les applications non basées sur des documents, par exemple un jeu ou une calculatrice, doivent enregistrer leur état et quitter immédiatement. Cet état doit être restauré à la prochaine ouverture de l'application.

#### Édition

Le menu Édition contient les éléments relatifs à la modification du document (gestion du presse-papier, recherche et remplacement et insertion d'objets spéciaux) et des préférences de l'utilisateur. Les préférences sont modifiées ici plutôt que dans un menu Préférences parce que :

- la plupart des fenêtres de préférences des applications sont atteintes via un élément de menu unique et les menus à élément unique ne sont guère pratiques,

- la plupart des applications contiennent un menu Édition adéquat.

##### Un menu Édition générique

    Edit (Édition)
    Undo Ctrl+Z
    Redo Shift+Ctrl+Z
    -
    Cut Ctrl+X
    Copy Ctrl+C
    Paste Ctrl+V
    Paste Special... Shift+Ctrl+V
    Delete Del
    Select All Ctrl+A
    Duplicate Ctrl+U
    Deselect All Shift+Ctrl+A
    -
    Find... Ctrl+F
    Find Next Ctrl+G
    Find Previous Shift+Ctrl+G
    Replace... Ctrl+R
    -
    Insert...
    -
    Preferences (Préférences)

##### Historique des modifications

Les applications basées sur des documents doivent maintenir un historique des modifications d'un document et l'état du document entre chaque action. Les commandes Annuler et Refaire se déplacent en avant ou en arrière dans l'historique.

###### Éléments de menu Historique des modifications

Dénomination | Raccourci | Description
--- | --- | ---
Undo action (Annuler l'action) | Ctrl Z | Annule l'effet de l'action précédente dans l'historique d'annulation. Remet le document dans son état avant que l'action précédente ait été faite. Si votre application prend en charge l'annulation et que l'utilisateur annule toutes les modifications depuis la dernière sauvegarde, traitez le document comme s'il était non modifié.

Redo action (Refaire l'action)

Maj Ctrl Z

Réalise l'action suivante dans l'historique d'annulation après que l'utilisateur s'est déplacé en arrière dans l'historique avec la commande Annuler. Déplace l'utilisateur d'une étape en avant en remettant le document dans l'état qu'il avait après que cette action a été une première fois réalisée.

Note : fournissez un élément de menu Annuler et Refaire même si votre application ne prend en charge qu'un seul niveau d'annulation.

##### Manipulation des données sélectionnées

###### Éléments de menu Manipulation des données sélectionnées

Dénomination | Raccourci | Description
--- | --- | ---
Cut (Couper) | Ctrl X | Supprime le contenu sélectionné et le place dans le presse-papier. Supprime visuellement le contenu du document de la même manière que Delete (Supprimer).
Copy (Copier) | Ctrl C | Copie le contenu sélectionné dans le presse-papier.
Paste (Coller) | Ctrl V | Insère le contenu du presse-papier dans le document. S'il n'y a pas de sélection en cours, utilise le curseur comme point d'insertion. S'il y a une sélection en cours, la remplace par le contenu du presse-papier.

Paste Special... (Collage spécial)

Maj Ctrl V

Insère une représentation non usuelle du contenu du presse-papier dans le document. Ouvre une boîte de dialogue présentant une liste des formats disponibles, liste dans laquelle l'utilisateur peut choisir. Par exemple, si le presse-papier contient un fichier PNG copié à partir du gestionnaire de fichiers, l'image peut être intégrée dans le document ou un lien vers le fichier inséré afin que les modifications de l'image sur le disque soient toujours reflétées dans le document.

Duplicate (Dupliquer)

Ctrl U

Crée une copie en double de l'objet sélectionné. N'invitez pas à donner un nom pour le double de l'objet, mais donnez-lui automatiquement un nom judicieux par défaut (par exemple `Copie de ListeDeCourse.abw`) ; permettez à l'utilisateur de le modifier par la suite. Placez la copie en double aussi près que possible de l'original sans le recouvrir afin que l'utilisateur la voit immédiatement, même si cela impose une rupture de l'ordre du tri actuel dans le conteneur.

Delete (Supprimer) | Supprimer | Supprime le contenu sélectionné sans le mettre dans le presse-papier.
Select All (Tout sélectionner) | Ctrl A | Sélectionne tout le contenu du document actuel.

Deselect All (Tout désélectionner)

Maj Ctrl A

Désélectionne tout le contenu du document actuel. Ne fournissez cet élément que dans des situations où aucune autre façon d'annuler la sélection n'est possible ou apparente à l'utilisateur. Par exemple, dans des applications graphiques complexes où la sélection ou désélection n'est pas communément possible en utilisant simplement les touches du curseur.

Note : ne prévoyez pas de commande Tout désélectionner dans les champs de saisie de texte, car Maj Ctrl nombre hex est utilisé pour saisir des caractères unicode donc son raccourci ne fonctionnera pas.

##### Recherche et remplacement

###### Éléments de menu Rechercher et Remplacer

Dénomination | Raccourci | Description
--- | --- | ---

Find... (Trouver)

Ctrl F

Ouvre une fenêtre ou une boîte de dialogue permettant à l'utilisateur de rechercher un contenu spécifique dans le document actuel. Surlignez in situ la valeur correspondante.

Si la commande permet à l'utilisateur de rechercher du contenu à d'autres emplacements que le document actuel, par exemple d'autres documents ouverts, d'autres documents sur le disque ou un emplacement réseau distant, nommez cet élément Search (Rechercher) au lieu de Find (Trouver).

Find Next (Rechercher le suivant) | Ctrl G | Sélectionne l'occurrence suivante du dernier terme recherché dans le document actuel.
Find Previous (Rechercher le précédent) | Maj Ctrl G | Sélectionne la précédente occurrence du dernier terme recherché dans le document actuel.
Replace... (Remplacer) | Ctrl H | Ouvre une fenêtre ou une boîte de dialogue permettant à l'utilisateur de rechercher un contenu précis dans le document actuel et de remplacer chaque occurrence par un nouveau contenu.

##### Insertion d'objets spéciaux

Lorsque cela a un sens, fournissez des éléments de menu Édition qui insèrent des objets spéciaux tels que des images, des liens, des contrôles GUI ou la date et l'heure actuelle.

Si vous avez jusqu'à trois types d'objets qui peuvent être insérés, ajoutez-les en tant qu'éléments individuels à ce menu, par exemple Insérer une image ou Insérer un lien externe. Si vous avez entre trois et six types, placez-les dans un sous-menu Éditer Insérer. Si vous en avez plus de six, ajoutez un menu Insérer séparé à la barre de menus.

##### Préférences utilisateur

###### Éléments de menu préférences utilisateur

Dénomination | Raccourci | Description
--- | --- | ---
Preferences (Préférences) | Aucune | Ouvre une fenêtre des préférences permettant à l'utilisateur de modifier les préférences de l'application entière. Les modifications s'appliquent à toutes les instances en cours et à venir de l'application.

#### Affichage

Le menu Affichage ne contient que des éléments qui modifient la vue utilisateur du document actuel. Ne mettez pas d'éléments dans le menu Affichage qui modifieraient le contenu du document actuel (exception : Affichage Recharger peut changer le contenu actuel si, par exemple, le document est une page Web récemment mise à jour sur le serveur).

##### Un menu Affichage générique

    View (Affichage)
    Toolbar (Barre d'outils)
    Statusbar
    ---
    Icons (Icônes)
    List (Liste)
    Details (Détails)
    ---
    Sort By...
    Filter... (Filtre)
    ---
    Zoom in Ctrl++
    Zoom Out Ctrl+-
    Normal Size Ctrl+=
    Best Fit (Taille idéale)
    ---
    Refresh Ctrl+R

##### Barre d'outils et barre d'état

###### Élément de menu barre d'outils et barre d'état

Dénomination | Raccourci | Description
--- | --- | ---
Toolbar (Barre d'outils) | Aucune | Affiche ou masque la barre d'outils de l'application. C'est un élément de menu case à cocher. Mettez cet élément dans toutes les applications qui possèdent une barre d'outils unique. Consultez la pour plus d'informations sur la façon de gérer les barres d'outils multiples.

##### Présentation du contenu

###### Éléments de menu Présentation du contenu

Dénomination | Raccourci | Description
--- | --- | ---
Icons (Icônes) | Aucune | Affiche le contenu du conteneur sélectionné en tant que lignes et colonnes de grandes icônes, chacune d'elles portant un nom en dessous. C'est un élément de menu bouton radio.
List (Liste) | Aucune | Affiche le contenu du conteneur sélectionné en tant que liste de petites icônes, éventuellement sur plusieurs colonnes, chacune d'elles portant son nom sur le côté droit. C'est un élément de menu bouton radio.

Details (Détails)

Aucune

Affiche le contenu du conteneur sélectionné en tant que colonne unique de petites icônes, chacune d'elles portant son nom sur le côté droit. Des colonnes supplémentaires fournissent des informations supplémentaires à propos de l'objet que chaque icône représente, par exemple la taille et la date de modification des fichiers dans un gestionnaire de fichiers. C'est un élément de menu bouton radio.

Si votre application n'a pas besoin des deux modes Liste et Détails, utilisez l'élément Liste pour l'un des deux modes pris en charge.

Sort By... (Trier par) | Aucune | Trie le contenu du conteneur en suivant les critères définis par l'utilisateur. Ouvre une boîte de dialogue permettant à l'utilisateur de choisir parmi des méthodes de tri pré-définies (par exemple : nom, taille ou date de modification dans un gestionnaire de fichiers) ou de spécifier leur propre méthode de tri lorsque cela a un sens.
Filter... (Filtre) | Aucune | Masque les objets qui n'offrent pas d'intérêt pour l'utilisateur. Ouvre une boîte de dialogue permettant à l'utilisateur de choisir dans une liste les types d'objets qu'il veut afficher ou de saisir ses propres critères (par exemple, une expression régulière correspondant à une propriété particulière d'objets).
Zoom In (Zoom en avant) | Ctrl+ | Zoom vers le document. Conservez la position du centre du document au cours du zoom.
Zoom Out (Zoom en arrière) | Ctrl- | Zoom en arrière du document. Conservez la position du centre du document au cours du zoom.
Normal Size (Taille normale) | Ctrl 0 | Réinitialise le niveau de zoom à sa valeur par défaut, normalement 100 %. Conservez la position du centre du document au cours du zoom.
Best Fit (Taille idéale) | Aucune | Le document remplit la fenêtre. Affichez le document, ou la page actuelle du document, avec un niveau de zoom dont la hauteur correspond au remplissage complet de la fenêtre par une vue non défilante de la totalité du document ou de la page.
Refresh (Rafraîchir) | Ctrl R | Redessine la vue actuelle du document à partir de l'enregistrement local. Par exemple, dans un navigateur Web, cela redessine la page à partir du cache des pages du navigateur.
Reload (Recharger) | Ctrl R | Redessine la vue actuelle du document, en vérifiant la présence de modification de la source de données d'abord. Par exemple, contrôle la présence sur le serveur Web de mises à jour de la page avant de l'afficher à nouveau. Si votre application nécessite à la fois Recharger et Rafraîchir, utilisez Maj Ctrl R comme raccourci pour Recharger.

#### Insérer

Le menu Insérer liste le type des objets spéciaux qui peuvent être insérés dans le document à la position actuelle du curseur, par exemple des images, liens, sauts de page ou objets GUI. Ne fournissez ce menu que si vous avez plus d'environ six types d'objets insérables sinon placez les éléments individuels pour chaque type dans le menu Édition.

##### Un menu insertion générique

    Page Break (Saut de page)
    Date and Time... (Date et heure)
    Symbol... (Symbole)
    ---
    Sheet... (Feuille)
    Rows... (Lignes)
    Columns... (Colonnes)
    ---
    Image... (Image)
    Graph... (Graphe)
    ---
    From File... (À partir d'un fichier)
    External Link... (Lien externe)

Les types d'objets changent en fonction des applications mais le tableau ci-dessous affiche les types courants qui peuvent s'envisager.

##### Éléments de menu Insérer

Dénomination | Raccourci | Description
--- | --- | ---
Page Break (Saut de page) | Aucune | Insère un saut de page à l'emplacement du curseur texte. Affichez le saut de page de manière visible, par exemple sous forme d'une ligne pointillée en travers de la page, à moins que l'utilisateur n'ait indiqué qu'il ne voulait pas les voir.

Date and Time... (Date et heure)

Aucune

Insère la date et/ou l'heure à l'emplacement du curseur texte. Ouvrez une boîte de dialogue permettant de choisir les formats de date et heure. S'il y a lieu, offrez également le choix d'une insertion comme texte simple afin que la date et l'heure spécifiée apparaissent toujours dans le document ou comme un champ spécial qui se met à jour à chaque fois que le document est ouvert, rafraîchi ou imprimé.

Symbol... (Symbole)

Aucune

Insère un symbole spécial, tel qu'un symbole mathématique ou un caractère étranger à l'emplacement du curseur texte. Ouvrez une boîte de dialogue affichant tous les symboles sous la forme d'un tableau à partir duquel l'utilisateur peut choisir. L'utilisateur doit être capable d'ajouter plusieurs symboles dans le document en une seule fois sans avoir à fermer et ouvrir à nouveau la boîte de dialogue.

Sheet... (Feuille) | Aucune | Ajoute une nouvelle feuille au document de travail actuel. Ne demandez pas de nom mais choisissez une valeur par défaut judicieuse (tel que Feuille-2) et permettez à l'utilisateur de le modifier plus tard.

Rows... (Lignes)

Aucune

Ajoute de nouvelles lignes dans un tableau dans lequel une ou plusieurs lignes ou cellules sont actuellement sélectionnées. Ouvrez une boîte de dialogue demandant s'il faut insérer les lignes au dessus ou en dessous de la sélection actuelle et toutes autres informations utiles. Reprenez le format de ligne de la dernière ou de la première ligne de la sélection actuelle respectivement, à moins que l'utilisateur ne spécifie autre chose.

Columns... (Colonnes)

Aucune

Ajoute de nouvelles colonnes dans un tableau dans lequel une ou plusieurs colonnes ou cellules sont actuellement sélectionnées. Ouvrez une boîte de dialogue demandant s'il faut insérer les colonnes à gauche ou à droite de la sélection actuelle et toutes autres informations utiles. Reprenez le format de ligne de la ligne la plus à droite ou la plus à gauche de la sélection actuelle respectivement, à moins que l'utilisateur ne spécifie autre chose.

Image... (Image) | Aucune | Insère une image dans le document à partir d'un fichier. Affichez une boîte de dialogue « Ouverture de fichiers » standard filtrée sur les types de fichiers acceptables, à partir de laquelle l'utilisateur peut choisir un fichier image à insérer.
Graph... (Graphe) | Aucune | Insère un graphique dans le document. Ouvrez une boîte de dialogue ou un assistant qui permet à l'utilisateur de construire (ou ouvrir dans un fichier) un graphique de son choix, en utilisant la sélection actuelle comme indication de valeurs, étiquettes d'axes et étiquettes de données à utiliser.
From File... (À partir d'un fichier) | Aucune | Insère un objet à partir d'un type de fichier acceptable, par exemple du texte simple, du texte formaté ou une image. Affichez une boîte de dialogue « Ouverture de fichiers » standard filtrée sur les types de fichiers acceptables, à partir de laquelle l'utilisateur peut choisir un fichier à insérer.

External Link... (Lien externe)

Aucune

Insère un lien vers un objet enregistré dans un autre fichier ou sur un système distant. L'objet n'est pas intégré ou enregistré dans le document mais seulement lié vers celui-ci. Affichez une boîte de dialogue dans laquelle l'utilisateur peut saisir ou choisir le nom de l'objet, par exemple un nom de fichier ou un URL de page Web. Affichez le lien dans le document de manière la plus informative possible. Par exemple, affichez un lien vers une image à l'aide d'une vignette de cette image à moins que l'utilisateur ne spécifie autre chose.

#### Format

Un menu Format contient les commandes pour modifier l'apparence visuelle du document. Par exemple, changement de police, de couleur ou d'espacement de lignes de la sélection de texte.

La différence entre ces commandes et celles du menu Affichage est que les changements réalisés avec les commandes Format sont persistants et enregistrés en tant que partie du document, par exemple sous la forme d'étiquettes HTML ou RTF.

##### Un menu Format générique

    Style...
    ---
    Font... (Police)
    Paragraph... (Paragraphe)
    ---
    Bold Ctrl+B
    Italic Ctrl+I
    Underline Ctrl+U
    ---
    Cells... (Cellules)
    List... (Liste)
    ---
    Layer (Calque)...
    Page...

Les éléments trouvés dans le menu Format sont très spécifiques à l'application mais un certain nombre d'éléments courants sont listés dans le tableau ci-dessous.

##### Éléments de menu Format

Dénomination | Raccourci | Description
--- | --- | ---
Style... | Aucune | Définit les attributs de style du texte ou des objets sélectionnés soit de manière individuelle ou par le nom d'un style prédéfini. Affichez une boîte de dialogue permettant à l'utilisateur de définir des attributs tels que gras, italique, taille et espacement individuellement et de créer et nommer son propre style si c'est possible.
Font... (Police) | Aucune | Définit les propriétés de la police du texte ou des objets sélectionnés. Affichez une boîte de dialogue permettant à l'utilisateur de choisir police, taille, couleur ou d'autres attributs qui peuvent s'appliquer.
Paragraph... (Paragraphe) | Aucune | Définit les propriétés du paragraphe sélectionné. Affichez une boîte de dialogue permettant à l'utilisateur de choisir style, interligne, tabulations ou d'autres attributs qui peuvent s'appliquer.
Bold (Gras) | Ctrl B | Met en gras ou pas la sélection de texte actuelle. Si une partie de la sélection est actuellement en gras et pas le reste, cette commande doit mettre en gras le texte sélectionné.
Italic (Italique) | Ctrl I | Met en italique ou pas la sélection de texte actuelle. Si une partie de la sélection est actuellement en italique et pas le reste, cette commande doit mettre en italique le texte sélectionné.
Underline (Souligné) | Ctrl U | Souligne ou pas la sélection de texte actuelle. Si une partie de la sélection est actuellement soulignée et pas le reste, cette commande doit souligner le texte sélectionné.
Cells... (Cellules) | Aucune | Définit les propriétés des cellules sélectionnées du tableau. Affichez une boîte de dialogue permettant à l'utilisateur de choisir alignement, ombrage, style de texte, format des nombres ou d'autres attributs qui peuvent s'appliquer.
List... (Liste) | Aucune | Définit les propriétés de la liste sélectionnée ou transforme les paragraphes sélectionnés en liste si ce n'est pas déjà le cas. Affichez une boîte de dialogue permettant à l'utilisateur de choisir le style énumération ou puce, espacement, tabulations ou d'autres attributs qui peuvent s'appliquer.
Layer... (Calque) | Aucune | Définit les propriétés de tous les calques ou de ceux sélectionnés pour un document à plusieurs calques. Affichez une boîte de dialogue permettant à l'utilisateur de choisir nom, taille, visibilité, opacité, ordre suivant z ou d'autres attributs qui peuvent s'appliquer.
Page... | Aucune | Définit les propriétés de toutes les pages ou de celles sélectionnées dans le document. Affichez une boîte de dialogue permettant à l'utilisateur de choisir taille du papier, orientation, nombre de colonnes, marges ou d'autres attributs qui peuvent s'appliquer.

#### Signets

Fournissez un menu Signets dans toute application permettant à l'utilisateur de consulter des fichiers ou des dossiers, des documents d'aide, des pages Web ou n'importe quel autre large champ d'informations.

##### Icônes

Affichez des icônes pour les entrées du menu Signets pour indiquer le type du signet même si l'utilisateur a éliminé globalement l'affichage des icônes dans les autres éléments de menu du bureau.

##### Un menu Signet générique

    Bookmarks (Signets)
    Add Bookmark (Ajouter un signet)CtrlD
    Edit Bookmarks (Modifier les signets)CtrlB

##### Éléments de menu Signet

Dénomination | Raccourci | Description
--- | --- | ---

Add Bookmark (Ajouter un signet)

Ctrl D

Ajoute un signet pour le document actuel dans la liste par défaut des signets. N'affichez pas de boîte de dialogue demandant un titre ou un emplacement pour le signet mais choisissez plutôt des éléments judicieux par défaut (tel que le titre du document ou le nom du fichier comme nom de signet) et permettez à l'utilisateur de les modifier plus tard en utilisant la fonctionnalité Modifier les signets.

Edit Bookmarks (Modifier les signets) | Ctrl B | Permet à l'utilisateur de modifier la liste des signets de l'application. Affichez une boîte de dialogue permettant à l'utilisateur de classer les signets de manière hiérarchique, de les déplacer, copier et supprimer et de modifier leurs propriétés.
Liste des signets | Aucune | La liste actuelle des signets de l'utilisateur de l'application

#### Aller à

Un menu Aller à fournit des commandes pour naviguer rapidement dans un document ou un ensemble de documents ou un espace d'informations tels qu'une structure de répertoires ou le Web.

Le contenu des menus dépendra du type d'application. Différents menus standards sont présentés ici pour les applications basées sur des documents ou de type navigateur, mais votre application peut avoir besoin d'une combinaison des deux.

##### Un menu Aller à générique pour un navigateur

    Go (Aller à)
    Back Alt+Left
    Forward Alt+Right
    Up Alt+Up
    ---
    Home Alt+Home
    Location... Ctrl+L

##### Éléments de menu Aller à pour un navigateur

Dénomination | Raccourci | Description
--- | --- | ---
Back (Précédent) | Alt Gauche | Se rend dans le document précédent dans l'historique du navigateur.
Forward (Suivant) | Alt Droite | Se rend dans le document suivant dans l'historique du navigateur.
Up (Haut) | Alt Haut | Se rend dans le document (ou dossier) parent du document (ou du dossier) actuel. Pour un navigateur, tel qu'un visionneur d'aide en ligne, cela signifie habituellement naviguer vers la sous-section, section, chapitre ou page de sommaire qui comprend le document actuel.
Home (Accueil) | Alt Origine | Se rend à la page d'accueil définie par l'utilisateur ou l'application.
Location... (Emplacement) | Ctrl L | Se rend vers un URI spécifié par l'utilisateur. Ouvrez une boîte de dialogue dans laquelle l'utilisateur peut saisir un URI approprié ou en sélectionner un dans une liste si c'est possible (par exemple, une boîte de dialogue de sélection de fichiers pour les applications qui prennent en charge les URI).

##### Un menu Aller à générique pour une application basée sur des documents

    Go (Aller à)
    Previous Page PgUp
    Next Page PgDn
    Go to Page... (Aller à la page)
    -
    First Page Ctrl+Home
    Last Page Ctrl+End

##### Éléments de menu Aller à pour une application basée sur des documents

Dénomination | Raccourci | Description
--- | --- | ---
Previous Page (Page précédente) | Page haut | Se rend à la page précédente du document.
Next Page (Page suivante) | Page bas | Se rend à la page suivante du document.
Go to Page... (Aller à la page) | Aucune | Se rend au numéro de page précisé par l'utilisateur. Ouvre une boîte de dialogue permettant à l'utilisateur de saisir un numéro de page. Les applications fondées sur du texte peuvent également inclure un élément de menu Aller à la ligne... qui permette à l'utilisateur de se rendre au numéro de ligne indiqué.
First Page (Première page) | Ctrl Origine | Se rend à la première page du document.
Last Page (Dernière page) | Ctrl Fin | Se rend à la dernière page du document.

#### Fenêtres

Le menu Fenêtres contient les commandes qui s'appliquent à toutes les fenêtres ouvertes de l'application. N'utilisez un menu Fenêtres que dans les applications à interface multi documents (MDI).

##### Applications MDI

L'utilisation d'application MDI n'est pas recommandée en raison des nombreux problèmes d'ergonomie inhérents au type.

Vous pouvez également nommer ce menu Documents, Tampons ou autrement selon le type de document pris en charge par l'application.

Le dernier élément de ce menu est une liste numérotée des fenêtres principales de l'application, par exemple 1listedecourses.abw. La sélection de l'un des éléments amène la fenêtre correspondante au premier plan.

##### Un menu Fenêtres générique

    Windows (Fenêtres)
    Save All (Enregistrer tout)
    Close All (Fermer tout)

##### Éléments de menu Fenêtres

Dénomination | Raccourci | Description
--- | --- | ---
Save All (Enregistrer tout) | Aucune | Enregistre tous les documents ouverts. Si des documents n'ont pas de nom courant de fichier, invitez l'utilisateur à en donner un pour chacun d'entre eux tour à tour avec la boîte de dialogue standard Enregistrement.
Close All (Fermer tout) | Aucune | Ferme tous les documents ouverts. S'il y a des modifications non enregistrées dans des documents, affichez tour à tour un message d'alerte pour confirmation pour chacun d'eux.
1. Titre de la première fenêtre ouverte 2. Titre de la seconde fenêtre ouverte etc. | Aucune | Amène au premier plan la fenêtre correspondante.

#### Aide

Le menu Aide donne accès à toute la documentation en ligne de l'application, y compris, à la fois, au guide utilisateur et à la fenêtre À propos qui comporte une brève description des fonctionnalités de l'application.

##### Un menu Aide générique

    Help (Aide)

    Contents F1
    About (À propos)

##### Éléments de menu Aide

Dénomination | Raccourci | Description
--- | --- | ---
Contents (Sommaire) | F1 | Ouvre le navigateur par défaut à la page du sommaire de l'application.
About (À propos) | Aucune | Ouvre la boîte de dialogue À propos de l'application. Utilisez la boîte de dialogue standard fournie par les bibliothèques GNOME ; elle contient le nom et le numéro de version de l'application, une brève description de ses fonctionnalités, la manière de contacter l'auteur, le message de copyright et un pointeur vers la licence sous laquelle l'application est disponible.

## Barres d'outils

Une barre d'outils est une bande de contrôles qui permet un accès pratique aux fonctions couramment utilisées. La plupart des barres d'outils contiennent seulement des boutons graphiques, mais, dans des applications plus complexes, d'autres types de contrôles comme des listes déroulantes peuvent être utilisés.

### Exemple de barre d'outils pour une simple application de courriel

Exemple de barre d'outils pour une simple application de courriel

Une conception de barre d'outils soignée et cohérente accélère la tâche de l'utilisateur en fournissant un accès direct aux fonctions qui sinon seraient cachées dans un menu. Utilisez-les néanmoins seulement pour les fonctions les plus importantes. Trop de contrôles dans la barre d'outils réduit son efficacité en les rendant plus difficiles à trouver et trop de lignes de barre d'outils réduisent la quantité d'espace disponible à l'écran pour le reste de l'application.

### Apparence et contenu

L'efficacité des barres d'outils est augmentée en maintenant un niveau de cohérence entre les différentes applications. La barre d'outils est une des premières parties de l'application que les utilisateurs voient au premier lancement, donc en fournissant une barre d'outils qui semble familière, vous pouvez immédiatement les mettre en confiance avec votre application.

Suivez non seulement les recommandations et les exemples fournis dans cette section, mais également observez les barres d'outils dans les autres applications GNOME 2.0 bien conçues, pour vous guider dans vos décisions sur ce qu'il faut ou ne faut pas mettre dans la barre d'outils de votre application.

Cependant beaucoup de barres d'outils ou de boîtes à outils proposées par votre application, fournissent une barre d'outils principale par défaut qui contient un sous-ensemble représentatif des fonctionnalités globales de l'application. Beaucoup de boutons de cette barre d'outils seront les mêmes, indépendamment du type d'application.

Par exemple, la barre d'outils principale dans une application de bureautique possèdera presque toujours les trois boutons Nouveau, Ouvrir et Enregistrer comme premiers boutons. De même les premiers boutons d'un navigateur doivent toujours inclure Reculer, Avancer, Arrêter et Recharger dans cet ordre.

#### Conseils

- Ne mettez que les fonctions de l'application les plus fréquemment utilisées dans vos barres d'outils. Ne mettez pas un bouton pour chaque élément de menu.

- Par défaut, faites apparaître vos barres d'outils directement sous la barre de menu principale.

- Faites en sorte que vos barres d'outils puissent être affichées ou masquées dans la boîte de dialogue Préférences de votre application et en utilisant l'élément de menu Affichage Barre d'outils. S'il y a plus d'une barre d'outils, elles sont individuellement affichées ou masquées à l'aide d'entrées dans un sous-menu Affichage Barre d'outils.

- Toutes les fonctions qui apparaissent dans les barres d'outils doivent également être accessibles via la barre de menu principale, soit directement (i.e. un élément de menu équivalent) ou indirectement (par ex. dans la boîte de dialogue Options Paramètres).

- Classez les boutons de la barre d'outils dans le même ordre et avec les mêmes groupements que leurs équivalents dans la barre de menu principale. En particulier, regroupez toujours les ensembles de boutons s'excluant mutuellement.

- N'ajoutez pas de boutons Aide, Fermer ou Quitter à votre barre d'outils par défaut : ils sont rarement utilisés et la place sera mieux employée avec des contrôles plus utiles. Ainsi, mettez les boutons Annuler, Refaire et les fonctions standards du presse-papier s'il y a assez d'espace sur la barre d'outils pour le faire sans sacrifier des contrôles plus utiles spécifiques à l'application.

- Fournissez des options pour afficher les boutons de la barre d'outils sous forme texte, icônes ou les deux — consultez la pour les menus à utiliser pour contrôler l'affichage de la barre d'outils. Prévoyez également une option pour remettre toutes les barres d'outils de votre application dans l'état défini par défaut dans le centre de contrôle pour ce réglage.

- Permettez aux utilisateurs de configurer les barres d'outils avec leur propre sélection de commandes dans l'ordre qu'ils préfèrent. Fournissez une option dans la boîte de dialogue de configuration qui remet les barres d'outils dans la configuration par défaut.

- Enregistrez la position et le contenu des barres d'outils comme une entité propre de la configuration de l'application et rétablissez-les lorsque l'application est lancée à nouveau.

#### Barres d'outils verticales

En général, n'utilisez pas de barre d'outils verticales. L'œil ne parcourt pas aussi facilement la verticale que l'horizontale, les regroupements de boutons qui s'excluent mutuellement sont moins évident et l'affichage des étiquettes de boutons est plus délicat et moins efficace en terme d'espace. De plus, certains contrôles de barre d'outils ne peuvent tout simplement pas être utilisés verticalement comme les listes déroulantes.

N'utilisez une barre d'outils verticale seulement si :

- la configuration de la fenêtre application implique qu'il y aurait beaucoup d'espace perdu si une barre horizontale était utilisée à la place ou

- votre application nécessiterait autrement la présence de trois rangées (ou plus) de barres d'outils sous la barre de menu principale par défaut. Notez cependant que dans cette situation, la meilleure alternative serait d'afficher moins de barres d'outils par défaut.

Si vous devez utiliser une barre d'outils verticale, assurez-vous que l'utilisateur puisse la disposer horizontalement s'il préfère.

#### Barres d'outils de lecture multimédia

Beaucoup d'applications sont capables de jouer du son ou une vidéo. Par cohérence, présentez toujours les boutons qui contrôlent la lecture dans le même ordre et avec la même collection d'icônes.

##### Conseils

- Affichez des boutons Arrêt et Pause distincts. Ne modifiez pas le bouton Jouer en bouton Pause pendant la lecture du morceau.

### Contrôle de l'affichage et de l'apparence

Pour chaque barre d'outils de votre application, l'utilisateur doit être capable de choisir d'afficher ou non cette barre d'outils et d'afficher son contenu sous forme d'icônes seulement, textes seulement ou les deux.

#### Conseils

- Permettez à l'utilisateur de modifier les valeurs par défaut du centre de contrôle pour votre application dans la boîte de dialogue Préférences de l'application. En particulier, assurez-vous que l'utilisateur peut :

  - choisir séparément d'afficher chaque barre d'outils de l'application avec des icônes seulement, du texte seulement ou les deux,

  - reconfigurer l'état icône/texte/les deux pour toutes les barres d'outils de l'application à la valeur par défaut du système,

  - choisir d'afficher les étiquettes texte, soit sur le côté de certaines, soit en dessous de toutes les icônes de la barre d'outils et revenir aux paramètres par défaut du système,

  - reconfigurer l'agencement et l'ordre de toutes les barres d'outils de l'application aux valeurs par défaut.

- Si votre application possède une seule barre d'outils, permettez à l'utilisateur de l'afficher ou pas avec un élément de menu case à cocher Affichage Barre d'outils.

- Si votre application possède deux ou trois barres d'outils, permettez à l'utilisateur de les afficher ou pas individuellement en plaçant un élément de menu pour chacune d'elle dans le menu Affichage de l'application. Par exemple, Barre d'outils principale, Barre d'outils dessin, Barre d'outils format. Placez les éléments ensemble dans un seul groupe dans le menu, en mettant la Barre d'outils principale en premier (si votre application en possède une), suivie des autres dans l'ordre alphabétique.

- Si votre application possède plus de trois barres d'outils, permettez à l'utilisateur de les afficher ou pas individuellement en plaçant un élément de menu pour chacune d'elle dans un sous-menu Barre d'outils du menu Affichage de l'application. Placez l'élément Barre d'outils principale en premier (si votre application en possède une), suivi des autres dans l'ordre alphabétique.

  #### Exemple d'extraits de menu Affichage pour applications avec barre d'outils : une (à gauche), deux ou trois (au milieu) et quatre ou plus (à droite)

  Exemple de menu Affichage pour une application avec une seule barre d'outils

### Étiquettes et infobulles

La plupart des contrôles qui apparaissent dans vos barres d'outils auront besoin d'une étiquette textuelle qui apparaît sur, dessous ou à côté d'eux. Conservez cette description aussi courte que possible, préférablement un seul verbe, par exemple Ouvrir ou Annuler.

Tous les contrôles qui apparaissent dans vos barres d'outils devraient posséder une infobulle, que ce contrôle soit associé à une étiquette textuelle ou pas. Cette infobulle doit être une description concise du contrôle mais doit fournir plus d'informations que son étiquette textuelle si possible. Par exemple, Ouvre un document existant ou Annule la dernière opération.

#### Conseils

- Pour les boutons qui correspondent directement aux éléments de menu, l'étiquette textuelle doit être la même que l'élément de menu mais sans point de suspension terminal, par exemple Ouvrir, Enregistrer.

- Ne fournissez pas de touche d'accès pour les boutons de barre d'outils. Puisque les barres d'outils sont dans le même contexte de focus clavier que la barre de menu, il serait trop difficile de fournir des touches d'accès uniques pour chaque titre de menu et chaque contrôle de barre d'outils. Les barres d'outils sont essentiellement conçues comme des raccourcis pour les utilisateurs de la souris, bien qu'il soit possible de naviguer parmi elles grâce au clavier pour des raisons d'accessibilité.

- Si votre barre d'outils est configurée pour afficher les étiquettes sous les icônes des boutons, affichez une étiquette pour chaque contrôle de la barre d'outils. Par exemple :

  #### Barre d'outils avec des étiquettes sous tous les boutons

  Barre d'outils affichant des étiquettes sous tous les boutons

- Si votre barre d'outils est configurée pour afficher les étiquettes à côté du bouton plutôt qu'en dessous (en utilisant le réglage « texte prioritaire »), n'affichez pas les étiquettes de tous les boutons. Affichez les étiquettes seulement pour les boutons qui sont les plus fréquemment utilisés. Ne choisissez pas plus de quatre icônes de ce type par barre d'outils, sinon l'effet sera dilué et la barre d'outils deviendra trop étendue. Par exemple :

  #### Barre d'outils avec des étiquettes « texte prioritaire » à côté des quelques premiers boutons seulement

  Barre d'outils avec des étiquettes « texte prioritaire » à côté des quelques premiers éléments seulement

  Si vous n'êtes pas sûr des boutons les plus fréquemment utilisés, choisissez quelques boutons parmi les premiers de votre barre d'outils et ne mettez d'étiquettes qu'à ceux-là.

- Vérifiez que tous les contrôles de la barre d'outils possèdent des infobulles. L'infobulle doit être plus descriptive que l'élément correspondant du menu, s'il en possède une, mais néanmoins concise. Par exemple Ouvre un nouveau document pour le bouton de barre d'outils Ouvrir. Utilisez la mise en majuscule des phrases pour les infobulles — consultez la pour plus d'informations.

## 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)

Copie d'écran montrant l'apparence visuelle de contrôles case à cocher sensible et insensible

#### 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

Capture d'écran affichant les contrôles de serveur mandataire désactivés dans une boîte de dialogue propriétés d'un navigateur Web, sous la légende « Seul l'administrateur système peut modifier ces paramètres »

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

Capture d'écran d'une partie de boîte de dialogue contenant à la fois des champs de saisie mono ou multi-lignes

#### 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

  Un champ de saisie texte dans lequel l'utilisateur doit saisir une heure, avec l'étiquette « hh:mm » à côté pour indiquer le format requis

- 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

  Un champ de saisie texte dans lequel l'utilisateur doit saisir une date avec un bouton nommé « Sélectionner » à côté qui ouvre un contrôle GtkCalendar pour simplifier la tâche

  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

Une simple zone de sélection numérique utilisées pour spécifier l'espacement entre les différents applets d'un tableau de bord

#### 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

Un contrôle à glissière utilisé pour modifier la balance stéréo audio entre les haut-parleurs gauche et droite

#### 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

  Trois contrôles glissière utilisés pour modifier des valeurs RVB, chacun avec une zone de sélection numérique sur le côté pour faciliter une saisie numérique directe

### Boutons

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

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

Boutons Valider et Annuler tel que trouvés dans une boîte de dialogue modale

#### 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

Un groupement typique de cinq cases à cocher dans une boîte de dialogue

#### 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)

  Deux images : l'une montrant une seule case à cocher nommée de manière ambiguë « Barre de progression à gauche dans la barre d'état », l'autre rendant le choix plus explicite avec des boutons radio nommés « Gauche » et « Droite » sous une en-tête « Position de l'indicateur de progression de la barre d'état : ».

  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)

  This message is no up to date !!!

  Dans cet exemple, les deux fichiers sélectionnés sont masqués (puisque leur nom de fichier commence par un « . ») ; les emblèmes de leurs icônes montrent que l'accès en écriture n'est autorisé pour aucun mais que l'un deux peut être lu. La case à cocher Lisible est par conséquent affichée dans son état mixte.
  .

  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

Un groupement typique de trois boutons radio dans une boîte de dialogue

#### 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)

  Boutons radio affichant les styles Épais, Fin ou Pointillé pour une sélection de deux formes dans un application de dessin. L'une des formes est dessinée en style épais, l'autre en style pointillé. Les boutons radio Épais et Pointillé sont par conséquent affichés dans leur état mixte et le bouton radio Fin n'est pas activé.

  Dans ce cas, un clic sur un des boutons radio du groupe activera le bouton cliqué et désactivera tous les autres. Après cette opération, le groupe se comportera comme un groupe de bouton radio normal — il n'existe pas de moyen pour réinitialiser un bouton radio dans son état mixte en cliquant dessus. Mettez dans la fenêtre un bouton Réinitialiser ou équivalent qui permette de restituer les réglages mixtes précédents sans fermer la fenêtre ou annuler la boîte de dialogue.

- 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

Un groupement de quatre boutons bascules représentant un choix d'unité de mesure : pouces, centimètres, pieds et mètres

#### 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)

  Boutons bascules affichant le style de dessin Épais, Fin et Pointillé pour une sélection multiple de deux formes dans un application de dessin. L'une des formes est dessinée en style épais, l'autre en style pointillé. Les boutons bascules Épais et Pointillé sont par conséquent affichés dans leur état mixte et le bouton bascule Fin n'est pas activé.

### 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)

Deux images, l'une montrant une liste déroulante affichant la sélection actuelle, l'autre montrant son menu contextuel contenant les choix disponibles lors d'un clic

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

Deux images, l'une avec un champ de saisie d'une zone de liste déroulante modifiable affichant la sélection actuelle et l'autre affichant la liste déroulante des choix disponibles lors d'un clic

#### 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

Figure représentant un contrôle liste contenant deux colonnes de texte non triées

#### 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

  Image d'un contrôle liste avec deux colonnes. La première colonne est constituée de cases à cocher indiquant si l'élément correspondant dans la deuxième colonne est sélectionné ou pas pour une action ultérieure.

  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

Message not up to date

#### 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

  Image d'un contrôle arborescence à deux colonnes. La première colonne est constituée de cases à cocher indiquant si l'élément correspondant dans la deuxième colonne est sélectionné ou pas pour une action ultérieure.

  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

Figure d'un contrôle bloc-notes avec trois onglets

#### 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)

  Comparaison côte à côte d'un bloc-notes dont les onglets sont tous de même longueur et d'un autre dont les onglets sont juste assez long pour afficher correctement les étiquettes d'onglet. Ce dernier prend environ 33 % moins de place à l'écran.

- 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

Partie d'une fenêtre incluant un contrôle liste avec 7 éléments, chacun d'eux représentant une catégorie de réglages tels que « Apparence » et « Navigation ». Les contrôles du reste de la fenêtre changent en fonction de l'élément sélectionné dans la liste.

Comme dans cet exemple, placez la liste de contrôles sur le côté gauche de la fenêtre et la partie dynamique de la fenêtre immédiatement à la droite.

#### 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 »

Une simple boîte de dialogue de progression du temps restant

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 »

Une simple boîte de dialogue de progression du « temps-type restant »

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

Une simple barre de progression « durée indéterminée » montrant un curseur faisant des aller-retours jusqu'à la fin de l'opération

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

Une barre d'état en bas d'une fenêtre de document, affichant le niveau de zoom actuel et un message d'état indiquant que le document a été modifié depuis la dernière sauvegarde.

#### 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

  Une barre d'état avec un panneau de texte qui répond au double-clic, un bouton qui répond au simple clic et une zone de progression non-interactive

  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

Cadre affichant le style préférentiel décrit ci-dessus

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

Cadre affichant le style traditionnel décrit ci-dessus

#### 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.

## Retour d'informations

### Caractéristiques des applications réactives

Bien que les applications hautement réactives puissent différer énormément entre elles, ces application ont en commun les caractéristiques suivantes :

- elles donnent immédiatement un retour d'information aux utilisateurs même si elles ne peuvent pas satisfaire leurs requêtes immédiatement,

- elles gèrent les requêtes en file d'attente selon les perspectives des utilisateurs, éliminant les requêtes qui ne sont plus pertinentes et les réarrangeant selon les priorités probables des utilisateurs,

- elles permettent aux utilisateurs de faire d'autres tâches en attendant que les opérations de durée importante soient achevées — surtout celles ne résultant pas d'une demande de l'utilisateur — telles que la récupération de la mémoire non utilisée et autres opérations habituelles de « ménage »,

- elles donnent des retours d'informations suffisants pour permettre aux utilisateurs de comprendre ce qu'ils font et les organisent selon leurs capacités à les appréhender et à y réagir,

- elles font savoir aux utilisateurs que le traitement est en cours,

- elles permettent aux utilisateurs de savoir ou d'estimer le temps que les opérations vont prendre,

- elles permettent aux utilisateurs, d'une part de définir, lorsque c'est possible, le rythme du travail, d'autre part d'arrêter les tâches initiées mais non achevées.

Les applications hautement réactives donnent le contrôle aux utilisateurs en accusant réception de chacune de leurs demandes, en les informant continument sur la progression de la réalisation de chaque requête et en leur permettant d'effectuer les tâches dans un délai acceptable.

Même les applications avec des interfaces attractives et intuitives peuvent manquer de réactivité. Typiquement, les applications non réceptives possèdent au moins l'un des défauts suivants :

- elles fournissent un retour d'informations tardif — voire aucun — aux requêtes des utilisateurs, en les laissant se demander ce que l'application a fait ou est en train de faire,

- lorsqu'elles effectuent des opérations de longue durée, elles empêchent les utilisateurs de faire d'autres tâches ou d'annuler l'opération en cours,

- elles ne savent pas afficher une estimation de la durée des opérations de longue haleine et forcent les utilisateurs à attendre pour des durées imprévisibles,

- elles ignorent les demandes utilisateur quand elles font le « ménage courant » sans autorisation et forcent les utilisateurs à attendre un délai imprévu — souvent sans aucun retour.

Il est parfois possible d'améliorer la réactivité d'une application sans accélérer le code de l'application. Pour des astuces sur la façon de faire de telles améliorations, consultez la .

### Temps de réponse acceptables

Certains évènements de l'interface utilisateur nécessitent des délais de réponse plus courts que d'autres. Par exemple, la réponse d'une application à un clic de souris de l'utilisateur ou un appui sur une touche doit être beaucoup plus rapide que la réponse à une requête d'enregistrement de fichier. Le tableau ci-dessous affiche le délai de réponse maximum acceptable pour les évènements courants d'interface.

#### Temps de réponse acceptable maximum pour les évènements courants

Évènement UI | Temps de réponse maximal acceptable
--- | ---
Clic avec la souris, mouvement du pointeur, déplacement ou redimensionnement de fenêtre, appui sur une touche, mouvement de dessin, autre évènement d'entrée UI impliquant une coordination main-œil | 0,1 seconde
Affichage d'indicateurs de progression, accomplissement des commandes utilisateur ordinaires (par ex. fermeture de fenêtre), accomplissement des tâches d'arrière-plan (par ex. reformatage d'un tableau) | 1,0 seconde
Affichage d'un graphe ou de n'importe quoi d'autre pour lequel l'utilisateur s'attend à ce que ce soit long (par ex. affichage d'une nouvelle liste de toutes les transactions financières d'une entreprise pour une période comptable) | 10,0 secondes
Acceptation et traitement de toutes les entrées utilisateur pour une tâche | 10,0 secondes

Rendez chaque délai de réponse de votre application aussi court que possible, à moins que les utilisateurs n'aient besoin de temps pour consulter les informations affichées avant qu'elles ne soient effacées. Le délai de réponse acceptable pour chaque évènement se fonde sur l'intensité avec laquelle l'utilisateur moyen ressent le fait que tel ou tel évènement est un point logique sur lequel s'arrêter ou faire une pause. Plus ce sentiment est fort, plus l'utilisateur acceptera volontiers d'attendre une réponse. Vérifiez que votre application répond aux demandes des utilisateurs dans les limites énumérées dans le tableau ci-dessus. Si votre application ne peut pas répondre dans ces délais, elle présente probablement un ou plusieurs défauts d'ordre général dans un module ou un algorithme particulier.

#### Conseils

- Vérifiez que votre application fournit un retour d'information dans les 100 millisecondes (0,1 seconde) après chaque appui sur une touche, mouvement de souris ou autres entrées physiques de l'utilisateur.

- Vérifiez que votre application fournit un retour d'information dans les 100 millisecondes (0,1 seconde) après chaque modification d'état d'un contrôle qui réagit aux entrées de l'utilisateur — par exemple l'affichage des menus ou l'indication de cibles de dépôt.

- Vérifiez que votre application prend moins de 1 seconde pour afficher chaque indicateur de progression, réaliser chaque commande utilisateur ordinaire ou réaliser chaque tâche en arrière-plan.

- Vérifiez que votre application prend moins de 10 secondes pour accepter et traiter toutes les entrées utilisateur pour n'importe quelle tâche — dont les entrées utilisateur de chaque étape d'une tâche en plusieurs étapes, comme celles d'un assistant.

### Réponse aux requêtes utilisateur

Si votre application met trop de temps à répondre, les utilisateurs seront frustrés. Utilisez les techniques suivantes pour améliorer la réactivité de votre application.

#### Conseils

- Affichez le retour d'information dès que possible.

- Si vous ne pouvez pas afficher toutes les informations que l'utilisateur demande, affichez les informations les plus importantes d'abord.

- Gagnez du temps en affichant des résultats approximatifs pendant le calcul des résultats finals.

- Si les utilisateurs risquent de répéter une commande consommatrice en temps plusieurs fois de suite, gagnez du temps en maquillant les effets de la commande plutôt qu'en relançant de manière répétée le traitement de la commande. Par exemple, si l'utilisateur ajoute plusieurs lignes dans un tableau d'une base de données, vous pouvez afficher chaque nouvelle ligne immédiatement, tout en retardant leur création effective dans la base de données jusqu'à ce que l'utilisateur ait terminé l'ajout de toutes les lignes.

- Anticipez le travail. Préparez la réalisation de commandes qui, selon toute vraisemblance, succéderont à la commande actuelle. C'est-à-dire, utilisez les temps morts pour anticiper les requêtes que l'utilisateur lancera probablement à la suite. Par exemple, pendant que l'utilisateur d'une application de messagerie est en train de lire le nouveau message affiché, l'application peut préparer l'affichage du nouveau message suivant.

- Utilisez des traitements en arrière-plan. Réalisez les tâches moins importantes — telles que le ménage courant — en arrière-plan en permettant aux utilisateurs de poursuivre leur travail.

- Reportez le travail non urgent. Faites-le plus tard, lorsque il y a plus de temps disponible.

- Ne faites pas d'opérations superflues. Par exemple, pour se déplacer de plusieurs pages en arrière dans un navigateur Web, un utilisateur peut faire une succession rapide de clics sur le bouton Précédent du navigateur. Pour afficher plus rapidement la page effectivement demandée, le navigateur peut ne pas afficher les pages intercalées entre la page actuelle et la page finale.

- Utilisez la gestion dynamique du temps. Au cours de l'exécution, modifiez la façon dont votre application donne la priorité aux entrées utilisateur et aux autres traitements, en se fondant sur l'état actuel de l'application. Par exemple, si un utilisateur est en train d'effectuer de la saisie dans un traitement de texte pendant qu'un document autre est en cours d'impression, l'application de traitement de texte peut retarder la tâche d'impression si l'utilisateur engage une opération de modification (telle que couper et coller du texte) qui nécessite plus de ressources.

- Dans votre application, affichez une estimation du temps que va nécessiter chaque opération longue.

  - Si une commande demande une durée supérieure à 5 secondes avant de terminer son travail sur un objet, autorisez les utilisateurs à interagir avec les parties de l'objet ou les parties de l'application qui ne sont pas directement affectées par la commande.

  - Si la sortie d'une commande est de grande taille, affichez des résultats partiels dès leur disponibilité. Faites dérouler les résultats (si nécessaire) jusqu'à ce que l'utilisateur place le focus d'entrée sur un composant (par ex. une barre de défilement ou une zone de texte) impliqué dans le défilement.

### Types de retour d'information visuel

Vous pouvez utiliser deux types de retour visuel d'informations pour les opérations de votre application — un retour d'information à l'aide du pointeur et d'animations de progression.

#### Retour d'information avec le pointeur

Le retour d'information à l'aide du pointeur de souris consiste à modifier sa forme. Par exemple, un pointeur « occupé » indique une opération en cours ; l'utilisateur ne peut pas faire d'autres tâches. Un pointeur « occupé interactif » indique qu'une opération est en progression, mais que la fenêtre reste toujours interactive.

##### Pointeur occupé (à gauche) et pointeur occupé interactif (à droite)

Pointeur occupé (à gauche) et pointeur occupé interactif (à droite)

#### Animations de progression

Les animations de progression affichent, soit la proportion d'opération réalisée, soit seulement le fait que l'opération est en cours. Habituellement, ces animations prennent la forme, soit d'une barre de progression, soit d'une liste de contrôle de progression.

##### Conseils

- Lors de l'affichage d'une animation de progression, ouvrez-là dès le début de l'opération et fermez-la automatiquement dès que l'opération est terminée.

- Utilisez une barre de progression à mesure si votre application peut estimer, soit la durée de l'opération, soit sa proportion de réalisation.

- Si votre application ne peut pas faire d'estimation et que l'opération n'a qu'une étape, utilisez un indicateur de progression indéterminée. Pour les opérations à deux ou plusieurs étapes, utilisez une liste de contrôles de progression qui affiche dynamiquement une coche pour chaque étape réalisée.

##### Barres de progression

Pour des informations sur les différents types de barres de progression et quand les utiliser, consultez la .

###### Fenêtres de progression versus barre d'état

Dans une application dont les fenêtres principales contiennent une barre d'état (qui elle-même contient une barre de progression), se pose souvent le cas de présenter le retour d'informations d'une opération, soit dans la barre d'état, soit dans une fenêtre de progression. Une règle d'usage consiste à utiliser la barre d'état lorsqu'une opération doit durer moins de cinq secondes, sinon la fenêtre de progression. Cependant réfléchissez à ce qui suit au moment de faire un choix entre les deux :

- L'ouverture d'une nouvelle fenêtre, particulièrement lors d'une opération courte, peut, sans nécessité, interrompre le déroulement du travail de l'utilisateur.

- Les fenêtres de progression peuvent fournir plus d'informations.

- Plusieurs fenêtres de progression peuvent être ouvertes en même temps alors qu'une barre d'état ne peut afficher qu'une seule et unique opération.

- Les fenêtres de progression disposent d'un bouton Annuler.

##### Fenêtres à liste de contrôle

Une fenêtre de liste de contrôle affiche la succession des étapes d'une opération. Consultez la .

###### Une fenêtre de liste de contrôles

Une fenêtre de liste de contrôles affichant une succession d'étapes

### Choix d'un retour d'information approprié

Pour déterminer le type de retour d'information à fournir pour une opération particulière, prenez en considération ces facteurs :

- L'application peut-elle fournir une estimation de la progression de l'opération ou pas.

- L'opération bloque-t-elle l'utilisateur dans l'exécution d'autres commandes de l'application ou pas.

- L'application possède-t-elle un espace dédié, tel qu'une barre d'état, pour indiquer l'état des opérations ou pas.

Le tableau ci-dessous affiche le type de retour d'information à utiliser pour les opérations nécessitant plus d'une 1 seconde pour se terminer. Dans la colonne « Retour approprié », le terme « Animations de progression interne » signifie animations de progression affichées dans une zone d'état dédiée d'une application et « Animations de progression externe » signifie animations de progression affichées ailleurs que dans une zone d'état dédiée — typiquement dans une boîte de dialogue d'alerte.

#### Types de retour d'information pour les opérations qui durent plus d'une seconde

Durée-type > 5 s. ? | Blocage pour exécuter d'autres commandes ? | L'application a-t'elle une zone d'état dédiée ? | Retour d'information approprié
--- | --- | --- | ---
Oui | Oui | Oui | Animation interne plus retour d'information au pointeur
Oui | Oui | Non | Retour d'information au pointeur
Oui | Non | Oui | Animation interne
Non | Oui | Oui | Animation interne plus retour d'information au pointeur
Non | Oui | Non | Animation externe plus retour d'information au pointeur
Non | Non | Oui | Animation interne
Non | Non | Non | Animation externe

#### Conseils

- Utilisez un pointeur occupé lorsque l'interaction de l'utilisateur est bloquée par votre application pendant plus d'une seconde. Affichez le pointeur occupé moins d'une seconde après le début de l'opération.

- Si une commande doit prendre 10 secondes ou plus pour se terminer, mettez un bouton Arrêter ou Annuler également activable en appuyant sur la touche Échap ; les utilisateurs peuvent ainsi interrompre le traitement de la commande même si l'application ne peut pas en annuler les effets. Consultez la .

- Lorsque vous utilisez une animation externe, laissez la fenêtre contenant l'animation à l'écran pendant au moins une seconde après que l'opération soit achevée avec un message de terminaison avec succès. Modifiez les boutons Arrêter ou Annuler en bouton Valider pendant ce temps — un appui sur ce bouton doit fermer la fenêtre immédiatement.

### Autoriser l'arrêt d'une commande

Les utilisateurs ont parfois besoin d'interrompre une commande — par exemple, parce qu'elle prend trop de temps. L'application doit permettre aux utilisateurs d'arrêter les commandes en cours, même si l'arrêt d'une commande peut ne pas annuler ou « revenir en arrière » sur tous les effets de la commande.

#### Conseils

- Placez un bouton Arrêter ou Annuler également activable en appuyant sur Échap à côté de l'animation de progression pour une commande qu'il est possible d'interrompre.

- Nommez le bouton Annuler si l'opération complète peut être abandonnée proprement sans effet collatéral, en laissant le système dans l'état où il était avant le lancement de l'opération. Terminez la commande immédiatement lorsque l'utilisateur appuie sur le bouton.

- Nommez le bouton Arrêter si la commande peut être interrompue mais que ses effets jusqu'au moment de l'arrêt ne peuvent pas (ou ne doivent pas) être annulés. Lorsque l'utilisateur appuie sur ce bouton, ouvrez une boîte de dialogue d'alerte prévenant des effets potentiellement risqués d'un arrêt de la commande. La boîte de dialogue d'alerte ne doit comporter que deux boutons : l'un pour continuer le traitement de la commande, l'autre pour la terminer immédiatement.

Vous disposez également de l'alternative de placer le bouton Arrêter ou Annuler près du contrôle avec lequel l'utilisateur a lancé la commande à arrêter. Ne placez le bouton ici que si :

- il n'y a aucune animation de progression pour la commande ou

- l'animation de progression est dans la zone d'état d'une fenêtre ou à un autre endroit qui manque de place pour mettre un bouton Arrêter ou Annuler.

Dans la boîte d'alerte qui apparaît après l'appui sur le bouton Arrêter, assurez-vous que le message et les étiquettes des boutons de la boîte d'alerte sont précis et explicites. Des étiquettes de bouton ambiguës peuvent faire que les utilisateurs mettent fin ou continuent une commande contrairement à leur intention. Par exemple, utilisez :

    Poursuivre la suppression des fichiers ? [Confirmer la suppression]
      [Arrêter la suppression]

plutôt que

    Opération interrompue, continuer ? [Oui]
       [Non]

car dans ce dernier exemple, il n'est pas clair qu'un clic sur Oui continue l'opération ou continue la suppression (c'est-à-dire, arrête l'opération).

## Conception visuelle

La conception visuelle ne consiste pas qu'à rendre votre application séduisante. Une bonne conception visuelle concerne la communication. Une application bien conçue facilite la compréhension de l'information présentée à l'utilisateur et lui affiche clairement le comment d'une interaction avec cette même information. Si vous parvenez à cet objectif, votre application sera jolie pour l'utilisateur, même si elle n'a pas de graphiques sophistiqués ou de logos animés.

### Couleur

La couleur est un bon outil pour communiquer des informations dans une interface utilisateur. Par exemple, elle peut être utilisée pour :

- renforcer l'apparence d'un bureau en améliorant un thème,

- accentuer une alerte dynamique dans une application de gestion de système,

- mettre en valeur un élément dans une longue liste pour faciliter sa lecture,

- ajouter une touche esthétique agréable à une icône.

Cependant, la couleur doit toujours être vue comme un complément utile au design et non pas comme une nécessité. Ne tablez jamais uniquement sur la couleur pour afficher les informations importantes ; gardez à l'esprit que votre application doit toujours être utilisable, même si les couleurs ne peuvent pas être perçues correctement (par exemple, si l'utilisateur a un système 8-bits ou est daltonien).

#### Palette

Une palette de 32 couleurs a été développée pour le bureau GNOME. La palette peut être téléchargée sur http://developer.gnome.org/projects/gup/images/ximian-palette. Pour l'utiliser dans The GIMP, enregistrez-la dans votre dossier `gimp_1.2/palettes` et redémarrez The GIMP. Une palette unique utilisée de manière cohérente aide à donner une apparence uniforme au bureau en minimisant les distractions visuelles. Si vous avez besoin d'une couleur plus foncée ou plus claire que les couleurs de cette palette basique (par ex. pour l'anticrénelage) choisissez une couleur qui est la plus proche de la teinte dont vous avez besoin puis assombrissez ou éclaircissez comme vous le souhaitez.

##### La palette de base à 32 couleurs de GNOME

La palette de base à 32 couleurs de GNOME

##### Valeurs RVB et hexadécimales de la palette de base

Couleur | Description | RVB | Hex | Couleur | Description | RVB | Hex
--- | --- | --- | --- | --- | --- | --- | ---
| 3D basique clair | 234 232 227 | #EAE8E3 |  | 3D basique moyen | 186 181 171 | #BAB5AB
| 3D basique foncé | 128 125 116 | #807D74 |  | 3D basique obscur | 86 82 72 | #565248
| Vert clair | 197 210 200 | #C5D2C8 |  | Vert moyen | 131 166 127 | #83A67F
| Vert foncé | 93 117 85 | #5D7555 |  | Vert obscur | 68 86 50 | #445632
| Rouge clair | 224 182 175 | #E0B6AF |  | Rouge moyen | 193 102 90 | #C1665A
| Rouge foncé | 136 70 49 | #884631 |  | Rouge obscur | 102 56 34 | #663822
| Violet clair | 173 167 200 | #ADA7C8 |  | Violet moyen | 136 127 163 | #887FA3
| Violet foncé | 98 91 129 | #625B81 |  | Violet obscur | 73 64 102 | #494066
| Bleu clair | 157 184 210 | #9DB8D2 |  | Bleu moyen | 117 144 174 | #7590AE
| Bleu foncé | 75 105 131 | #4B6983 |  | Bleu obscur | 49 78 108 | #314E6C
| Chair claire | 239 224 205 | #EFE0CD |  | Chair moyenne | 224 195 158 | #E0C39E
| Chair foncée | 179 145 105 | #B39169 |  | Chair obscure | 130 102 71 | #826647
| Rouge vif | 223 66 30 | #DF421E |  | Rouge vif foncé | 153 0 0 | #990000
| Jaune vif | 238 214 128 | #EED680 |  | Jaune vif foncé | 209 148 12 | #D1940C
| Vert vif | 70 160 70 | #46A046 |  | Vert vif foncé | 38 199 38 | #267726
| Blanc | 255 255 255 | #ffffff |  | Noir | 0 0 0 | #000000

#### Teinte, luminosité, contraste

Les utilisateurs ayant des problèmes de vision, tels que les daltoniens ou les mal-voyants, ont besoin d'alternatives aux réglages par défaut. Une bonne interface utilisateur anticipe ces besoins en fournissant des préférences personnalisées et une prise en charge des thèmes favorisant l'accessibilité. Meilleure encore est une application déjà configurée par défaut avec un choix soigneux des couleurs et des contrastes.

Il est estimé que 11 % de la population mondiale a des problèmes de vision des couleurs. Les personnes atteintes ont typiquement des problèmes pour distinguer certaines teintes comme le rouge et le vert (deutéranopie ou protanopie) ou le bleu et le jaune (tritanopie). Par conséquent, il est nécessaire de permettre à l'utilisateur de personnaliser les couleurs dans toutes les parties de votre application qui transmettent des informations importantes. Cela signifie que votre application doit effectivement transmettre les informations en utilisant uniquement les couleurs d'un thème que l'utilisateur choisirait.

Un outil important pour passer en revue les informations sur le daltonisme et vérifier l'éligibilité des images pour les utilisateurs mal-voyants est Vischeck, un outil en ligne qui simule la façon dont une image ou un site Web apparaît pour un utilisateur atteint de deutéranopie, protanopie ou tritanopie.

##### Comment la terre apparaît pour un utilisateur avec une vision normale des couleurs (à gauche), deutéranopie (au milieu) et tritanopie (à droite) (images extraites de http://www.vischeck.com).

Photo de la terre tel qu'elle apparaît à un utilisateur avec une vision normale | Photo de la terre tel qu'elle apparaît à un utilisateur atteint de daltonisme rouge-vert | Photo de la terre tel qu'elle apparaît à un utilisateur atteint de daltonisme bleu-jaune

D'autres utilisateurs ont plutôt plus de problèmes avec les niveaux de contraste qu'avec la couleur à l'écran. Certains utilisateurs ont besoin d'un fort niveau de contraste entre les couleurs de l'arrière-plan et du premier plan, telles que noir sur blanc, blanc sur noir ou une autre combinaison à fort contraste. D'autres ressentent un inconfort à moins d'utiliser un réglage à faible contraste, tel que texte gris sur un arrière-plan gris clair.

Vous pouvez répondre à ces besoins en vous assurant que votre application prend en charge les thèmes accessibles de GNOME (que l'on peut trouver dans le module gnome-themes dans cvs) ; il inclut des thèmes à fort et faible contraste et des thèmes à grande taille. Cela signifie que vous devez fournir les tailles par défaut et les grandes tailles pour l'ensemble des icônes à contraste fort, faible et normal avec l'application.

##### Conseils

- Utilisez la palette de couleur GNOME. Si vous avez besoin d'une teinte plus foncée ou plus claire partez d'une des couleurs de la palette et assombrissez ou éclaircissez suivant le besoin.

- N'utilisez pas la couleur comme seul moyen de distinguer les éléments d'informations. Toutes les informations doivent également être fournies par au moins une autre méthode telle que la forme, la position ou une description textuelle.

- Assurez-vous que votre application ne dépend pas d'un thème particulier. Testez-la avec différents thèmes, plus particulièrement les thèmes d'accessibilité à fort et faible contraste qui utilisent moins de couleurs, pour vérifier que votre application respecte les réglages. Par exemple, tous les textes doivent apparaître avec couleur de premier plan sur couleur d'arrière-plan spécifiées dans le thème choisi.

- Choisissez les couleurs avec soin. Lorsqu'elles doivent être différentes de manière reconnaissable, choisissez les couleurs claires parmi l'orange, jaune, vert ou bleu-vert, les foncées parmi le bleu, violet, mauve ou rouge car la plupart de gens atteints de daltonisme voient le bleu, violet, mauve et rouge aussi foncé que les couleurs normales.

### Agencement des fenêtres

#### Généralités

Le positionnement des composants visuels dans une application est important parce que les relations entre éléments dépendent de leurs positions. C'est ce qui s'appelle « l'agencement » dans la conception d'interface.

Un agencement propre est crucial pour créer un flux visuel régulier d'informations pour l'utilisateur. Cette section décrit le positionnement correct des composants et l'espacement à utiliser dans les applications GNOME. Les principaux composants détaillés sont l'étiquette, l'icône, le bouton radio et la case à cocher, le champ texte, le bouton de commande et le menu déroulant.

#### Boîtes de dialogue

Lorsqu'un utilisateur parcourt une boîte de dialogue Préférences complexe, composée de nombreuses étiquettes et leurs cases à cocher associées, de champs de texte et de zones de liste déroulante modifiable, il est facile de voir comment elle peut rapidement être encombrée si l'agencement est pauvre au niveau de la conception visuelle. Pour des informations sur l'agencement des alertes, consultez la .

##### Agencement de fenêtre amélioré

Agencement initial avec un alignement pauvre et un usage limité des espaces vides | L'agencement est amélioré avec moins de points d'alignement, les cadres sont supprimés pour remédier à l'encombrement et les regroupements plus clairs utilisent des espaces vides

Dans la , la boîte de dialogue sur la gauche présente des étiquettes qui ne sont pas alignées à gauche. L'œil de l'utilisateur n'a pas de repère visuel correct pour parcourir la boîte de dialogue rapidement.

Comme les étiquettes sont toutes de longueur voisine, elles doivent être alignées à gauche. Maintenant l'utilisateur a une marge gauche ferme pour accrocher l'œil et parcourir plus facilement la liste des éléments verticaux. Si la plupart des étiquettes d'un groupement ont des longueurs différentes, alignez-les plutôt à droite afin que les contrôles ne finissent pas par être trop loin des étiquettes correspondantes.

L'utilisation de cadres avec des bordures visibles pour séparer des groupes dans une fenêtre est déconseillée. Utilisez des espaces et des en-têtes en gras à la place. C'est plus efficace parce qu'il y a moins de lignes inutiles pour distraire l'utilisateur du contenu principal de la fenêtre. Consultez la pour plus de détails.

Essayez de conserver une certaine concordance entre composants en terme de taille et d'alignement. Ceci est particulièrement important dans un groupe de contrôles pour que la capacité de l'utilisateur à rapidement parcourir l'information ne soit pas sacrifiée. Réduisez autant que possible le besoin de l'œil de l'utilisateur de s'éparpiller lorsqu'il parcourt un agencement.

##### Spécifications de l'agencement

L'agencement est amélioré avec moins de points d'alignement, les cadres sont supprimés pour remédier à l'encombrement et les regroupements plus clairs utilisent des espaces vides

##### Conseils

- Laissez une bordure de 12 pixels entre le bord de la fenêtre et les contrôles les plus proches.

- Laissez un espace horizontal de 12 pixels entre un contrôle et son étiquette (l'espace peut être plus grand pour d'autres contrôles du même groupe à cause des différences de longueur entre étiquettes).

- Les étiquettes doivent être courtes et garder un sens sorties du contexte. Sinon les utilisateurs qui utilisent des lecteurs d'écran ou des technologies d'assistance similaires ne seront pas capables de comprendre immédiatement la relation entre un contrôle et ceux qui l'entourent.

- Fournissez des touches d'accès pour tous les contrôles modifiables. Vérifiez que l'utilisation des touches d'accès donne bien le focus aux contrôles associés.

#### Espacement et alignement

Donnez un espace suffisant entre les contrôles et les groupes de contrôles. Cet espace vide facilite la recherche de l'information utile pour l'utilisateur.

##### Conseils

- Comme règle de base, laissez de l'espace entre les composants de l'interface utilisateur par incréments croissants de 6 pixels lorsque la relation entre les éléments reliés devient plus distante. Par exemple, entre les étiquettes de l'icône et les graphiques associés dans une icône, 6 pixels sont suffisants. Entre les étiquettes et les composants associés, laissez 12 pixels horizontaux. Pour l'espacement vertical entre les groupes de composants, 18 pixels sont suffisants. Un espacement général de 12 pixels est recommandé entre le contenu d'une boîte de dialogue et les bords de la fenêtre.

- Brisez les longues listes de choix en groupes plus petits. Pour les listes de moins de huit éléments environ, utilisez des boutons radio ou des cases à cocher. Pour les listes plus longues, utilisez un contrôle liste ou une liste déroulante.

- Essayez de garder les éléments du même type alignés à gauche avec les autres. Par exemple, sur la , les groupes nommés (Général et Actions) sont alignés à gauche et justifiés les uns par rapport aux autres.

- Indentez les membres des groupes de 12 pixels pour marquer la hiérarchie et l'association.

- Minimisez le nombre de points d'alignement dans votre fenêtre. Un point d'alignement est une ligne imaginaire verticale ou horizontale qui traverse la fenêtre et qui touche le bord d'un ou de plusieurs étiquettes ou contrôles de la fenêtre.

- Une justification à droite dans les groupes ou dans la fenêtre globale (comme indiquée par la ligne nommée « justification » dans la ) est plaisante à l'œil, mais non cruciale.

- Arrangez les composants de gauche à droite, de haut en bas. Généralement, le premier élément que l'utilisateur est sensé rencontrer devrait être en haut à gauche et le dernier en bas à droite. Gardez à l'esprit le fait que lorsqu'ils sont localisés pour les langues non occidentales, les interfaces peuvent être inversées pour être lues de la droite vers la gauche.

- L'utilisation des espaces vides ou « blancs » et de l'indentation pour délimiter les groupes est plus propre et préférable à l'usage de séparateurs graphiques tels que des cadres.

- Alignez les contrôles dans votre agencement très précisément. L'œil est très sensible aux objets alignés ou pas. Si rien ne s'aligne avec rien d'autre dans une fenêtre, il sera très difficile pour l'utilisateur de parcourir son contenu et de trouver l'information qu'il souhaite. Deux choses presque alignées, mais pas exactement, sont également gênantes.

- Soyez cohérent. Utilisez le même espacement, alignement et la même taille de composants dans toutes les boîtes de dialogue apparaissant dans une même application. Les boutons Valider et Annuler par exemple doivent tous apparaître exactement à 12 pixels verticaux et horizontaux du coin inférieur droit de chaque boîte de dialogue.

- Assurez-vous que les zones claires et sombres ainsi que les espaces sont distribués de manière uniforme dans la fenêtre. Gardez en tête que chaque contrôle ou groupe de contrôles dans votre fenêtre possède un « poids » visuel qui dépend de sa taille globale, de sa couleur et de la quantité de blancs qu'il contient. Les zones plus sombres, plus grandes sont plus « lourdes » alors que les plus pâles, plus petites sont plus « légères ».

- Ne concevez pas de fenêtres qui sont plus que 50 % plus longues dans un sens par rapport à l'autre. Les gens se sentent plus à l'aise en regardant des fenêtres et des boîtes de dialogue dont les dimensions respectent le nombre d'or (entre 1,6 et 1), un rapport que les artistes et architectes ont utilisé pour créer des peintures et constructions esthétiquement agréables depuis des milliers d'années.

### Étiquettes de texte

Pour un utilisateur qui possède une vision normale, les sorties texte fournissent la majorité de l'information et de retour dans la plupart des applications. Pour un utilisateur à la vue déficiente, qui n'est peut-être pas capable de voir et comprendre toute sortie graphique supplémentaire, une sortie textuelle claire est un point critique. Vous devez par conséquent choisir et placer le texte soigneusement à l'écran et laisser le choix de la police et de sa taille à l'utilisateur pour s'assurer que tous les utilisateurs sont capables d'utiliser l'application efficacement.

#### Espacement et alignement

Utilisez des espacements et alignements de texte uniformes dans toute l'application. Comme règle de base, laissez de l'espace entre les composants de l'interface utilisateur par incréments croissants de 6 pixels lorsque la relation entre les éléments reliés devient plus distante.

##### Alignement et espacement pour différents éléments texte

Élément | Positionnement | Exemple
--- | --- | ---
Grandes icônes (navigateur de fichiers) | Centré horizontalement et 6 pixels au dessous des grandes icônes | Grande icône avec du texte centré en dessous
Petites icônes (barre d'outils) | Centré verticalement et 6 pixels à droite des petites icônes | Petite icône avec du texte à sa droite
Étiquette de contrôle liste | 6 pixels au-dessus et aligné à gauche horizontalement avec le contrôle liste ou 12 pixels sur la gauche et aligné en haut horizontalement avec le contrôle liste | Contrôle liste avec l'étiquette de texte alignée horizontalement au-dessus
Étiquettes de case à cocher et bouton radio | 6 pixels à droite et centré verticalement avec le bouton radio | Bouton radio avec l'étiquette texte sur la droite
Étiquettes de champ texte | 6 pixels à gauche et centré verticalement avec le contrôle de champ de texte | Boîte de texte avec l'étiquette texte sur la gauche
Étiquettes de bouton | 12 pixels de remplissage de chaque côté du texte centré (et de tout graphique accompagnant). S'il apparaît dans un groupe de boutons, l'étiquette du bouton la plus longue définit la taille des boutons, centrez toutes les étiquettes des autres boutons et des graphiques accompagnant dans des boutons de même taille. | Boutons avec du texte centré

Autres étiquettes de composant (par ex. zones de sélection numérique, champs texte)

12 pixels entre la plus longue étiquette de texte et son composant associé, toutes les autres étiquettes de texte dans le groupement du composant sont alignées à gauche avec l'étiquette la plus longue. Toutes les étiquettes sont centrées verticalement par rapport à leur composant associé

Zone de sélection numérique avec une étiquette sur la gauche

##### Conseils

- Si l'étiquette précède le contrôle qu'elle nomme, terminez l'étiquette par deux-points. Par exemple, Courriel : pour nommer un champ de texte dans lequel l'utilisateur doit saisir son adresse électronique. Cela aide à l'identifier comme étant l'étiquette du contrôle au lieu que ce soit un élément indépendant. Certains utilitaires de consultation d'écran pour technologies d'assistance peuvent également utiliser la présence des deux-points pour identifier du texte en tant qu'étiquette de contrôle.

- Assurez-vous qu'une étiquette avec mnémonique est associée aux contrôles qu'elle nomme.

- Alignez à gauche les composants et les étiquettes à moins que toutes les étiquettes dans un groupe aient des longueurs très différentes. Dans ce cas, alignez plutôt à droite les étiquettes pour être sûr qu'aucun contrôle ne finisse par être trop éloigné de l'étiquette correspondante.

- Choisissez les noms des étiquettes avec soin. Donnez aux objets, même pris hors contexte, un nom porteur de sens. Les utilisateurs qui utilisent des lecteurs d'écran ou d'autres technologies d'assistance ne sont pas toujours capables de comprendre immédiatement la relation entre un contrôle et son environnement.

- Soyez cohérent avec l'usage des étiquettes ou leur sémantique. Par exemple, si vous utilisez la même étiquette dans différentes fenêtres, cela aidera si le même sens est utilisé dans les deux cas. De même n'utilisez pas d'étiquettes qui s'épèlent différemment mais se prononcent de la même manière, par ex. « dans » et « dent » ; cela pourrait être source de confusion pour les utilisateurs faisant usage de lecteurs d'écran.

- N'utilisez pas la même étiquette plus d'une fois dans une même fenêtre. Des outils comme les loupes ou les lecteurs d'écran ne permettant pas toujours d'informer l'utilisateur du contexte environnant, vous ne faciliteriez pas la tâche de ceux qui en font usage.

- Ne codez pas de manière permanente les styles et tailles des polices de caractères. L'utilisateur doit être capable d'adapter toutes les tailles et tous les styles.

- N'utilisez pas plus de deux ou trois polices de style et tailles différentes dans l'application ; choisissez-les visuellement différentes plutôt que d'aspect similaire dans une même fenêtre. Une profusion de tailles et de styles de police donne l'impression d'une interface encombrée et non-professionnelle ; elle est plus difficile à lire. En général, utilisez toujours des polices du thème actuel et indiquez des tailles relatives plutôt absolues.

- N'utilisez pas de toiles de fond graphiques ou de « filigranes » derrière du texte, autres que ceux définis par le thème choisi par l'utilisateur. Le fond influence le contraste entre texte et arrière-plan. Il peut en résulter des difficultés pour les utilisateurs qui ont des problèmes de vision et qui, par conséquent, habituellement choisissent toujours des thèmes avec des toiles de fond unies.

#### Usage des majuscules

Deux styles de mise en majuscule sont utilisés dans les éléments d'interface utilisateur de GNOME :

Usage des majuscules pour les titres

  (En anglais) Mettre des majuscules à tous les mots de l'élément sauf pour :

  - les articles : a (un, une), an (un, une), the (le, la, les).

  - les conjonctions : and (et), but (mais), for (pour), not (ne pas), so (ainsi), yet (encore)...

  - les prépositions de trois lettres ou moins : at (à), for (pour), by (par), in (dans), to (vers)...

Usage des majuscules pour les phrases

  Mettre en majuscule la première lettre du premier mot et de n'importe quels mots qui possède normalement une majuscule comme les noms d'application.

Le tableau suivant indique le style de mise en majuscule à utiliser pour chaque type d'élément de l'interface utilisateur.

##### Règle de style pour la mise en majuscule des éléments d'interface utilisateur

Élément | Style
--- | ---
Étiquettes de case à cocher | Phrase
Étiquettes de bouton de commande | En-tête
Étiquettes d'en-tête de colonne | En-tête
Étiquettes d'objet d'arrière-plan du bureau | En-tête
Messages de boîte de dialogue | Phrase
Étiquettes de zone de liste déroulante modifiable | Phrase
Étiquettes de boîte de liste déroulante | Phrase
Étiquettes de champ | Phrase
Noms de fichier | Phrase
Textes de remplacement de graphique : par exemple, texte « Alt » sur les pages Web | Phrase
Étiquettes de cadre ou de boîte de groupement | En-tête
Éléments dans les zones de liste déroulante modifiable, les boîtes de liste déroulante et les boîtes de liste | Phrase
Étiquettes de boîte de liste | Phrase
Éléments de menu | En-tête
Éléments de menu dans les applications | En-tête
Intitulés de menus des applications | En-tête
Étiquettes de bouton radio | Phrase
Étiquettes de glissière | Phrase
Étiquettes de zone de sélection numérique | Phrase
Titres de section d'onglet | En-tête
Étiquettes de boîte de texte | Phrase
Étiquettes de barre de titre | En-tête
Étiquettes de bouton de barre d'outils | En-tête
Infobulles | Phrase
Titres de page Web et éléments de navigation | En-tête

##### Directives pour la mise en majuscule dans d'autres langues

Les langues autres que l'anglais peuvent utiliser des règles différentes pour l'usage des majuscules. Par exemple, le suédois n'a pas le concept d'usage de majuscules dans les titres. Contactez le Projet traduction de GNOME si vous avez un doute sur la manière de mettre en majuscules dans une langue donnée.

### Polices

N'utilisez que des polices que l'utilisateur a définies dans son thème et des tailles relatives à la taille par défaut du thème. Cela offrira un maximum de lisibilité et d'accessibilité à tous les utilisateurs.

Ne mélangez pas plus de deux ou trois polices et styles (souligné, gras, italique) dans une même fenêtre : cela donne un aspect non professionnel et distrait l'utilisateur de l'information transmise.

Fournissez des alternatives au WYSIWYG (What You See Is What You Get) si possible. Certains utilisateurs peuvent avoir besoin d'imprimer le texte avec des petites polices, mais d'utiliser des grandes polices d'écran pour l'édition, par exemple. Les alternatives possibles comportent, soit l'affichage de tout le texte dans la même police et taille (toutes deux choisies pas l'utilisateur), soit une option « retour à la ligne automatique » qui permet de lire tout le texte d'une fenêtre sans défilement horizontal, soit un affichage en colonne unique (le contenu de la fenêtre est sur une seule colonne bien qu'il soit imprimé sur plusieurs colonnes), soit un affichage texte-seulement pour lequel les graphiques sont remplacés par des substituants ou des descriptions textuelles.

## Icônes

Les icônes sont des métaphores graphiques présentant une image visuelle que l'utilisateur associe à un objet, un état ou une opération en particulier. Lorsque l'utilisateur voit une bonne icône, il se souvient immédiatement de l'élément qu'elle représente, que cela soit une application dans le menu du tableau de bord ou le style « alignement à droite » dans la barre d'outils d'un traitement de texte.

- Les icônes peuvent aider l'utilisateur à parcourir rapidement un grand nombre d'objets pour choisir l'élément recherché. Plus particulièrement, une fois l'utilisateur accoutumé à l'apparence d'une icône, il l'identifie plus rapidement qu'un texte.

- Les icônes peuvent renforcer le texte en fournissant des suggestions visuelles d'accompagnement. Certaines choses sont plus faciles à faire passer avec un dessin, même tout petit.

- Les icônes peuvent représenter un grand nombre d'objets lorsqu'il n'y a pas suffisamment de place pour afficher des descriptions textuelles (comme dans une barre d'outils).

### Style

GNOME utilise un look tridimensionnel doux. Ce style est obtenu en utilisant des techniques d'anticrénelage, d'ombrage et de mise en valeur. Le tutoriel Icônes GNOME décrit comment l'un des artistes principal de GNOME crée certains de ces effets.

Les composants d'un style d'icône peuvent être divisés en plusieurs catégories telles qu'effet de perspective, de dimension dans l'espace, d'éclairage et palette. Ces composants jouent un rôle important pour donner à un groupe d'icônes ressemblance et distinction. Par exemple, l'apparence Java est reconnaissable par l'emploi d'une palette de huit couleurs principales, un éclairage interne et des gradients diagonaux. Le style Macintosh Aqua est reconnaissable par son emploi d'une palette fraîche à base de bleus, d'effets d'éclairages mimant des reflets et de l'anticrénelage. Le style GNOME présente une palette maîtrisée de trente-deux couleurs, des ombres projetés douces et un mélange entre le graphisme de bande-dessinée et le réalisme de la photo.

#### Un globe dans les différents styles d'icône

Java Metal | MacOS/X Aqua | GNOME
--- | --- | ---
Globe java | Globe aqua | Globe GNOME

#### Perspective

##### Perspective objets sur table

Présentez les objets comme s'ils étaient posés sur une table ou un bureau devant l'utilisateur.

##### Illustration d'une perspective objet sur table

illustration d'une perspective objet sur table

##### Perspective à plat

Présentez les objets comme s'ils étaient exposés sur une étagère à niveau d'œil. Donnez l'impression d'une parade d'identification par la police.

##### Illustration de la perspective à plat

illustration de la perspective à plat

#### Éclairage

##### En haut à gauche

Dessinez comme s'il y avait un éclairage provenant du coin supérieur gauche avec projection d'une douce ombre portée à l'intérieur des bordures 48x48 (taille de conception d'origine) de l'icône (120 degrés, distance de 4 pixels, 4 pixels d'estompage).

##### De face

Dessinez comme s'il y avait une source de lumière placée au dessus de l'objet posé à plat, projetant une ombre vers le bas.

#### Palette

Les icônes doivent utiliser des couleurs fondées sur la palette des trente-deux couleurs de base, en assombrissant ou éclaircissant les couleurs pour obtenir l'aspect souhaité. Consultez la

### Types d'icônes

#### Définition des différents types d'icônes utilisés par GNOME

Type d'icône | Tailles (pixels) | Perspective | Source d'éclairage | Exemples
--- | --- | --- | --- | ---
Icônes d'objet/de document | 24x24, 48x48*, 96x96 | Table | En haut à gauche | Diverses icônes d'objets
Icônes d'application | 24x24, 48x48* | Table | En haut à gauche | Diverses icônes d'application
Icônes de barre d'outils | 24x24*, 48x48 | À plat | De face | diverses icônes de barre d'outils
Icônes de menu | 16x16 | À plat | De face | diverses icônes de menu

(* indique la taille principale de ce type d'icône)

#### Icônes de document

Si possible, les icônes de document doivent traduire le type de fichier en utilisant un objet physique. Par exemple, une bonne icône pour les vidéo MPEG figure une pellicule de film. En cas d'inexistence d'un objet approprié, si un type de document correspond à une application donnée, l'autre option est d'utiliser, en tant qu'icône de document, une feuille de papier portant en superposition l'icône même de l'application. Cela peut se révéler approprié pour un type de document tel que les fichiers de paramétrage d'une application.

- N'affichez pas une feuille de papier derrière une icône de document si le type de document n'a pas d'usage en relation avec une feuille de papier physique (ou qu'un objet adéquat n'ayant pas été trouvé, vous utilisez l'icône de l'application). Par exemple, l'état final de la plupart des documents de traitement de texte est une feuille de papier, il est donc approprié d'utiliser une feuille de papier dans l'icône. A contrario, un film sur ordinateur a peu de lien avec une feuille de papier, donc une feuille de papier derrière un rouleau de film introduit essentiellement un bruit visuel. L'utilisation d'une feuille de papier dans la plupart ou tous les types de documents crée un problème supplémentaire : il devient plus difficile de parcourir un grand nombre d'icônes étant donné qu'elles n'ont pas de contour distinctif. Une technique utile pour créer des différences subtiles entre types de document de rôle similaire (par exemple, entre « JPEG », « PNG », « GIF », etc.) est d'utiliser des couleurs différentes. Les utilisateurs experts qui auraient besoin de faire la distinction fréquemment s'habitueront à ces différences.

- N'incorporez pas l'extension du fichier à l'icône. Le rôle de l'icône document n'est pas de fournir d'informations aussi précises mais de permettre une distinction visuelle rapide entre documents. De plus, ce texte ne sera pas affiché à l'aide de la police et à la taille des préférences utilisateur. Étant donné que beaucoup de types de fichier sont associés à de multiples extensions, l'extension de fichier incluse dans l'icône risque également d'être fréquemment fausse. Au cas où l'extension de fichier est réellement utile, l'application doit recomposer l'information sur l'icône au moment de l'exécution (par conséquent, en utilisant la police et taille correcte et en récupérant la bonne extension).

- Ne personnalisez pas les icônes de document pour un thème Nautilus particulier. Les icônes de document seront vraisemblablement utilisées en conjonction avec un grand choix de thèmes d'icônes ; elles doivent pouvoir fonctionner avec tout autre thème.

#### Icônes d'application

Une application qui prend en charge des documents doit refléter le type de document qu'elle gère dans son icône. Si le but principal d'une application est d'éditer un type particulier de document, elle doit utiliser cette icône de document comme icône.

#### Icônes de barre d'outils

L'idée d'une barre d'outils comparable à une étagère garnie d'outils doit guider la représentation des icônes de la barre d'outils. Les icônes de barre d'outils doivent donner l'impression d'être vues de face comme si elles étaient disposées sur une étagère au niveau d'œil. Certains guides de conception nomment cette perspective un « flush ».

- Assurez-vous que, dans une barre d'outils, les icônes utilisées ensemble sont faciles à distinguer visuellement. Essayez de différencier les silhouettes des icônes les unes des autres.

- Même si la plupart des utilisateurs affichent des icônes de barre d'outils à la taille de 24x24 pixels, il est important d'inclure un jeu d'icônes « grande taille » 48x48 pixels pour des raisons d'accessibilité.

- Souvent, nous n'aurez pas à concevoir vous-même les icônes de barre d'outils car GTK met à disposition une grande variété d'icônes dans son catalogue. Utilisez-les pour représenter l'événement ou l'objet pour lequel elles ont été conçues. Vous établirez ainsi un langage cohérent transversal aux applications et faciliterez aux utilisateurs la recherche d'éléments dans la barre d'outils. N'utilisez pas les icônes de barre d'outils du catalogue pour autre chose que ce pour quoi elles ont été prévues ; l'application ne serait pas cohérente avec les autres et les utilisateurs pourrait se tromper facilement.

  Pour explorer les icônes disponibles du catalogue, installez les paquets de développement pour GTK version 2.x et lancez `gtk-demo`. Double-cliquez sur Navigateur d'icônes et d'éléments du magasin pour activer le navigateur d'icônes. Notez que les icônes changent dans les résolutions disponibles donc les images présentées dans le navigateur d'icône ne doivent être prise que comme une indication de la qualité maximum d'une image. Pour afficher les images au format PNG, regardez dans le code source de GTK 2 dans `gtk/stock-icons`.

#### Icônes de menu

Les principes pour le dessin d'icônes de barre d'outils sont identiques à ceux des icônes de menus, mis à part une taille plus petite. S'il y a une icône de barre d'outils correspondante, une icône de menu doit reproduire son tracé.

### Conception d'icônes efficaces

#### Règle d'usage pour les métaphores d'icônes

« Si vous devez réfléchir en regardant une icône pour la " comprendre " c'est que la métaphore est trop complexe »

- #### Conception d'icônes fonctionnellement suggestives

  Les icônes doivent suggérer la fonctionnalité à laquelle elles sont associées. La meilleure icône suggèrera à l'utilisateur le but premier du programme ou de l'opération sans avoir à lire le texte d'accompagnement. Les utilisateurs reconnaissent les icônes fonctionnellement suggestives plus rapidement que les autres formes parce qu'elles s'associent directement à un objet physique ou à une action.

  #### Une icône fonctionnellement suggestive pour un traitement de texte

  Un document avec un crayon en train d'écrire dessus

  #### Une icône fonctionnellement suggestive pour le soulignement

  Un caractère souligné

- #### Fabrication d'icônes de silhouettes différentes

  Il est important de rendre facile la distinction visuelle des icônes qui seront utilisées ensemble, par exemple les icônes de barre d'outils et les icônes de document. L'œil de l'homme est excellent dans la distinction rapide d'éléments à partir de leur forme, donc une bonne manière d'aider vos utilisateurs à faire le tri parmi un grand nombre d'icônes est d'utiliser des formes différentes. Vous pouvez voir la forme d'une icône plus distinctement en la transformant en silhouette : noircissez toutes les zones de l'icône qui ne sont pas transparentes.

  #### Silhouettes différentes du thème d'icône GNOME

  Silhouettes de plusieurs icônes de barre d'outils

#### Suggestion de méthodes de dessin d'icônes de barre d'outils et de menu

Pour des raisons d'accessibilité, outre l'icône de taille et de contraste normal, vous devez créer des versions à haut et faible contraste et des versions de grande taille pour toutes les icônes. Voici le processus que nous suggérons pour intégrer de manière pratique ces contraintes dans la conception de l'icône :

1. Dessinez le contour de base à une taille la plus proche possible de 48x48 pixels :

2. Remplissez-le avec du blanc et du noir pour créer les détails. N'ajoutez pas de choses gratuites telles que des ombres portées ou l'anticrénelage :

3. Utilisez l'image ainsi obtenue en tant qu'icône de grande taille à fort contraste :

4. GNOME diminuera automatiquement la taille pour créer l'icône à fort contraste 24x24 :

5. ou vous pouvez créer à la main une version 24x24 qui sera meilleure au plan du contraste et de la finesse :

6. Ajoutez la couleur et l'anticrénelage à l'icône de grande taille à fort contraste :

7. Ajoutez des gradients pour un effet réaliste et doux :

8. Ajoutez une ombre portée (angle global de 120 degrés, distance de 4 pixels, flou de 4 pixels, opacité de 40 %) et utilisez l'image obtenue comme icône de grande taille et de contraste normal :

9. Maintenant vous devez créer à la main une version de cette icône à 24x24. Ne faites pas un simple changement d'échelle de la grande icône ; cette icône sera vue par la majorité des utilisateurs et le résultat du changement d'échelle sera moins net :

10. Créez un calque contenant le même contour et la même taille que l'icône de grande taille et de contraste normal puis superposez ceci sur l'icône de couleur. Donnez au calque superposé une opacité de 40 % et utilisez l'image obtenue comme icône de grande taille et faible contraste :

11. GNOME diminuera automatiquement la taille pour créer l'icône de faible contraste 24x24 :

12. ou vous pouvez créer à la main une version 24x24 qui sera meilleure au plan du contraste et de la finesse :

#### Problèmes à éviter

- ##### Évitez une icône suggestive par son nom

  Certaines icônes, telle que l'icône initiale du gestionnaire de fichiers Nautilus ne suggèrent pas le but du programme mais plutôt le nom du programme. Une icône fonctionnellement suggestive est préférable car une couche supplémentaire d'abstraction a été superposée (plutôt que de suggérer la gestion de fichiers par une icône représentant des fichiers, les utilisateurs doivent faire une première association entre gestion de fichiers et application Nautilus et une seconde association entre Nautilus et l'image d'un fossile de nautile). De plus, c'est une difficulté supplémentaire pour les nouveaux utilisateurs qui ne savent peut-être pas ce qu'est l'application « Nautilus » ; dans ce cas, ils n'associeront pas gestionnaire de fichiers et icône de coquillage.

  ##### L'icône originale suggestive par son nom pour Nautilus

  Une photo d'un coquille de nautile

- ##### N'incluez pas de texte significatif dans les icônes

  Évitez les icônes qui contiennent le texte du nom du programme. Elles ne contiennent effectivement pas de métaphore ou d'image qui permette à l'utilisateur de l'identifier et sont probablement plus difficiles à lire que la légende qui les accompagne. Puisque les icônes doivent accrocher l'œil, une icône plus difficile à identifier que du texte est potentiellement pire que pas d'icône du tout. C'est pourquoi, les « icônes texte » ne doivent pas être utilisées. De plus, il faut éviter le texte dans les icônes car cela induit des difficultés de traduction. Si néanmoins texte il y a dans les icônes, il ne doit pas être composé de mots de votre langue maternelle ; c'est une bonne façon de s'assurer que le texte indiqué ne confère pas de signification à l'icône.

  ##### Texte dans l'icône initiale de GEdit

  L'icône initiale de GEdit, un rectangle contenant le mot « GEdit ».

- ##### Ne présupposez pas que les utilisateurs possèdent telle ou telle information.

  Les icônes aléatoires semblent n'avoir aucun rapport avec l'application (sauf peut-être un étrange lien dans la pensée du développeur). Ces icônes ne doivent jamais être employées ; elles ne servent qu'à embrouiller l'utilisateur au lieu de l'aider. Le but d'une icône ne doit pas être « l'esthétique » ; c'est qu'un effet secondaire hautement souhaitable.

  Le logo du projet SodiPodi utilise un écureuil comme icône de l'application. Ainsi, étant donné que ce logo n'a pour l'utilisateur aucun rapport évident avec l'application, c'est une piètre icône. Assurez-vous que le fonctionnement de l'application ne repose pas sur des informations que les utilisateurs ne possèdent pas forcément.

  ##### Une icône apparemment aléatoire pour SodiPodi

  Un écureuil

- ##### N'incluez pas d'informations sans lien avec l'application

  Souvenez-vous que les icônes sont souvent affichées avec une taille plus petite. Trop d'informations peuvent rendre l'icône incompréhensible lorsqu'elle est réduite en taille (par ex. pour être placée sur un panneau ou dans la liste des tâches). Également, trop d'information facilite la confusion de l'utilisateur quant au but de l'application. Par exemple, lors de tests utilisateur, nombreux étaient ceux qui pensaient lancer un traitement de texte en cliquant sur l'ancienne version de l'icône Evolution (ci-dessous). Ils étaient induits en erreur par le crayon et le papier qui pouvaient être perçus comme des informations sans rapport : il est implicite que le programme de courriel vous permettra d'écrire des messages aussi bien que de les recevoir. Une meilleure icône aurait été une simple enveloppe. Avant tout, le concepteur d'icônes ne doit pas oublier la prise en considération des éléments visuels minimaux nécessaires à l'expression du but du programme.

  ##### Information sans rapport - l'icône d'Evolution

  L'icône d'Evolution

  Cette icône Gnumeric (ci-dessous) est une icône formidable, mise à part l'introduction d'un bruit visuel superflu. La feuille de papier en plus, avec le « g » dessus et derrière le classeur et le graphe, n'ajoute aucune valeur significative à l'icône, mais introduit une distraction visuelle supplémentaire. Dans ce cas, la contribution de la partie étrangère à l'apparence de l'icône est négative. Les icônes simples, bien équilibrées semblent plus attirantes que les icônes chargées. Une icône améliorée pourrait contenir seulement la feuille de calcul et le graphique : plus grands, car ils peuvent utiliser tout l'espace disponible de l'icône et par conséquent être visuellement plus distincts.

  ##### Information sans rapport - l'ancienne icône de Gnumeric

  L'icône de Gnumeric

- ##### N'incorporez pas de parties du corps humain dans l'icône

  GNOME vise à être un bureau international : il doit donc éviter les images qui sont potentiellement injurieuses ou grossières dans d'autres cultures. Une première source d'images injurieuses sont diverses parties du corps humain dans nombre de configurations différentes. Écartons les gestes obscènes avec les mains, le bras ou les doigts ; les parties du corps considérées comme « propres » dans une culture (comme les yeux) sont estimées comme de mauvais goût ou grossières dans une autre culture (comme le nez). En se fondant sur une étude à propos des icônes de GNOME, les parties du corps apparaissent souvent dans les icônes les moins communicantes (souvent elle « pointent » vers un autre élément de l'icône) ; elles sont utilisées en guise de renfort inefficace à de faibles métaphores. Dans ces cas-là, les parties du corps ne doivent pas être utilisées. Même dans des situations où la métaphore est appropriée (par exemple un œil représentant la capplet d'apparence de l'application sawfish), il est préférable d'éviter l'utilisation d'une partie du corps. Souvent les parties du corps ont été utilisées dans GNOME pour suggérer une personne « sélectionnant » ou « utilisant » quelque chose. Ce n'est normalement pas un aspect nécessaire à rendre par le concepteur de l'icône. Les gens voient naturellement les objets par référence à eux-mêmes (montrez une batte à quelqu'un et il pensera le fait de frapper quelque chose avec la batte, montrez un outil et il pensera le fait de l'utiliser, etc.) Par exemple, le sélecteur de polices affiche un doigt pointant un « F » (Fonts) pour suggérer à l'utilisateur de choisir dans une collection de polices de caractères. Le texte « Aa » affiché dans une police décorative (attirant l'attention sur la police plutôt que sur le texte) illustrerait mieux une telle icône. L'utilisateur n'a pas besoin qu'on lui dise qu'il « choisit » une police, il peut le déduire facilement.

  ##### Utilisation de partie du corps - l'icône de sélection de police

  L'icône initiale de sélection de police

  ##### Une meilleure icône pour la sélection de police

  Une icône de remplacement toute simple affichant un « Aa » décoratif

- ##### Ne fondez pas la métaphore de l'icône sur un jeu de mots

  Deux raisons de l'éviter : la plus évidente est que les jeux de mot ne se traduisent pas facilement. Par exemple, représenter le « Visionneur de journaux système » par une bûche (journal = « log » = bûche) ne signifiera pas grand chose dans des langues autres que l'anglais. De plus, la plupart des utilisateurs ne saisissent pas le jeu de mots immédiatement ; il est alors trop tard pour que l'icône soit une aide. Même après s'être familiarisé avec le « Visionneur de journaux système » représenté par une bûche, les utilisateurs ne feront pas l'association suffisamment rapidement pour que l'icône les aide à parcourir les entrées de menu. Un exemple populaire de ce problème a été la prolifération des icônes représentant le « World Wide Web » (WWW) par une toile d'araignée dans le milieu des années 90. Une partie de la valeur des icônes réside dans le fait qu'elles contournent la linguistique et par conséquent sont un complément aux légendes ; elles permettent à l'utilisateur d'élargir au cours de la recherche d'éléments l'espace perceptif au delà de la reconnaissance linguistique (déjà occupée par la lecture des légendes).

  ##### Jeu de mots - icône du visionneur de journaux système

  Une bûche de bois

- ##### N'employez pas d'image violente

  Tout comme les mots « tuer » ou « pourfendre » ne sont pas de mise dans les interfaces, les icônes violentes ou à connotation destructrice doivent être évitées. L'icône « Éteindre la machine » utilise l'image d'un bouton de détonateur d'explosif, certainement pour essayer de transmettre l'idée d'une fin quelque peu abrupte. Cependant cette icône intimide probablement certains utilisateurs de l'ordinateur qui ne voudront pas cliquer sur l'icône de peur de casser quelque chose.

  ##### Icône d'arrêt du système à connotation destructrice

  Un bouton de détonateur d'explosif

### Conception d'icônes en vue de l'accessibilité

Le bureau GNOME inclut des thèmes d'accessibilité pour que le bureau et les applications qui les utilisent soient mieux accessibles aux utilisateurs ayant des problèmes visuels. Par défaut, ce sont :

- un thème à fort contraste,

- un thème à fort contraste inversé,

- un thème de grande taille.

Les thèmes d'accessibilité suivants sont également disponibles :

- un thème de grande taille à fort contraste,

- un thème de grande taille à fort contraste inversé,

- un thème à faible contraste,

- un thème faible contraste, grande taille.

Pour être considérée comme complétement accessible, toutes les icônes de votre application doivent être remplacées par une alternative adaptée lorsque l'un de ces thèmes est utilisé.

#### Icônes à faible contraste

Les thèmes d'icônes à faible contraste ont été abandonnés dans GNOME 2.22. Il n'est plus nécessaire de fournir les icônes équivalentes pour le faible contraste.

#### Icônes à fort contraste

Les icônes à fort contraste sont des versions énormément simplifiées des icônes habituelles existantes d'une application. Elles sont dessinées avec deux couleurs, noir et blanc et des bordures épaisses. Ce style permet aux icônes à fort contraste d'être perceptibles à la vue d'un utilisateur ayant des déficiences visuelles. Ci-dessous se trouve une simulation de la façon dont sont perçues des icônes bien conçues lorsqu'elles sont regardées par un mal-voyant.

##### Simulation d'un utilisateur ayant une faible vision regardant des icônes à fort contraste

Description | Icône à fort contraste | Apparence simulée
--- | --- | ---
Livre | Icône de livre | Icône de livre floue
CD-ROM | Icône de CD-ROM | Icône de CD-ROM floue
Copier | Icône copier | Icône copier floue

Si une icône normale utilise une métaphore simple et évidente, l'icône correspondante à fort contraste peut souvent utiliser la même métaphore. Dans la plupart des cas, la même métaphore devra être dessinée différemment pour créer une icône simplifiée à fort contraste.

##### Représentation simplifiée de métaphores pour des icônes à fort contraste

Comparaison des icônes habituelles de style photo-réaliste avec des icônes à fort contraste de style coup de crayon

Les icônes à fort contraste sont créées à l'aide d'un programme de dessin vectoriel. Des formes noires et blanches sont superposées pour créer une icône simplifiée. Le procédé ressemble à un empilement de pièces de construction en papier noir et blanc comme si vous assembliez un collage.

##### Technique de calques pour les icônes à fort contraste

Vue éclatée des calques utilisés pour l'icône à fort contraste d'une disquette

##### Réutilisation de formes existantes

Souvent les formes existantes des icônes à fort contraste peuvent être redimensionnées et réutilisées pour reconstruire plus rapidement une nouvelle icône.

##### N'oubliez pas la bordure !

Il est utile de concevoir les icônes à fort contraste sur un arrière-plan temporaire en couleur afin de ne pas oublier de dessiner la bordure extérieure blanche.

#### Icônes à faible contraste

##### Icônes à faible contraste

Les thèmes d'icônes à faible contraste ont été abandonnés dans GNOME 2.22. Il n'est plus nécessaire de fournir les icônes équivalentes pour le faible contraste.

Le but des thèmes à faible contraste est d'éliminer autant que possible les valeurs claires (par ex. une grande valeur de « V » pour TSV). Pour réaliser cela, les couleurs dans les icônes de faible contraste sont comprimées vers le centre de l'intervalle de valeur, ainsi les couleurs sombres sont éclaircies et les couleurs claires sont assombries.

Les icônes de faible contraste sont générées à partir des icônes classiques existantes en ajustant les niveaux dans GIMP. Les niveaux d'entrée sont positionnés à 100, 1.25, 200 et les niveaux de sortie à 100, 160 comme montré dans la boîte de dialogue Niveaux ci-dessous. Un grand nombre d'icônes classiques peut être rapidement converti en faible contraste en utilisant les facilités de script de GIMP.

##### Boîte de dialogue des niveaux dans GIMP affichant les réglages corrects pour générer des icônes de faible contraste

Boîte de dialogue dans GIMP affichant les niveaux d'entrée positionnés à 100, 1.25, 200 et les niveaux de sortie à 100, 160.

## Entrée utilisateur

### Interaction avec la souris

#### Boutons

##### Pléthore de dispositifs de pointage : souris, boule de commande, souris contrôlée au pied, manette de jeu, pavé tactile et dispositif de pointage monté sur le doigt.

Dessin de différents types de dispositifs de pointage : souris, boule de commande, souris contrôlée au pied, manette de jeu.

Pour la plupart des utilisateurs, la souris reste la façon la plus courante d'interagir avec les interfaces graphiques. Le terme « souris » est utilisé dans ce chapitre pour désigner tous les autres dispositifs de pointage qui peuvent être utilisés pour déplacer le pointeur à l'écran, comme les boules de commande, les pavés tactiles, boules 3-D, tablettes graphiques ou dispositifs de technologie d'assistance qui émulent la souris.

Pour les utilisateurs droitiers, le bouton gauche d'une souris conventionnelle est utilisé pour la majorité des actions de souris. Nous l'appelons par conséquent bouton gauche ici, même si ce n'est pas physiquement le cas. Pour cette même raison, vous pouvez parfois voir ce bouton nommé « bouton 1 » ou « bouton de sélection » dans les codes et documentations.

De même pour les utilisateurs droitiers, le bouton droite d'une souris conventionnelle est utilisé pour les opérations impliquant des menus contextuels. Nous l'appelons par conséquent bouton droit dans ce chapitre. Vous pouvez parfois voir ce bouton nommé « bouton 3 » ou « bouton de menu » dans les codes et documentations.

Une souris conventionnelle à trois boutons possède normalement son troisième bouton (ou une molette qui agit comme un bouton lorsqu'elle est pressée) entre les boutons gauche et droite. Nous l'appelons par conséquent bouton central dans ce chapitre. Vous pouvez parfois voir ce bouton nommé « bouton 2 » ou « bouton de transfert » dans les codes et documentations.

##### Conseils

- Votre application utilise les mouvements du bouton gauche pour sélectionner, activer des composants, déplacer et afficher les menus déroulants.

- Votre application utilise les mouvements du bouton droit pour afficher et sélectionner des actions dans un menu contextuel.

- Votre application utilise le bouton central pour coller la sélection actuelle PRINCIPALE (habituellement la dernière mise en surbrillance) à la position du pointeur, comme suit :

  ##### Effet des touches modificatrices sur une opération de transfert avec le bouton central

  Modificateur | Fonction
  --- | ---
  Sans modificateur | Copier la sélection
  Ctrl | Copier la sélection
  Maj | Déplacer la sélection
  Maj Ctrl | Créer un lien, raccourci ou un alias de la sélection

  Dans votre interface, ne sur-définissez cette fonctionnalité nulle part où l'action de transfert pourrait être utilisée. Si vous avez l'intention d'utiliser quelque part le bouton central dans un but différent, ne le faites que comme raccourci pour utilisateurs expérimentés et seulement pour les opérations impossibles à réaliser à l'aide du bouton droit ou du bouton gauche.

- Si elle est présente sur la souris, la molette doit faire défiler la fenêtre ou le contrôle sous le pointeur s'ils supportent le défilement. Provoquer un défilement de cette manière ne doit pas déplacer le focus clavier de la fenêtre ou du contrôle qui défile.

- Ctrl molette vers le haut doit faire un zoom avant dans la fenêtre ou le contrôle sous le pointeur de la souris et Ctrl molette vers le bas doit faire un zoom arrière. Faire un zoom de cette façon ne doit pas déplacer le focus clavier de la fenêtre ou du contrôle sous l'action du zoom.

- Les entrées ne doivent pas dépendre du bouton central ou de droite. En plus d'être physiquement plus difficile à cliquer, certains dispositifs de pointage et de nombreux dispositifs de technologies d'assistance ne prennent en charge ou n'émulent que le bouton gauche de la souris. Certaines technologies d'assistance n'émulent même pas la souris du tout mais génèrent des évènements clavier à la place.

- Assurez-vous que toutes les opérations de votre application pouvant être réalisées avec la souris peuvent être effectuées avec le clavier. Les seules exceptions à cela sont les actions où un contrôle moteur fin est une part essentielle de la tâche. Par exemple, le contrôle du mouvement dans certains types de jeux d'actions ou le dessin à main levée dans une application d'édition d'images.

- Ne déformez pas le pointeur de la souris ou ne restreignez pas le mouvement de la souris à une partie de l'écran. Cela peut interférer avec les technologies d'assistance et est habituellement perturbant même pour les utilisateurs qui les n'utilisent pas.

- N'exigez pas de l'utilisateur l'usage de combinaisons (enfoncement de plusieurs boutons de souris en même temps) pour une opération.

- N'exigez pas de l'utilisateur l'usage d'actions à nombreux (triple ou quadruple) clics pour une opération à moins que vous ne fournissiez une méthode alternative pour réaliser la même action.

- Permettez à toutes les opérations d'être annulées avant leur fin. Un appui sur la touche Échap doit annuler toute opération de la souris en cours telle qu'une action de glisser-déposer d'un fichier ou le dessin d'une forme dans une application de dessin.

- N'attribuez aucune action exclusivement au bouton central d'une souris à trois boutons car toutes les souris n'en possèdent pas.

- Ne codez pas de manière permanente les tailles des cibles de la souris ou ne les faites pas trop petites. Définissez toutes les cibles de souris pour qu'elles soient au moins aussi grande que le bouton flèche d'une zone de sélection numérique GtkSpinBox dans le thème gtk actuel. Gardez en tête qu'un utilisateur qui a des problèmes de dextérité ou de vision peut utiliser un thème dans lequel les composants sont beaucoup plus grands que dans le thème par défaut.

- Ne faites pas référence à des boutons de souris précis dans votre interface à moins que cela ne soit absolument nécessaire. Tout le monde n'utilise pas une souris classique avec des boutons gauche, droite et milieu, donc un texte ou des diagrammes qui y font référence peuvent être perturbants.

#### Sélection d'objets

##### Équivalence souris et clavier

Pour les contrôles ou fenêtres contenant un certain nombre d'objets que l'utilisateur peut sélectionner, soit un par un, soit plusieurs simultanément, vérifiez que les mécanismes suivants ont été mis en œuvre pour permettre de faire les sélections en utilisant, soit la souris, soit le clavier.

###### Mécanismes standards de sélection avec la souris ou le clavier

| Souris | Clavier
--- | --- | ---
Sélectionner l'élément, désélectionner tous les autres | Clic | Espace
Ajouter/supprimer l'élément de la sélection | Ctrl clic (bascule l'état de l'élément sélectionné) | Ctrl Espace (bascule l'état de l'élément qui possède le focus)
Étendre la sélection | Maj clic | Maj Espace, Maj Origine, Maj Fin, Maj Page haut ou Maj Page bas
Déplacer le focus | Clic sur l'élément approprié pour le sélectionner | Touches fléchées, Origine, Fin, Page haut et Page bas déplacent le focus et la sélection en même temps. Ctrl touches fléchées, Ctrl Origine,Ctrl Fin, Ctrl Page haut et Ctrl Page bas déplacent le focus sans modifier la sélection en cours.
Tout sélectionner | Clic sur le premier élément, puis Maj clic sur le dernier | Ctrl A
Tout désélectionner | Clic sur le conteneur en arrière-plan | Maj Ctrl A
Activer la sélection | Double-clic pour activer une sélection unique. Maj ou Ctrl double-clic étend ou ajoute d'abord l'élément à la sélection avant d'activer toute la sélection. | Entrée active toute la sélection. Si rien n'est présentement sélectionné, sélectionne le premier élément disposant actuellement du focus.
Inverser la sélection | Pas d'équivalent avec la souris | Ctrl I

##### Sélection par encadrement

Pour un conteneur dont les objets peuvent être disposés sur deux dimensions, par exemple la vue icône d'un gestionnaire de fichiers, autorisez les sélections multiples en ménageant un encadrement autour d'un ou plusieurs objets. Maj« bouton gauche » plus glissement du pointeur doit ajouter tous les objets situés dans l'encadrement à la sélection existante. Ctrl« bouton gauche » plus glissement du pointeur doit basculer l'état de la sélection de tous les objets dans l'encadrement.

###### Conseils

- Faites en sorte qu'une sélection par encadrement ne puisse être initiée que si le premier clic de souris est réalisé :

  - à l'intérieur des limites de l'arrière-plan du conteneur et

  - à l'extérieur des limites de tout objet disposé dans le conteneur.

  Dans une application de dessin, par exemple, cela signifie que le clic initial du pointeur de souris et son déplacement pour définir l'encadrement de sélection peut débuter dans une zone vide du canevas ou dans une forme préalablement bloquée pour éviter une modification accidentelle, mais pas dans une forme active qui serait déplacée par le glissement du pointeur de souris.

- Sélectionnez tous les objets entièrement ou partiellement dans l'encadrement lorsque le bouton de la souris est relâché.

- Faites une mise en évidence dynamique pendant que vous faites glisser le pointeur de souris pour désigner les objets sélectionnés. N'attendez pas que le bouton de la souris soit relâché. Cela évite tout doute à propos des objets sélectionnés par l'encadrement.

- Quand un encadrement est déplacé dans une fenêtre défilante, prenez en charge le défilement automatique de la fenêtre lorsque l'encadrement est déplacé à proximité du bord de la fenêtre.

###### Exemples illustrant la mise en évidence dynamique de la sélection pendant la sélection par encadrement. Dans le premier exemple, la couleur du dossier et le surlignage de l'étiquette changent pour matérialiser la sélection. Dans le second, la sélection est indiquée par ajout de poignées de redimensionnement aux objets sélectionnés.

Exemple illustrant la mise en évidence dynamique de la sélection pendant la sélection par bordure
Exemple illustrant la mise en évidence dynamique de la sélection pendant la sélection par bordure

#### Glisser-déposer

Le glisser-déposer est une technique de manipulation directe dans laquelle vous réalisez des actions sur les objets sélectionnés en les déplaçant à l'écran avec la souris. Vous faites « glisser » un objet en cliquant dessus et en maintenant enfoncé le bouton pendant que vous déplacez le pointeur vers l'emplacement cible de l'objet. L'objet est « déposé » à cet emplacement en relâchant le bouton de la souris.

##### Conseils

- N'utilisez le glisser-déposer que si l'utilisateur peut raisonnablement supposer qu'il est possible. Les utilisations les plus courantes sont :

  - pour déplacer ou copier des objets d'un endroit vers un autre,

  - pour lier un objet à un autre,

  - pour réaliser une action sur les objets en les déposant sur une icône représentant cette action, telles qu'une icône de corbeille ou d'imprimante.

- Fournissez un retour visuel pendant toute la durée de l'opération de glisser-déposer. Mettez en évidence les cibles valides et modifiez le pointeur de la souris lorsqu'il passe au dessus d'elles. Utilisez le pointeur de souris « dépôt impossible » lorsque vous passez au dessus de cibles de dépôt non valides. Consultez également la .

- Ajoutez au pointeur de la souris une représentation des objets en cours de déplacement. Conservez cette représentation petite et rendez la translucide afin de ne pas obscurcir les cibles de dépôts éventuelles en dessous d'elle. Consultez également la .

  ##### Exemple de pointeur copier agrémenté par une icône représentant le fichier en cours de copie

  Pointeur copier par dessus une icône représentant un fichier en cours de copie pour former un pointeur « copie de fichier »

- N'autorisez que la copie des objets entre applications et pas le déplacement. Vous évitez ainsi toute confusion pour savoir à quelle application appartient la fonction Annuler qui annule l'opération.

- Autorisez l'utilisateur à annuler une opération de glisser-déposer par toutes ces méthodes :

  - appui sur la touche Échap avant le relâchement du bouton de la souris,

  - dépôt de l'objet sur sa propre position d'origine,

  - réalisation d'un dépôt avec requête et sélection de Annuler dans le menu contextuel (consultez la ),

  - dépôt de l'objet sur une cible de dépôt non valide.

- Permettez à l'utilisateur d'annuler les effets d'une opération de glisser-déposer en sélectionnant Édition Annuler.

- Autorisez le dépôt de plusieurs objets en appuyant sur Maj ou Ctrl pendant la sélection, puis le dépôt de tous les objets sélectionnés.

- Assurez-vous que les utilisateurs de clavier puissent reproduire toutes les actions d'un glisser-déposer en utilisant seulement des éléments de menu ou des raccourcis clavier tels que Copier (Ctrl C) et Coller (Ctrl V).

- Quand un élément est déplacé dans une fenêtre qui peut défiler, prenez en charge le défilement automatique de cette fenêtre lorsque le pointeur de souris est situé à proximité du bord de la fenêtre.

- Faites apparaître un menu contextuel lorsque l'utilisateur tente de déposer plusieurs objets sur une cible qui n'en accepte qu'un seul. Dans le menu, faites la liste de tous les objets déplacés et ajoutez un élément Annuler.

##### Sur-définir le comportement du glisser-déposer

###### Modificateurs clavier

Permettez à l'utilisateur de modifier le comportement d'une opération de glisser-déposer en appuyant sur Ctrl, Maj ou les deux à la fois. Si l'utilisateur actionne les touches modificatrices au cours du glissement, modifiez le pointeur de la souris immédiatement et réalisez la nouvelle action lorsque le bouton de la souris est relâché.

###### Effet des touches de modification pendant une opération de glisser-déposer

Modificateur | Fonction
--- | ---
Ctrl | Copier
Maj | Déplacer
Maj Ctrl | Créer un lien, un raccourci ou un alias

###### Glisser avec requête

Permettez à l'utilisateur de faire glisser les objets avec le bouton central ou avec Alt« bouton gauche ». Faîtes apparaître un menu contextuel lorsque le bouton de la souris est relâché, proposant un choix parmi Copier, Déplacer et Lier (ou n'importe quel sous-ensemble disponible de ces actions) et Annuler. Un glisser-déposer de la sorte est connu sous le nom de Glisser-déposer avec requête : il demande confirmation à l'utilisateur avant d'opérer la modification.

##### Pointeurs de la souris à utiliser pour un glisser-déposer

Utilisez les pointeurs GTK par défaut pour le glisser-déposer lors des opérations standards de transfert affichés ci-dessous. Grâce à cette cohérence, l'utilisateur sait exactement à quoi s'attendre lorsqu'il relâche le bouton de la souris. Si vous devez concevoir un pointeur pour une action de transfert non standard non affichée ici, conservez le style des pointeurs standards.

###### Pointeurs de la souris pour un glisser-déposer

Forme du pointeur | Signification
--- | ---
Pointeur « Déplacement » | Déplacer la sélection. La sélection que l'on fait glisser est déplacée à l'endroit du déposer ; elle est enlevée de son emplacement initial.
Pointeur « Copie » | Copier la sélection. La sélection que l'on fait glisser est copiée à l'emplacement du dépôt ; l'original est laissé intact.
Pointeur « Lien » | Lier la sélection. Un lien vers la sélection est inséré à l'emplacement du déposer. Cependant la façon dont le lien est matérialisé dépend de l'application ; par exemple, le lien peut être, soit un hyperlien, soit une icône, soit encore une copie de la sélection de l'original .
Pointeur « Déposer avec requête » | Faire glisser à l'aide du bouton central ou la combinaison Alt-bouton gauche. Un menu contextuel apparaît à l'endroit du dépôt pour vous demandez si vous désirez déplacer, copier ou lier la sélection ou annuler l'opération.
Pointeur « Impossible de déposer » | Impossible de déposer ici. Affichez ce pointeur lorsque le pointeur de souris passe sur une zone où la sélection ne peut pas être déposée.

#### Interaction de la souris avec le tableau de bord des applications (applets)

Tous les objets sur le bureau doivent se comporter de manière cohérente. En dépit de leur nature particulière, les applets ne font pas exception.

##### Conseils

- Le bouton gauche de la souris sans modificateur doit être suffisant pour agir sur tous les contrôles de l'applet. Les applets doivent être suffisamment simples pour que les clics avec modificateur ou les clics avec d'autres boutons (excepté le menu contextuel de l'applet) ne soient pas nécessaires.

- Un clic avec le bouton droit n'importe où dans la fenêtre d'encadrement de l'applet doit afficher, soit le menu contextuel de tout l'applet, soit le menu contextuel du contrôle sous le pointeur de la souris. Ne laissez pas dans l'applet de « zones mortes » qui ne répondent pas au clic droit.

- N'utilisez pas le bouton central pour autre chose que le déplacement de l'applet vers un autre emplacement. Un clic avec le bouton central et un glisser n'importe où dans la fenêtre de l'applet doit déplacer l'applet ; il n'est pas obligatoire d'avoir une barre de déplacement ou un dispositif similaire.

  Un glisser-déposer avec Ctrl bouton gauche copie l'applet en cas de déplacement vers un autre tableau de bord ; un glisser-déposer sans modificateur ou avec Maj bouton gauche déplace l'applet en cas de déplacement vers un autre tableau de bord. En cas de déplacement dans un même tableau de bord, Ctrl effectue un déplacement par échange, Maj un déplacement en poussant, Alt un déplacement libre.

### Interaction au clavier

#### Navigation au clavier

Une interface utilisateur bien conçue pour le clavier joue un rôle clé lors de la conception d'applications. Beaucoup d'utilisateurs potentiels préfèrent réaliser la plupart des opérations au clavier plutôt qu'à la souris. Les utilisateurs déficients visuels peuvent parcourir un logiciel plus efficacement en utilisant le clavier parce que l'utilisation de la souris dépend du retour visuel de l'emplacement du pointeur de la souris. De plus des problèmes de mobilité peuvent nuire à un contrôle correct de l'utilisateur en utilisant la souris à cause des besoins en une dextérité motrice fine.

Rendez toutes les actions de la souris accessibles à partir du clavier et incluez un accès clavier à toutes les barres d'outils, menus, liens et boutons. Chaque fonction fournie par votre application doit être accessible en utilisant seulement le clavier. Une bonne façon de procéder est de cacher votre souris lorsque vous testez l'application !

##### Boîte de dialogue et menu avec indication de certaines de leurs touches d'accès et raccourcis

Capture d'écran d'une boîte de dialogue et d'un menu avec mise en évidence de certaines de leur touches d'accès et raccourcis

Il est facile de rendre accessible la plupart des fonctionnalités à partir du clavier en utilisant des touches accès et des touches de raccourci, ainsi que les fonctions de navigation clavier intégrées aux boîtes à outils. Tous les contrôles avec étiquettes doivent posséder des touches d'accès et les éléments de menu fréquemment utilisés doivent posséder des touches de raccourci. Cependant, les actions fondées sur un glisser-déposer, par exemple, peuvent demander plus d'imagination pour les rendre accessibles au clavier.

##### Conseils

- Fournissez un accès clavier efficace pour toutes les caractéristiques de l'application. En particulier, assurez-vous que le focus peut être donné à tous les contrôles dans les menus et les boîtes de dialogue en utilisant des touches d'accès ou des raccourcis.

- Utilisez un ordre de navigation clavier logique. Lors d'une navigation dans une fenêtre avec la touche Tab, le focus clavier doit se déplacer entre les contrôles dans un ordre prévisible. Dans les environnements linguistiques occidentaux, c'est habituellement de la gauche vers la droite et de haut en bas.

- Assurez-vous que l'ordre de parcours des contrôles avec la touche « Tab » reste correct pour ceux dont l'état activé dépend de l'état d'une case à cocher, d'un bouton radio et d'un bouton bascule. Lorsqu'un bouton de ce type est sélectionné, tous les contrôles en dépendant doivent être activés et tous ceux qui dépendent d'un autre bouton du groupe doivent être désactivés. Lorsque l'utilisateur sélectionne une case à cocher, un bouton radio ou un bouton bascule qui possèdent des contrôles en dépendance, ne donnez pas automatiquement le focus au premier contrôle dépendant mais laissez plutôt le focus sur le bouton qui commande cette dépendance.

- Ne sur-définissez pas les caractéristiques existantes d'accessibilité au niveau système. Par exemple, la caractéristique MouseKeys de la boîte de dialogue de préférences GNOME Accessibilité clavier permet de simuler à l'aide du pavé numérique les déplacements de la souris et les clics de boutons . Par conséquent, vous ne pouvez pas ajouter des caractéristiques à l'application qui ne seraient atteintes qu'en utilisant le pavé numérique ; les utilisateurs comptant sur les fonctionnalités de MouseKeys ne pourraient pas les utiliser.

- Assurez-vous que tout texte pouvant être sélectionné avec la souris peut également l'être avec le clavier. C'est une facilité pour tous les utilisateurs, mais elle s'adresse plus spécialement à ceux qui ont des difficultés à contrôler finement le mouvement de la souris.

- Assurez-vous que les objets qui peuvent être redimensionnés ou déplacés par un glisser-déposer peuvent également l'être avec le clavier. Par exemple, les icônes ou les fenêtres sur le bureau. Lorsqu'un positionnement et un redimensionnement précis peut se révéler important, par ex. les formes dans un diagramme, pensez également à fournir, soit une boîte de dialogue dans laquelle l'utilisateur peut saisir des coordonnées, soit un moyen de placer les objets sur une grille définie par ce dernier.

- N'utilisez pas des fonctions générales de navigation pour déclencher des actions. Par exemple, n'utilisez pas l'usuelle navigation clavier avec la touche Tab dans une boîte de dialogue pour activer une action associée à un contrôle.

- Affichez les menus, fenêtres ou infobulles, appelés à l'aide du clavier, à proximité de l'objet auquel ils sont associés mais sans le masquer ou l'obscurcir. Dans GNOME, les menus contextuels sont activés par Maj F10 et les infobulles par Ctrl F1.

- Fournissez plus d'une méthode pour réaliser les tâches au clavier lorsque c'est possible. Les utilisateurs peuvent trouver certaines touches ou combinaisons plus faciles que d'autres.

- N'attribuez pas de moyens d'accès complexes aux opérations clavier fréquemment utilisées. Certaines personnes ne peuvent utiliser qu'une seule main sur le clavier, donc les raccourcis utilisables facilement d'une seule main sont préférables pour les opérations courantes. Dans tous les cas, avoir à réaliser des extensions ou des positionnements difficiles sur le clavier augmente pour tous les utilisateurs le risque de se froisser un muscle, donc de douleurs ou de blessures.

- Ne demandez pas d'utilisations répétées d'appuis simultanés de touches. Certains utilisateurs ne sont capables que d'appuyer et tenir enfoncée une seule touche à la fois. Les technologies d'assistance telles que celles offertes dans la boîte de dialogue des préférences Accessibilité du clavier de GNOME permettent aux utilisateurs d'appuyer sur les touches de manière séquentielle plutôt que simultanément, mais bien sûr cela signifie que l'opération prendra plus de temps pour eux.

#### Choix des touches d'accès

Donnez une touche d'accès (lettre soulignée) à tous les composants étiquetés, à l'exception des contrôles de barre d'outils : ils occuperaient beaucoup trop de combinaisons de touche d'accès.

Choisissez les touches d'accès afin qu'elles soient aussi faciles à retenir que possible. Normalement l'utilisation de la première lettre de l'étiquette répond à ce critère. Mais dans les fenêtres complexes, le choix peut devenir plus difficile. Voici quelques règles simples :

1. Attribuez des touches d'accès aux contrôles les plus fréquemment utilisés d'abord. Si ce n'est pas évident de savoir lesquels, attribuez les touches d'accès de la gauche vers la droite, du haut vers le bas (pour les environnements linguistiques occidentaux).

2. Utilisez la première lettre de l'étiquette, ou de l'un des autres mots s'il y en a plus d'un. Toutefois, si une autre lettre représente une meilleure association (par ex. « x » dans Extra large) utilisez plutôt cette lettre.

3. Si la première lettre n'est pas disponible, choisissez une consonne facile à se souvenir dans l'étiquette, par exemple « p » dans Remplacer.

4. Si aucune consonne n'est disponible, choisissez n'importe quelle voyelle dans l'étiquette.

Si un doublon de touches d'accès dans une fenêtre est inévitable, vous devez vous abstenir de dupliquer les touches d'accès d'un des boutons suivants s'ils apparaissent dans la même fenêtre : Valider, Annuler, Fermer, Appliquer ou Aide.

Il est également préférable de ne pas attribuer de touches d'accès aux lettres « peu larges » (telles que i ou l minuscules) ou aux lettres avec des jambages (telles que g ou y minuscules) à moins que cela ne soit inévitable. Le souligné ne se distingue pas trop bien sous ces caractères dans certaines polices.

Les applications qui utilisent un système d'écriture non romain avec clavier classique peuvent avoir des étiquettes de contrôle préfixées de caractères romains en tant que touches d'accès.

#### Choix des touches de raccourcis

Les tableaux de la résument les touches de raccourci standards à utiliser lorsque votre application prend en charge ces fonctions. Votre application ne prendra pas nécessairement toutes ces fonctions, consultez la pour plus d'informations. Cependant, utilisez les touches de raccourci recommandées pour les fonctions que vous prenez en charge.

Vous voudrez certainement ajouter des touches de raccourci propres aux fonctions de l'application. Dans ce cas, outre le suivi des conseils suivants, jetez un coup d'œil aux autres applications similaires existantes pour voir les touches de raccourci qui y sont définies. Les utilisateurs de votre propre application se servent déjà peut-être de ces applications similaires ; donc, il est judicieux d'être cohérent lorsque c'est possible, car ils aborderont l'utilisation de votre application avec le bénéfice d'une expérience utilisateur déjà acquise.

##### Conseils

- Utilisez Ctrl lettre de préférence à d'autres combinaisons lorsque vous choisissez de nouvelles touches de raccourci.

- Les touches Inser, Suppr, Début, Fin, Page haut et Page bas sont des touches de raccourci acceptables pour des fonctions proches de l'usage classique de ces touches tel que défini par le système. Ne les attribuez pas à des fonctions sans rapport, uniquement parce que vous n'avez plus d'autres combinaisons de touches disponibles.

- N'attribuez des touches de raccourci qu'aux actions les plus couramment utilisées dans votre application. N'essayez pas d'attribuer une touche de raccourci à tout.

- Choisissez les nouvelles touches de raccourci les plus mnémoniques possible : elles seront plus faciles à apprendre et à se remémorer. Par exemple, Ctrl P serait un bon raccourci pour un élément de menu nommé Modifier la page.

- Utilisez Maj Ctrl lettre pour les fonctions qui inversent ou étendent une autre fonction. Par exemple, Ctrl Z et Maj Ctrl Z pour Annuler et Refaire.

  ##### Raccourcis de saisie unicode

  Remarquez que vous ne pouvez pas utiliser Maj Ctrl A à F ou Maj Ctrl 0 à 9 pour vos propres besoins car ces combinaisons sont utilisées pour saisir des caractères unicode dans les champs de texte.

- N'utilisez pas Ctrl nombre ou des touches de fonction numérotées comme touche de raccourci à moins que le nombre n'ait un intérêt évident pour l'action. Par exemple, Ctrl 2 et Ctrl 3 peuvent être des touches de raccourci pour Affichage Affichage 2D et Affichage Affichage 3D dans une application de modélisation 3D.

- N'utilisez pas des combinaisons Alt touche pour les touches de raccourcis car cela peut rentrer en conflit avec le gestionnaire de fenêtres ou les touches d'accès au menu.

- N'utilisez pas des symboles qui ont besoin de Maj ou d'autres modificateurs dans une partie du raccourci, par exemple Ctrl%. Souvenez-vous que des symboles qui peuvent être atteints sans touche de modification sur votre clavier peuvent être plus difficiles à atteindre sur d'autres claviers internationaux.

- N'attribuez pas de touches de raccourci aux éléments de menu qui changent dans le temps, par exemple une liste de fenêtres ouvertes dans le menu Fenêtre ou une liste de fichiers récemment utilisés dans le menu Fichier. Attribuez plutôt des touches d'accès à ces éléments.

- N'utilisez aucune des touches de raccourci standards énumérées dans la pour vos propres besoins même si votre application ne prend pas en charge ces fonctions. Cela aide à renforcer la cohérence entre toutes les applications GNOME.

#### Touches de raccourci standard d'application

Si votre application utilise une des fonctions standards énumérées dans les tableaux suivants, utilisez le raccourci clavier standard recommandé pour cette fonction.

##### Touches de raccourci et d'accès standards des applications GNOME - menu Fichier

Fonction | Raccourci | Description
--- | --- | ---
New (Nouveau) | Ctrl N | Crée un nouveau document
Open (Ouvrir) | Ctrl O | Ouvre un document
Save (Enregistrer) | Ctrl S | Enregistre le document actuel
Print (Imprime) | Ctrl P | Imprime le document actuel
Close (Fermer) | Ctrl W | Ferme le document actuel
Quit (Quitter) | Ctrl Q | Quitte l'application

##### Touches de raccourci et d'accès standards des applications GNOME - menu Édition

Fonction | Raccourci | Description
--- | --- | ---
Undo (Annuler) | Ctrl Z | Annule la dernière opération
Redo (Refaire) | Maj Ctrl Z | Retablit la dernière opération annulée
Cut (Couper) | Ctrl X | Coupe la zone sélectionnée et l'enregistre dans le presse-papier
Copy (Copier) | Ctrl C | Copie la zone sélectionnée vers le presse-papier
Paste (Coller) | Ctrl V | Colle le contenu du presse-papier à l'emplacement du curseur ou de la souris
Duplicate (Dupliquer) | Ctrl U | Duplique les éléments actuellement sélectionnés et les ajoute à la même fenêtre sans modifier le presse-papier
Select All (Tout sélectionner) | Ctrl A | Sélectionne tous les éléments du contrôle ou de la fenêtre qui possèdent le focus
Invert Selection (Inverser la sélection) | Ctrl I | Sélectionne tous les éléments du contrôle ou de la fenêtre qui ne possédaient pas le focus auparavant et désélectionne tous ceux qui étaient sélectionnés
Delete (Supprimer) | Suppr | Supprime la sélection
Find... (Trouver) | Ctrl F | Trouve les occurrences correspondantes dans le document actuel, en les mettant en évidence in situ
Search... (Rechercher) | Ctrl F (voir la note ci-dessous) | Cherche les occurrences en correspondance dans plusieurs documents, fichiers ou d'autres sources externes
Find Next (Rechercher le suivant) | Ctrl G | Recherche la prochaine occurrence
Replace... (Remplacer) | Ctrl H | Cherche et remplace les occurrences
Rename (Renommer) | F2 | Bascule l'étiquette de l'élément sélectionné en mode édition, permettant à l'utilisateur de saisir un nouveau nom.

##### Recherche et remplacement

Si votre application a besoin à la fois des éléments de menu Édition Trouver et Édition Rechercher, utilisez Maj Ctrl F comme raccourci pour Rechercher.

##### Touches de raccourci et d'accès standards des applications GNOME - Menu Affichage

Fonction | Raccourci | Description
--- | --- | ---
Zoom In (Zoom en avant) | Ctrl Plus | Zoom avant dans le document
Zoom Out (Zoom en arrière) | Ctrl Moins | Zoom arrière dans le document
Normal Size (Taille normale) | Ctrl 0 | Rétablit le niveau de zoom à la taille normale (généralement 100 %)
Refresh (Rafraîchir) | Ctrl R | Redessine la vue actuelle du document sans vérifier si le contenu été modifié
Reload (Recharger) | Ctrl R (voir la note ci-dessous) | Recharge le document actuel en mettant à jour à partir de la source si nécessaire
Properties (Propriétés) | Alt Entrée | Affiche la fenêtre des propriétés de l'objet sélectionné. Peut également apparaître dans le menu Fichier si le document lui-même est le seul objet de l'application qui puisse être analysé.

##### Recharger et rafraîchir

Si votre application a besoin à la fois des éléments de menu Affichage Recharger et Affichage Rafraîchir, utilisez Maj Ctrl R comme raccourci pour Recharger.

##### Touches de raccourci et d'accès standards des applications GNOME - menu Signets

Fonction | Raccourci | Description
--- | --- | ---
Add Bookmark (Ajouter un signet) | Ctrl D | Ajoute un signet pour l'emplacement actuel
Edit Bookmarks... (Modifier les signets) | Ctrl B (voir la note ci-dessous) | Ouvre une fenêtre dans laquelle l'utilisateur peut modifier et organiser les signets enregistrés

##### Graisse et modification des signets

Si votre application a besoin à la fois des éléments de menu Format Gras et Signets Modifier les signets, utilisez Maj Ctrl D comme raccourci pour Modifier les signets.

##### Touches de raccourci et d'accès standards des applications GNOME - menu Aller à

Fonction | Raccourci | Description
--- | --- | ---
Back (Précédent) | Alt Gauche | Va à l'emplacement précédent dans la série de navigation
Next (Suivant) | Alt Droite | Va à l'emplacement suivant dans la série de navigation
Up (Haut) | Alt Haut | Remonte d'un niveau dans la série de navigation
Home (Accueil) | Alt Origine | Va à la page de démarrage définie par l'utilisateur ou l'application
Location... (Emplacement) | Ctrl L | Affiche ou donne le focus à un champ de saisi dans lequel l'utilisateur peut saisir une nouvelle adresse ou un nouvel emplacement à afficher

##### Touches de raccourci et d'accès standards des applications GNOME - menu Format

Fonction | Raccourci | Description
--- | --- | ---
Bold (Gras) | Ctrl B | Alterne la sélection de texte entre gras et normal
Underline (Souligné) | Ctrl U | Souligne/efface le souligné du texte sélectionné
Italic (Italique) | Ctrl I | Alterne la sélection de texte entre italique et normal

##### Touches de raccourci et d'accès standards des applications GNOME - menu Aide

Fonction | Raccourci | Description
--- | --- | ---
Contents (Sommaire) | F1 | Affiche la page de sommaire de l'aide de l'application actuelle

##### Touches de raccourci standard du gestionnaire de fichiers

Les touches de raccourci suivantes sont utilisées par beaucoup de gestionnaires de fichiers et ne doivent normalement pas être sur-définies par votre application.

###### Touches de raccourci et d'accès standards du gestionnaire de fichiers

Fonction | Raccourci | Description
--- | --- | ---
Changement de fenêtre principale | Alt Tab, Maj Alt Tab | Déplace le focus vers la prochaine ou la précédente fenêtre de premier niveau sur le bureau
Changement de tableau de bord | Ctrl Alt Tab, Maj Ctrl Alt Tab | Déplace le focus vers le prochain ou le précédent tableau de bord sur le bureau
Se déconnecter | Ctrl Alt Suppr | Ouvre la boîte de dialogue de déconnexion de la session
Menu Fenêtre | Alt Espace | Ouvre le menu Fenêtre
Close (Fermer) | Alt F4 | Ferme la fenêtre qui possède le focus
Restore (Restaurer) | Alt F5 | Restaure la fenêtre qui possède le focus à sa taille précédente
Switch secondary windows (Changement de fenêtre secondaire) | Alt F6, Maj Alt F6 | Déplace le focus vers la prochaine ou la précédente fenêtre secondaire de l'application ( )
Move (Déplacer) | Alt F7 | Déplace la fenêtre qui possède le focus
Resize (Redimensionner) | Alt F8 | Redimensionne la fenêtre qui possède le focus
Minimize (Minimiser) | Alt F9 | Minimise la fenêtre qui possède le focus
Maximize (Maximiser) | Alt F10 | Maximise la fenêtre qui possède le focus
Full Screen (Plein écran) | Ctrl F11 | Affiche la fenêtre dans le mode plein écran, sans bordure, barre de menu, barre d'outils ou d'état

##### Touches de raccourci standards de navigation d'élément graphique

Les touches de raccourci suivantes sont réservées pour la navigation par clavier utilisées par divers éléments graphiques de GNOME et ne doivent normalement pas être sur-définis par votre application.

###### Touches standards de navigation clavier pour les éléments graphiques

Clé/Touche | Fonction
--- | ---
Tab, Maj Tab | Déplace le focus clavier vers le précédent/prochain contrôle
Ctrl Tab, Maj Ctrl Tab | Déplace le focus clavier hors du composant graphique qui le contient vers le précédent/prochain contrôle dans les situations où la touche tab est utilisée pour une autre fonction (par ex. GtkTextView)
Ctrl F1 | Affiche une infobulle pour le contrôle qui possède actuellement le focus
Maj F1 | Affiche une aide sensible au contexte pour le contrôle ou la fenêtre qui possède actuellement le focus
F6, Maj F6 | Donne le focus au prochain/précédent panneau dans une fenêtre GtkPaned
F8 | Donne le focus à la barre de séparation dans une fenêtre à panneau
F10 | Donne le focus à la barre de menu de la fenêtre
Maj F10 | Affiche un menu contextuel pour les objets actuellement sélectionnés
Espace | Bascule l'état de sélection de la case à cocher, du bouton radio ou du bouton bascule possédant le focus
Entrée | Active le bouton, l'élément de menu, etc. possèdant le focus
Origine, Fin | Sélectionne/déplace le premier élément dans le composant graphique sélectionné
Page haut, Ctrl Page haut, Page bas, Ctrl Page bas | Fait défiler la vue sélectionnée page par page vers le haut/la gauche/le bas/la droite

##### Touches supplémentaires de raccourci de navigation pour les éléments graphiques

Les raccourcis de navigation suivants, dans le style emacs, sont toujours disponibles dans les champs de saisie de texte dans GNOME 2.0 (en sélectionnant le schéma « emacs » dans la boîte de dialogue des préférences de Raccourcis clavier) mais sont désactivées par défaut. Comme certains utilisateurs veulent toujours les utiliser, ne les sur-définissez pas pour vos propres besoins lorsqu'un contrôle de saisie de texte possède le focus.

###### Touches de navigation style Emacs pour les éléments graphiques

Clé/Touche | Fonction
--- | ---
Ctrl A | Déplace le curseur au début de la ligne
Ctrl D | Supprime le caractère suivant/sous le curseur
Ctrl E | Déplace le curseur à la fin de la ligne
Ctrl K | Supprime à partir du curseur jusqu'à la fin de la ligne
Ctrl U | Supprime la ligne actuelle
Ctrl W | Coupe vers le presse-papier
Ctrl Y | Colle à partir du presse-papier
Ctrl Espace | Place une marque
Ctrl Suppr, Alt D | Supprime à partir du curseur jusqu'à la fin du mot
Ctrl Ret. Arr. | Supprime à partir du curseur jusqu'au début du mot
Alt Espace | Supprime tous les espaces autour du curseur en réinsérant un espace unique
Alt\ | Supprime tous les espaces autour du curseur

#### Interaction clavier avec les applications du tableau de bord (applets)

Il est possible de naviguer au clavier dans les tableaux de bord depuis GNOME 2.0. Puisque votre tableau de bord peut obtenir le focus clavier, vous devez vous assurer qu'il est possible d'y naviguer via le clavier.

Les règles pour la navigation clavier du tableau de bord de l'application sont quasiment les mêmes que celles des autres fenêtres. Cependant il y a une différence importante :

- N'utilisez pas la touche tab car c'est le moyen de déplacer le focus entre les contrôles dans une application de tableau de bord. Utilisez les touches fléchées pour cela à la place.

Lorsqu'un objet sur un tableau de bord possède le focus, la touche Tab déplace normalement le focus vers le prochain objet sur le tableau de bord. Si votre application de tableau de bord utilise également la touche Tab pour sa propre navigation interne, l'utilisateur devra à la place appuyer sur Ctrl Tab pour déplacer le focus en dehors de votre application de tableau de bord. Cette incohérence se ferait au détriment de l'expérience de l'utilisateur.

## Langue

Des étiquettes cohérentes créent un environnement familier à l'utilisateur qu'il peut parcourir confortablement. Plus l'environnement est familier, plus il est facile de trouver de l'information.

### Étiquettes

#### Contrôles

Un étiquetage clair, cohérent et concis des contrôles aide les utilisateurs à deviner le but d'une fenêtre ou d'une boîte de dialogue qu'ils n'ont jamais vu auparavant. Pour un utilisateur ayant des déficiences visuelles, des étiquettes claires sont même encore plus importantes. Un utilisateur qui utilise un lecteur d'écran ne reçoit aucune aide des icônes, de l'agencement ou de l'espacement pour deviner ce que fait le contrôle ; un étiquetage clair est donc essentiel.

##### Conseils

- Gardez les étiquettes courtes. Cela :

  - réduit la taille du texte lorsqu'il est traduit et, par conséquent, minimise le travail nécessaire pour modifier l'environnement linguistique de l'interface. La traduction d'un texte anglais peut demander jusqu'à 30 % de longueur supplémentaire dans certaines langues,

  - facilite l'usage d'outils pour la traduction,

  - augmente la rapidité de compréhension de l'utilisateur.

  Néanmoins, ne raccourcissez pas vos étiquettes jusqu'à les rendre incompréhensibles. Une étiquette de trois mots qui fournit une information claire est mieux qu'une étiquette d'un seul mot qui est ambiguë ou vague. Essayez de trouver une formulation avec le moins de mots possible pour transmettre le sens de l'étiquette de manière satisfaisante.

- N'incluez pas de texte dans les fenêtres pour décrire comment utiliser l'interface, par exemple Vous pouvez installer un nouveau thème en le déposant ici. En plus d'encombrer l'espace visuel, des étiquettes descriptives peuvent également entrer en conflit avec l'information fournie dans la documentation.

- Utilisez des termes standards. Vous pouvez trouvez une liste de termes standards pour les interfaces utilisateur dans le Guide stylistique pour la documentation GNOME, terminologie recommandée.

- (En anglais) Appliquez les règles d'usage standard des majuscules. Consultez la pour des conseils à propos des règles d'usage des majuscules pour les étiquettes de l'interface utilisateur.

#### Infobulles

##### Infobulles de la barre d'outils

Une infobulle de barre d'outils est une brève description de la fonction d'un contrôle de la barre d'outils que l'utilisateur voit lorsque le pointeur de souris est au dessus de lui.

###### Conseils

- Indiquez de manière concise le but du contrôle. L'infobulle doit être plus descriptive que le nom de l'élément de menu correspondant, s'il y en a un, mais pas trop bavarde. Par exemple Annule la dernière action pour le bouton Annuler.

- (En anglais) Utilisez les règles d'usage des majuscules pour les phrases. Consultez la .

##### Infobulles pour applications

Une infobulle d'application est une brève description de votre application que l'utilisateur voit lorsque la souris est sur le lanceur ou l'élément de menu de votre application. Il est enregistré dans le champ comment du fichier `desktop` de votre application. Consultez la .

###### Conseils

- Créez des infobulles courtes. Le but est de transmettre avec précision la fonctionnalité d'un élément avec le moins de mots possible.

- (En anglais) Utilisez les règles d'usage des majuscules pour les phrases. Consultez la .

- Utilisez les règles de ponctuation standard, excepté qu'il n'y a pas de point final dans une infobulle.

#### Menus

##### Conseils

- Utilisez les étiquettes standards recommandées pour les éléments de menu et les titres si elles existent. N'utilisez pas de synonymes tels que Sortir au lieu de Quitter. Consultez la pour une liste et la description des éléments de menu et les titres standards.

- (En anglais) Utilisez les règles d'usage des majuscules pour les titres pour tous les éléments de menu et les titres. Consultez la pour plus d'informations.

### Messages d'avertissement et d'erreur

Un bon message d'avertissement ou d'erreur contient deux éléments :

1. une brève description du problème,

2. une liste de moyens pour résoudre le problème.

Ces deux éléments doivent être écrits dans un langage non technique, sans jargon, à moins que le public ciblé ne soit particulièrement versé dans la technique.

Si votre application en sait suffisamment sur le problème pour être capable de donner toutes ces informations à l'utilisateur, elle sera souvent capable de corriger le problème elle-même lorsque l'utilisateur aura décidé quel moyen d'action il veut employer. Par exemple, si le problème est un manque de mémoire, dites à l'utilisateur quelle application actuellement en cours prend le plus de mémoire et fournissez lui un bouton pour la terminer (ne proposez pas de lancer un gestionnaire graphique des processus en cours, car, la plupart des utilisateurs ne devrait jamais en voir !).

Consultez la pour avoir plus de détails sur l'écriture et la présentation des erreurs, avertissements et alertes informatives.

### Aide en ligne

L'écriture d'une aide en ligne est une tâche spécialisée et n'est par conséquent pas détaillée ici. Référez-vous au Guide stylistique de la documentation GNOME pour des conseils sur l'écriture d'une documentation claire, cohérente et utile pour votre application.

## Points de contrôle

### Choses à faire par vous-même

#### Avant de commencer

Mettez sur papier le public visé par votre application. Puis, écrivez quelques « scénarios » pour chaque type d'utilisateur — une petite histoire qui décrit les tâches typiques pour lesquelles ces personnes utiliseront votre application. Ces tâches devraient être de cet ordre d'idées :

> Fred a besoin de rechercher un courriel à propos de widgets qu'il a reçu la semaine dernière

plutôt que

> Fred clique sur le bouton Rechercher et saisit `widgets` dans la boîte de dialogue.

De cette manière, vous pouvez utiliser les mêmes scénarios pour tester et comparer différentes conceptions d'interface et mettre le doigt sur une fonctionnalité absente.

Incorporez ces descriptions et scénarios d'utilisateur avec la documentation dont vous faites le « commit » vers CVS. Avec cette manière de procéder, les autres contributeurs comprendront quel est le public visé, ils pourront aider à développer l'application en connaissance de cause et ils pourront ajouter d'autres scénarios de leur cru.

#### Focus et accessibilité clavier

Lorsque vous commencez à implémenter votre interface, cachez la souris et assurez-vous que vous pouvez toujours faire fonctionner l'interface en utilisant uniquement le clavier. Mettez en place les fonctionnalités clavier en même temps que celles de la souris — n'attendez pas le dernier moment.

N'utilisez que les commandes clavier, déplacez le focus à travers toutes les barres de menu et barre d'outils de l'application. Vérifiez également que :

- les menus contextuels s'affichent correctement (Maj F10),

- les infobulles peuvent apparaître et disparaître pour tous les contrôles qui en possèdent (Ctrl F1, Échap),

- toutes les fonctions énumérées dans la barre d'outils peuvent être appelées grâce au clavier,

- vous pouvez actionner complètement chaque contrôle dans la zone client de l'application et dans les boîtes de dialogue,

- le texte et les objets dans la zone client peuvent être sélectionnés,

- tous les raccourcis clavier ou touches de raccourci fonctionnent comme prévu,

- lors des déplacements parmi les objets, l'indicateur de focus visuel est facile à identifier à tout instant.

#### Thèmes, couleurs et contraste

Testez les divers thèmes de GNOME pour vous assurez que votre application respecte tous les paramètres disponibles.

Testez votre application avec des thèmes noir et blanc, fort contraste et vérifiez que toute l'information est toujours bien convoyée. Si aucun thème GNOME convenable à fort contraste n'est disponible pour les tests, faites des copies d'écran en noir et blanc (et non en niveau de gris) et assurez-vous que toute l'information importante est toujours visible — cela sera une approximation de ce qu'une personne utilisant un thème à fort contraste verrait.

#### Animation

Assurez-vous d'avoir implémenté une option pour éteindre toutes les animations dans votre application (pour des raisons d'accessibilité) et que cela fonctionne comme prévu. Éteignez les animations. Vérifiez que toute l'information est correctement convoyée.

### Choses à faire avec les autres gens

#### Retour rapide d'informations

C'est toujours tentant, mais ne commencez pas à coder votre interface tout de suite. Jetez certaines de vos idées sur une feuille d'abord, ou dans Glade, ou en HTML si vous préférez (mais ne cédez pas à la tentation d'ajouter des fonctionnalités en ce moment, si vous procédez de la sorte !).

Montrez ces prototypes aux autres personnes — la liste de diffusion GNOME et l'IRC sont idéaux pour trouver des candidats probables. Demandez-leur d'utiliser ces interfaces prototypes pour exécuter certains scénarios que vous avez présentés précédemment. Vous obtiendrez certainement des questions comme « comment puis-je faire X ? », « dans quel menu Y se trouve-t'il ? »... ces questions vous aideront à considérer votre interface d'un point de vue utilisateur. Vous obtiendrez également quelques suggestions sur la manière de faire les choses différemment — ces idées pourront être meilleures que les vôtres ou pas, mais toutes idées d'un utilisateur potentiel valent la peine d'être considérées !

Vous devriez également songer à obtenir des avis de l'équipe ergonomie de GNOME. Ils ont déjà conçus beaucoup d'interfaces utilisateur et peuvent être capables de mettre le doigt sur des problèmes potentiels dès le début avant que vous n'ayez trop avancé dans votre conception pour pouvoir effectuer des modifications facilement.

Une fois que vous avez décidé de la conception de base de l'interface et que vous avez commencé à coder une partie d'entre elle, trouvez quelqu'un pour l'essayer à nouveau — pas nécessairement la même personne. Vous rencontrerez certainement des nouveaux problèmes qui étaient difficiles à voir avec votre prototype papier statique. En les trouvant maintenant, il n'est en général pas trop tard pour les résoudre sans trop de soucis.

#### Internationalisation et localisation

Si vous avez l'intention de faire traduire votre application dans différentes langues, montrez les brouillons de conception de l'application à l'équipe de traduction GNOME. Ils vous aideront à trouver des éventuels problèmes de traduction tels que des manques de place pour les étiquettes traduites, des touches de raccourci posant problème sur divers agencements de clavier ou l'emploi de néologismes difficiles à traduire.

Si possible essayez votre application avec des utilisateurs dans les langues ciblées. Cela vous aidera à déterminer si les utilisateurs comprennent comment utiliser l'application, s'ils perçoivent les graphiques et les couleurs de la façon dont vous l'attendiez et s'il y a des mots ou images dans l'application qui peuvent offenser les utilisateurs dans cet environnement linguistique.

## Crédits

(en ordre alphabétique, si par erreur votre nom était omis, envoyez un courriel aux auteurs ou saisissez un rapport de bogue)

### Auteurs actifs

- Calum Benson, calum.benson@sun.com

- Bryan Clark, clarkbw@gnome.org

- Seth Nickell, seth@gnome.org

### Illustrations supplémentaires

- Mihai Anca, ropiku@gmail.com

- Denis Anisimov, genius@s146.net.ru

- Wouter Bron, wousser@gmail.com

### Auteurs inactifs/retraités

- Coleen Baik

- Adam Elman

- Colin Z. Robertson

- Maciej Stachowiak

### Contributeurs et relecteurs

- Chip Alexander

- Kathy Fernandes

- John Fleck

- Andrea Mankoski

- Nils Pederson

- Sebastian Rittau

- Christian Rose

- Sharon Snider

- Suzanna Smith

- Matthew Thomas

Cette bibliographie énumère les livres et autres ressources pour l'ingénierie logicielle, les concepteurs d'interface utilisateur et les spécialistes en ergonomie, classés par sujet et sans ordre particulier. La dernière section de la bibliographie contient des informations sur les ressources en ligne et les organisations.

### Conception générale

Dreyfuss
, Henry

### « Designing for People »

    New York, NY

: allworth press, 2003 Une réédition de la conception classique des années 60 par les concepteurs d'un peu tout, allant de la cabine d'avion moderne au téléphone de Bell. Peut-être le meilleur livre pour introduire les préoccupations générales et façons de penser dans la conception (industrielle, produit ou interaction), mais aussi une lecture divertissante.
Mandel
, Theo.

### « The Elements of User Interface Design »

.

    New York, NY

: Wiley Computer Publishing, 1997. Un livre utile présentant les bases et un large champ d'environnement et de nouveaux développements comme les gestionnaires d'interface, les assistants, l'interaction vocale, les interfaces utilisateur sociales et la conception Web.
Norman
, Donald A.

### « The Design of Everyday Things »

.

    New York, NY

: Doubleday, 1990. Un livre exceptionnel et distrayant sur la conception à travers des tâches quotidiennes simples.

### Conception graphique

Horton
, William

### « The Icon Book: Visual Symbols for Computer Systems and Documentation »

.

    New York, NY

: John Wiley & Sons, 1994.
Misjksenaar
, Paul et Piet Westendorpp.

### « Open Here: The Art of Instructional Design »

.

    Londres, UK

: Thames & Hudson, 1999
Mullet
, Kevin et Darrell Sano.

### « Designing Visual Interfaces: Communication Oriented Techniques »

.

    Englewood Cliffs, NJ

: Prentice Hall, 1995.
Rubin
, Jeffrey.

### « Handbook of Usability Testing: How to Plan, Design and Conduct Effective »Tests

.

    New York, NY

: John Wiley & Sons, 1994.
Tufte
, Edward R.

### « Envisioning Information »

.

    Cheshire, CT

: Graphics Press, 1990 La deuxième étude classique sur la visualisation d'information par Tufte.
Tufte
, Edward R.

### « The Visual Display of Quantitative Information »

. Reprint ed.,

    Cheshire, CT

: Graphics Press, 1992 La première étude classique sur la représentation mentale des informations par Tufte.
Williams
, Robin.

### « The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice »

.

    Berkeley, CA

: Peachpit Press, 1994.

### Application

Arlov
, Laura.

### « GUI Design for Dummies »

.

    Foster City, CA

: IDG Books Worldwide, 1997.
Cooper
, Alan et Reimann, Robert.

### « About Face 2.0 : The Essentials of User Interface Design »

. John Wiley & Sons, 2003.
Cooper
, Alan.

### The Inmates are Running the Asylum : Why High Tech Products Drive us Crazy and How to Restore the Sanity

. SAMS, 1999.
Isaacs
, Ellen et Alan Walendowski.

### « Designing from Both Sides of the Screen »

.

    Indianapolis, IN

: New Riders Publishing, 2001.
Nielsen
, Jakob.

### « Usability Engineering »

.

    San Francisco, CA

: Morgan Kauffman, 1993.
Tognazzini
, Bruce.

### « Tog on Interface »

.

    Reading, MA

: Addison-Wesley, 1992.