Agencement des fenêtres

VIII.II.I. 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.

VIII.II.II. 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 Section III.IV.III ― Espacement et positionnement dans les fenêtres d'alertes.

Figure VIII.3 Agencement de fenêtre amélioré

Dans la Figure VIII.3, 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 Section VI.XIX ― Cadres et séparateurs 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.

Figure VIII.4 Spécifications de l'agencement
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.

VIII.II.III. 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 Figure VIII.4, 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 Figure VIII.4) 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.