Disposition

La disposition est le dimensionnement, l’espacement et le placement du contenu dans une fenêtre ou une page. Une disposition efficace est essentielle pour aider les utilisateurs à trouver rapidement ce qu’ils recherchent, ainsi qu’à rendre l’apparence visuellement attrayante. Une disposition efficace peut faire la différence entre les conceptions que les utilisateurs comprennent immédiatement et ceux qui laissent les utilisateurs se sentir perplexes et submergés.

Remarque : Recommandations relatives à la gestion des fenêtres sont présentées dans un article distinct. Le dimensionnement et l’espacement spécifiques recommandés sont présentés dans leurs articles de recommandations respectifs.

Concepts de conception

Hiérarchie visuelle

Une fenêtre ou une page a une hiérarchie visuelle claire quand son apparence indique la relation et la priorité de ses éléments. Sans hiérarchie visuelle, les utilisateurs doivent déterminer eux-mêmes ces relations et ces priorités.

La hiérarchie visuelle est obtenue en combinant avec compétence les attributs suivants :

• Foyer. La disposition indique où les utilisateurs doivent d’abord regarder.
• Couler. L’œil circule en douceur et naturellement par un chemin clair à travers la surface, en recherchant des éléments d’interface utilisateur (UI) dans l’ordre approprié pour leur utilisation.
• Groupement. Les éléments d’interface utilisateur liés logiquement ont une relation visuelle claire. Les éléments connexes sont regroupés ; les éléments non liés sont séparés.
• Emphase. Les éléments d’interface utilisateur sont mis en évidence en fonction de leur importance relative.
• Alignement. Les éléments de l’interface utilisateur ont un positionnement coordonné, de sorte qu’ils sont faciles à analyser et à apparaître dans l’ordre.

En outre, la disposition effective a ces attributs :

• Indépendance de l’appareil. La disposition s’affiche comme prévu, quel que soit le type de police ou la taille, les points par pouce (ppp), l’affichage ou l’adaptateur graphique.
• Facile à analyser. Les utilisateurs peuvent trouver le contenu qu’ils recherchent en un clin d’œil.
• Efficacité. Les éléments d’interface utilisateur volumineux doivent être volumineux, et les éléments qui sont de petite taille fonctionnent bien.
• Resizabilité. Si elle est utile, une fenêtre est redimensionnable et sa disposition de contenu est efficace, quelle que soit la taille ou la taille de la surface.
• Balance. Le contenu apparaît uniformément distribué sur l’aire.
• Simplicité visuelle. La perception qu’une disposition n’est pas plus compliquée qu’elle ne doit l’être. Les utilisateurs ne se sentent pas submergés par l’apparence de la disposition.
• Consistance. Les fenêtres ou pages similaires utilisent une disposition similaire, de sorte que les utilisateurs se sentent toujours orientés.

Bien que le dimensionnement, l’espacement et le placement soient des concepts simples, le défi avec la disposition consiste à obtenir le bon mélange de ces attributs.

Dans Windows, la disposition est communiquée à l’aide de métriques indépendantes de l’appareil, telles que les unités de dialogue (DTU) et les pixels relatifs.

Modèle de conception pour la lecture

Les utilisateurs choisissent ce qu’ils lisent par l’apparence et l’organisation du contenu. Pour créer une disposition efficace, vous devez comprendre ce que les utilisateurs ont tendance à lire et pourquoi.

Vous pouvez prendre des décisions de disposition à l’aide de ce modèle de conception pour la lecture :

• Les personnes lisent dans un ordre de gauche à droite et de haut en bas (dans les cultures occidentales).

• Il existe deux modes de lecture : la lecture immersive et l’analyse. L’objectif de la lecture immersive est la compréhension.

  

  Ce diagramme modélise la lecture immersive.

  En revanche, l’objectif de l’analyse est de localiser les éléments. Le chemin d’analyse global ressemble à ceci :

  

  Ce diagramme modélise l’analyse.

  

  S’il existe du texte en cours d’exécution le long du bord gauche d’une page, les utilisateurs analysent d’abord le bord gauche.

• Lorsque vous utilisez des logiciels, les utilisateurs ne sont pas immergés dans l’interface utilisateur elle-même, mais dans leur travail. Par conséquent, les utilisateurs ne lisent généralement pas le texte de l’interface utilisateur qu’ils analysent. Ils lisent ensuite des bits de texte de manière complète uniquement quand ils croient qu’ils ont besoin de.

• Les utilisateurs ont tendance à ignorer les volets de navigation sur le côté gauche ou droit d’une page. Les utilisateurs reconnaissent qu’ils sont là, mais examinent les volets de navigation uniquement quand ils souhaitent naviguer.

• Les utilisateurs ont tendance à ignorer de grands blocs de texte non mis en forme sans les lire du tout.

  

  Les utilisateurs ont tendance à ignorer de grands blocs de texte et de volets de navigation lorsqu’ils analysent.

• Toutes les choses étant égales, les utilisateurs regardent d’abord dans le coin supérieur gauche d’une fenêtre, analysent sur la page et terminent leur analyse dans le coin inférieur droit. Ils ont tendance à ignorer le coin inférieur gauche.

  

  Toutes les choses étant égales, les utilisateurs lisent ces nombres dans l’ordre suivant : 1, 2, 4 et 3.

• Toutefois, dans l’interface utilisateur interactive, toutes les choses ne sont pas égales de sorte que différents éléments d’interface utilisateur reçoivent différents niveaux d’attention. Les utilisateurs ont tendance à examiner les contrôles interactifs, en particulier les contrôles situés en haut à gauche et au centre de la fenêtre et du texte de premier plan.

Les utilisateurs se concentrent sur les principaux contrôles interactifs et sur l’instruction principale de premier plan, et examinent d’autres choses uniquement quand ils ont besoin.

• Les utilisateurs ont tendance à lire des étiquettes de contrôle interactives, en particulier celles qui semblent pertinentes pour terminer la tâche à la main. En revanche, les utilisateurs ont tendance à lire du texte statique uniquement lorsqu’ils pensent qu’ils ont besoin.
• Les éléments qui apparaissent différemment attirent l’attention. Le texte en gras et le texte volumineux se distinguent du texte normal. Les éléments d’interface utilisateur avec couleur ou sur un arrière-plan coloré se distinguent. Les éléments avec icônes se distinguent des éléments sans icônes.
• Les utilisateurs ne défilent pas, sauf s’ils ont une raison de le faire. Si le contenu au-dessus du pliage ne fournit pas de raison de faire défiler, ils ne le feront pas.
• Une fois que les utilisateurs ont décidé de ce qu’il faut faire, ils arrêtent immédiatement l’analyse et le font.
• Étant donné que les utilisateurs arrêtent d’analyser lorsqu’ils pensent qu’ils sont faits, ils ont tendance à ignorer quoi que ce soit au-delà de ce qui semble être le point d’achèvement.

Les utilisateurs arrêtent d’analyser quand ils pensent qu’ils sont terminés.

Bien sûr, il y aura des exceptions à ce modèle général. Les appareils de suivi oculaire indiquent que le comportement des utilisateurs réels est assez erratique. L’objectif de ce modèle est de vous aider à prendre de bonnes décisions et compromis, et non à modéliser le comportement de l’utilisateur avec précision. Mais comme vous avez lu cette liste, j’espère que vous avez reconnu beaucoup de vos propres modèles de lecture, aussi.

Conception pour l’analyse

Les utilisateurs ne lisent pas, ils analysent de sorte que vous devez concevoir des surfaces d’interface utilisateur pour l’analyse. Ne supposez pas que les utilisateurs lisent le texte comme écrit dans un ordre de gauche à droite, en haut en bas, mais plutôt qu’ils examinent les éléments de l’interface utilisateur qui attirent leur attention.

Pour concevoir l’analyse :

• Supposons que les utilisateurs commencent par analyser rapidement l’ensemble de la fenêtre, puis en lisant les éléments de l’interface utilisateur dans l’ordre suivant :
  • Contrôles interactifs dans le centre
  • Boutons de validation
  • Contrôles interactifs trouvés ailleurs
  • Instruction principale
  • Explications supplémentaires
  • Texte présenté avec une icône d’avertissement
  • Titre de la fenêtre
  • Autre texte statique dans le corps principal
  • Notes
• Placez les éléments d’interface utilisateur qui lancent une tâche dans le coin supérieur gauche ou le centre supérieur.
• Placez les éléments d’interface utilisateur qui terminent une tâche dans le coin inférieur droit.
• Dans la mesure du possible, placez du texte crucial sur des contrôles interactifs au lieu de texte statique.
• Évitez de placer des informations cruciales dans le coin inférieur gauche ou en bas d’un contrôle ou d’une page long.
• Ne présentez pas de gros blocs de texte. Éliminez le texte inutile. Utilisez le style de présentation pyramide inversée.
• Si vous faites quelque chose pour attirer l’attention des utilisateurs, assurez-vous que l’attention est justifiée.

Dans la mesure du possible, travaillez avec ce modèle plutôt que de le combattre ; mais il y aura des moments où vous devez mettre l’accent sur des éléments d’interface utilisateur particuliers ou en mettre en évidence.

Pour mettre en évidence les éléments principaux de l’interface utilisateur :

• Placez les éléments d’interface utilisateur principaux dans le chemin d’analyse .

• Placez n’importe quelle interface utilisateur pour lancer une tâche dans le coin supérieur gauche ou le centre supérieur.

• Placez les boutons de validation dans le coin inférieur droit.

• Placez l’interface utilisateur primaire restante dans le centre.

• Utilisez des contrôles qui attirent l’attention, tels que les boutons de commande, les liens de commande et les icônes.

• Utilisez du texte de premier plan, y compris du texte volumineux et du texte en gras.

• Placer des utilisateurs de texte doit lire dans des contrôles interactifs ou avec des icônes, ou sur bannières.

• Utilisez du texte foncé sur un arrière-plan clair.

• Entourez les éléments avec un espace généreux.

• N’exigez aucune interaction, telle que pointer ou pointer, pour voir l’élément que vous mettez en évidence.

  capture d’écran

  Cet exemple montre de nombreuses façons de mettre en évidence les éléments d’interface utilisateur principaux.

Pour mettre en évidence les éléments d’interface utilisateur secondaires :

• Placez les éléments d’interface utilisateur secondaires en dehors du chemin d’analyse.

• Placez tout ce que les utilisateurs n’ont généralement pas besoin de voir dans le coin inférieur gauche ou en bas de la fenêtre.

• Utilisez des contrôles qui n’attirent pas l’attention, tels que les liens de tâche plutôt que les boutons de commande.

• Utilisez du texte normal ou gris.

• Utilisez du texte clair sur un arrière-plan sombre. Le texte blanc sur un arrière-plan gris ou bleu foncé fonctionne bien.

• Entourez les éléments avec un espace minimal.

• Envisagez d’utiliser de divulgation progressive pour masquer les éléments d’interface utilisateur secondaires.

  capture d’écran

  Cet exemple montre de nombreuses façons de délimiter les éléments d’interface utilisateur secondaires.

Utilisation efficace de l’espace d’écran

L’utilisation efficace de l’espace d’écran vous oblige à équilibrer plusieurs facteurs : utiliser trop d’espace et une fenêtre se sent lourde et gaspilleuse, et même difficile à utiliser en fonction de Loi de Fitts.

Incorrect :

capture d’écran

Dans cet exemple, la fenêtre est trop grande pour son contenu.

D’autre part, utilisez trop peu d’espace et une fenêtre se sent étroit, mal à l’aise et intimidant, et difficile à utiliser si elle nécessite un défilement et d’autres manipulations à utiliser.

Incorrect :

capture d’écran

Dans cet exemple, la fenêtre est trop petite pour son contenu.

Même si l’interface utilisateur critique doit correspondre au minimum pris en charge résolution efficace, ne supposez pas que l’utilisation efficace de l’espace d’écran signifie que les fenêtres doivent être aussi petites que possible. La disposition effective a le respect de l’espace ouvert et ne tente pas de tout mettre en forme dans le plus petit espace possible. Les écrans modernes ont un espace d’écran significatif et il est judicieux d’utiliser cet espace efficacement lorsque vous pouvez. Par conséquent, errez sur le côté d’utiliser trop d’espace d’écran plutôt que trop peu. Cela rend votre fenêtre plus légère et plus accessible.

Vous savez qu’une disposition utilise efficacement l’espace d’écran quand :

• Les fenêtres, les volets de fenêtre et les contrôles n’ont pas besoin d’être redimensionnés pour être utilisables. Si la première chose que les utilisateurs font est de redimensionner une fenêtre, un volet ou un contrôle, sa taille est incorrecte.
• Les données ne sont pas tronquées. La plupart des données dans les affichages de liste et les arborescences n’ont pas de points de suspension, et les données dans d’autres contrôles ne sont pas clippées, sauf si la longueur des données est inhabituellement importante. Les données qui doivent être lues pour effectuer une tâche ne doivent pas être tronquées.
• Les fenêtres et les contrôles sont dimensionnés de manière appropriée pour éliminer le défilement inutile. Il existe quelques barres de défilement horizontales et aucune barre de défilement verticale inutile.
• Les contrôles utilisent principalement leurs tailles standard. Essayez de réduire le nombre de tailles de contrôle, par exemple en utilisant seulement une ou deux largeurs de bouton de commande sur une surface.
• L’aire d’interface utilisateur est équilibrée. Il n’y a pas de grandes zones d’écran inutilisées.

Choisissez les tailles de fenêtre qui sont juste assez grandes pour remplir leur objectif bien. (Et si la fenêtre est redimensionnable, cet objectif s’applique à sa taille par défaut.) Une combinaison de données ou de barres de défilement tronquées et de nombreux espaces d’écran disponibles est un signe clair de disposition inefficace.

Dimensionnement du contrôle

En règle générale, la première étape de l’utilisation de l’espace d’écran consiste à déterminer la taille appropriée pour les différents éléments de l’interface utilisateur. Reportez-vous à la table de dimensionnement Contrôle ainsi que le dimensionnement recommandé dans les articles des instructions de contrôle spécifiques.

Fitts' Law déclare que la plus petite cible est, plus il faut de temps pour l’acquérir avec la souris. En outre, pour les ordinateurs utilisant la technologie Tactile et tablette Windows, la « souris » peut être un stylet ou le doigt de l’utilisateur. Vous devez donc envisager d’autres appareils d’entrée lors de la détermination des tailles pour les petits contrôles. Une taille de contrôle de 16 x 16 pixels relatifs est une bonne taille minimale pour n’importe quel appareil d’entrée. En revanche, les boutons de contrôle de rotation de pixels relatifs 15x9 standard sont trop petits pour être utilisés efficacement par les stylets.

Espacement

Fournir un espace généreux (mais pas excessif) rend la disposition plus confortable et plus facile à analyser. L’espace efficace n’est pas inutilisé, il joue un rôle important dans l’amélioration de la capacité des utilisateurs à analyser, et ajoute également à l’appel visuel de votre conception. Pour obtenir des instructions, reportez-vous à la table d’espacement .

Pour les ordinateurs utilisant la technologie tablette windows et tactile, la « souris » peut être en fait un stylet ou le doigt de l’utilisateur. Le ciblage est plus difficile lors de l’utilisation d’un stylet ou d’un doigt comme appareil pointant, ce qui entraîne l’appui des utilisateurs en dehors de la cible prévue. Lorsque les contrôles interactifs sont placés très près, mais ne sont pas réellement tactiles, les utilisateurs peuvent cliquer sur l’espace inactif entre les contrôles. Étant donné que le fait de cliquer sur un espace inactif n’a aucun résultat ou commentaires visuels, les utilisateurs sont souvent incertains de ce qui s’est passé. Si les petits contrôles sont trop espacés, l’utilisateur doit appuyer avec précision pour éviter d’appuyer sur l’objet incorrect. Pour résoudre ces problèmes, les régions cibles des contrôles interactifs doivent être tactiles ou avoir au moins 3 DTU (5 pixels relatifs) d’espace entre eux.

Vous savez qu’une disposition a un espacement correct quand :

• Dans l’ensemble, la surface de l’interface utilisateur est confortable et ne se sent pas serrée.
• L’espace apparaît uniforme et équilibré.
• Les éléments connexes sont proches et les éléments non liés sont relativement éloignés.
• Il n’existe aucun espace mort entre les contrôles destinés à être ensemble, tels que les boutons de barre d’outils.

Fenêtres redimensionnables

Les fenêtres redimensionnables sont également un facteur d’utilisation efficace de l’espace d’écran. Certaines fenêtres sont constituées de contenu fixe et ne bénéficient pas d’être redimensionnables, mais les fenêtres avec du contenu redimensionnable doivent être redimensionnables. Bien sûr, la raison pour laquelle les utilisateurs redimensionnent une fenêtre consiste à prendre des avancées de l’espace d’écran supplémentaire, de sorte que le contenu doit s’étendre en conséquence en donnant plus d’espace aux éléments d’interface utilisateur qui en ont besoin. Windows avec du contenu dynamique, des documents, des images, des listes et des arborescences bénéficie le plus des fenêtres redimensionnables.

Dans cet exemple, le redimensionnement de la fenêtre redimensionne le contrôle d’affichage de liste.

Cela dit, les fenêtres peuvent être étirées trop larges. Par exemple, de nombreuses pages du panneau de configuration deviennent instables lorsque le contenu est plus large que 600 pixels relatifs. Dans ce cas, il est préférable de ne pas redimensionner la zone de contenu au-delà de cette largeur maximale ou de modifier l’origine du contenu lorsque la fenêtre est redimensionnée plus grande. Au lieu de cela, conservez une largeur maximale et une origine supérieure gauche fixe.

Le texte devient difficile à lire à mesure que la longueur de la ligne augmente. Pour les documents texte, envisagez une longueur maximale de ligne de 80 caractères pour faciliter la lecture du texte. (Les caractères incluent des lettres, une ponctuation et des espaces.)

Incorrect :

Dans cet exemple, la longueur de texte longue rend difficile la lecture.

Enfin, les fenêtres redimensionnables doivent également utiliser l’espace d’écran efficacement lorsqu’elles sont réduites, en rendant le contenu redimensionnable plus petit et en supprimant l’espace des éléments d’interface utilisateur qui peuvent fonctionner efficacement sans lui. À un moment donné, la fenêtre ou ses éléments d’interface utilisateur deviennent trop petits pour être utilisables. Ils doivent donc être affectés à une taille minimale ou certains éléments doivent être supprimés complètement.

du ruban

Dans cet exemple, le volet a une taille minimale.

Certains programmes bénéficient d’une présentation complètement différente pour rendre le contenu utilisable à des tailles plus petites.

Dans cet exemple, le lecteur Windows Media modifie son format lorsque la fenêtre devient trop petite pour le format standard.

Foyer

Une disposition a le focus lorsqu’il y a un endroit évident à regarder en premier. Le focus est important pour montrer aux utilisateurs où commencer à analyser votre fenêtre ou page. Sans focus clair, l’œil de l’utilisateur va errer sans but. Le point focal doit être quelque chose d’important que les utilisateurs doivent trouver et comprendre rapidement, et doivent avoir le plus grand accent visuel. Le coin supérieur gauche est le point focal naturel pour la plupart des fenêtres.

Il ne doit y avoir qu’un seul point focal. Tout comme dans la vie réelle, l’œil ne peut se concentrer sur qu’une seule chose à la fois, les utilisateurs ne peuvent pas se concentrer sur plusieurs endroits simultanément.

Pour rendre un élément d’interface utilisateur le point focal, vous pouvez lui donner l’accent visuel en mettant l’accent sur les éléments suivants :

• Placez-la dans la partie supérieure gauche ou supérieure centre de la surface.
• Utilisation de contrôles interactifs qui sont importants et facilement compréhensibles.
• Utilisation d’un texte de premier plan, tel qu’une instruction principale.
• Donner aux contrôles la sélection par défaut et le focus d’entrée initial.
• Placer les contrôles dans un arrière-plan coloré différent.

Considérez Windows Search. Le point focal pour Windows Search doit être la zone de recherche, car il s’agit du point de départ de la tâche. Toutefois, il se trouve dans le coin supérieur droit pour être cohérent avec le positionnement standard de la zone de recherche. La zone de recherche a le focus d’entrée, mais étant donné son emplacement dans le chemin d’analyse, cet indice seul n’est pas suffisant.

Pour résoudre ce problème, il existe une instruction importante dans la partie supérieure de la fenêtre pour diriger les utilisateurs vers l’emplacement approprié.

acceptable :

Dans cet exemple, une instruction de premier plan dans la partie supérieure de la fenêtre dirige les utilisateurs vers la zone de recherche.

Sans les instructions, la fenêtre n’aurait pas de point focal évident.

Incorrect :

de texte

Cet exemple n’a pas de point focal évident. Les utilisateurs ne savent pas où regarder.

Si vous mettent l’accent sur l’élément d’interface utilisateur, assurez-vous que l’attention est justifiée. Dans l’exemple de recherche Windows incorrect précédent, le bouton Tout mis en surbrillance se trouve dans le coin supérieur gauche et a l’accent le plus visuel, mais ce n’est pas le point focal prévu. Les utilisateurs peuvent être bloqués en regardant ce bouton essayant de déterminer ce qu’il faut faire avec lui.

Incorrect :

Sans l’instruction de premier plan comme point focal, le bouton Tout mis en surbrillance est un point focal involontaire.

Couler

Une disposition a un flux lorsque les utilisateurs sont guidés en douceur et naturellement par un chemin clair à travers sa surface, en recherchant des éléments d’interface utilisateur dans l’ordre approprié pour leur utilisation. Une fois que les utilisateurs identifient le point focal, ils doivent déterminer comment effectuer la tâche. Le placement des éléments d’interface utilisateur transmet leur relation et doit mettre en miroir les étapes à suivre pour effectuer la tâche. En règle générale, cela signifie que les étapes de la tâche doivent circuler naturellement dans un ordre de gauche à droite en haut à bas (dans les cultures occidentales).

Vous savez qu’une disposition a un bon flux quand :

• Le placement des éléments de l’interface utilisateur reflète les étapes que les utilisateurs doivent effectuer pour effectuer la tâche.
• Les éléments d’interface utilisateur qui lancent une tâche se trouvent dans le coin supérieur gauche ou le centre supérieur.
• Les éléments d’interface utilisateur qui terminent une tâche se trouvent dans le coin inférieur droit.
• Les éléments d’interface utilisateur associés sont ensemble ; les éléments non liés sont séparés.
• Les étapes requises se trouvent dans le flux principal.
• Les étapes facultatives sont en dehors du flux principal, éventuellement déconseillées à l’aide d’un contexte approprié ou d’une divulgation progressive.
• Les éléments fréquemment utilisés apparaissent avant les éléments rarement utilisés dans le chemin d’analyse.
• Les utilisateurs savent toujours ce qu’il faut faire ensuite. Il n’y a pas de sauts ou d’interruptions inattendus dans le flux de tâches.

Incorrect :

capture d’écran

Dans cet exemple, les utilisateurs ne savent pas quoi faire ensuite. Il existe des sauts et des sauts inattendus dans le flux de tâches.

correct :

Dans cet exemple, la présentation des éléments de l’interface utilisateur reflète les étapes à suivre pour effectuer la tâche.

Groupement

Une disposition a un regroupement lorsque les éléments d’interface utilisateur liés logiquement ont une relation visuelle claire. Les groupes sont importants, car il est plus facile pour les utilisateurs de comprendre et de se concentrer sur un groupe d’éléments connexes que les éléments individuellement. Les groupes simplifient et facilitent l’analyse d’une disposition.

Vous pouvez afficher le regroupement de manières suivantes (en augmentant la lourdeur) :

• Disposition. Vous pouvez regrouper les contrôles associés en regard des autres et placer un espacement supplémentaire entre des contrôles non liés.

  

  Dans cet exemple, la disposition seule est utilisée pour afficher les relations de contrôle.

• Séparateurs. Un séparateur est une ligne horizontale ou verticale qui unifie un groupe de contrôles. Les séparateurs offrent un aspect plus simple et plus propre. Toutefois, contrairement aux boîtes de groupe, elles fonctionnent mieux lorsqu’elles s’étendent sur toute la surface.

  

  Dans cet exemple, les séparateurs étiquetés sont utilisés pour afficher les relations de contrôle.

• Agrégateurs. Un agrégateur est un graphique qui crée une relation visuelle entre des contrôles fortement liés.

  

  Dans cet exemple, un agrégateur de limites est utilisé pour mettre en évidence la relation entre les contrôles et les faire sentir comme un seul contrôle au lieu de huit.

• Zones de groupe. Une zone de groupe est un cadre rectangulaire étiqueté qui entoure un ensemble de contrôles associés.

  

  Dans cet exemple, une zone de groupe entoure et étiquette un ensemble de contrôles associés.

• Milieux. Vous pouvez utiliser des arrière-plans pour mettre l’accent ou mettre en évidence différents types de contenu.

  

  Dans cet exemple, le volet Office du panneau de configuration est utilisé pour regrouper les tâches associées et les éléments du panneau de configuration.

  Pour éviter l’encombrement visuel, le regroupement de poids le plus léger qui fait bien le travail est le meilleur choix. Pour plus d’informations, consultez zones de groupe, onglets, séparateurs et arrière-plans.

Quel que soit le style de regroupement, vous pouvez utiliser la mise en retrait pour afficher la relation des contrôles au sein d’un groupe. Les contrôles qui sont des homologues les uns aux autres doivent être alignés à gauche et les contrôles dépendants sont mis en retrait de 12 DTU ou 18 pixels relatifs.

Les contrôles dépendants sont mis en retrait 12 DLUS ou 18 pixels relatifs, ce qui, par conception, correspond à la distance entre les cases à cocher et les cases d’option de leurs étiquettes.

Vous savez qu’une disposition comporte un bon regroupement lorsque :

• La fenêtre ou les pages ont au maximum 7 groupes.
• L’objectif de chaque groupe est évident.
• La relation des contrôles au sein de chaque groupe est évidente, en particulier la dépendance de contrôle.
• Le regroupement simplifie le contenu plutôt que de le rendre plus complexe.

Alignement

L’alignement est le positionnement coordonné des éléments de l’interface utilisateur. L’alignement est important, car il facilite l’analyse du contenu et affecte la perception des utilisateurs de la complexité visuelle.

Il existe plusieurs objectifs à prendre en compte lors de la détermination de l’alignement :

• Facilité d’analyse horizontale. Les utilisateurs peuvent lire horizontalement et rechercher des éléments connexes en regard des uns des autres, sans aucune lacune maladroite.
• Facilité d’analyse verticale. Les utilisateurs peuvent analyser des colonnes d’éléments connexes et trouver immédiatement ce qu’ils recherchent, avec un mouvement d’œil horizontal minimal.
• Complexité visuelle minimale. Les utilisateurs considèrent qu’une disposition est visuellement complexe si elle a des lignes de grille d’alignement verticale inutiles.

Alignement horizontal

alignement gauche

En raison de l’ordre de lecture de gauche à droite, l’alignement gauche fonctionne bien pour la plupart du contenu. L’alignement gauche facilite l’analyse verticale des données en colonnes.

alignement droit

L’alignement droit est le meilleur choix pour les données numériques, en particulier colonnes de données numériques. L’alignement droit fonctionne également bien pour boutons de validation ainsi que les contrôles alignés sur le bord de la fenêtre droite.

Dans cet exemple, le contrôle de divulgation progressive de la recherche avancée est aligné à droite, car il est placé sur le bord de la fenêtre droite.

d’alignement du Centre

L’alignement central est le meilleur réservé aux situations où l’alignement gauche ou droit est inapproprié ou apparaît déséquilibré.

Dans cet exemple, le contrôle du lecteur multimédia est centré pour donner une apparence équilibrée.

Ne centrez pas le contenu de la fenêtre juste pour remplir l’espace.

Incorrect :

Dans cet exemple, le contenu est mal centré dans une fenêtre redimensionnable pour remplir l’espace.

Alignement vertical

Élément tops

En raison de l’ordre de lecture de haut en bas, l’alignement supérieur fonctionne bien pour la plupart du contenu. L’alignement supérieur facilite l’analyse horizontale des éléments d’interface utilisateur.

lignes de base de texte

Lors de l’alignement vertical des contrôles avec du texte, alignez les lignes de base de texte pour donner un flux de lecture horizontal lisse.

correct :

Incorrect :

Dans l’exemple correct, le contrôle et son étiquette sont alignés verticalement par leurs lignes de base de texte.

Vous savez qu’une disposition a un bon alignement quand :

• Il est facile d’analyser horizontalement et verticalement.
• Il a une apparence visuelle simple.

Alignement des étiquettes

Les règles d’alignement générales s’appliquent aux étiquettes de contrôle, mais il s’agit d’un problème courant digne d’une attention particulière. L’alignement des étiquettes a les objectifs suivants :

• Facilitez l’analyse verticale pour trouver le bon contrôle.
• Facilitez l’analyse horizontale pour associer des étiquettes à leurs contrôles.
• Facilité de localisation, gestion des étiquettes qui diffèrent en longueur entre les langues.
• Fonctionne bien avec un mélange de longueurs d’étiquettes différentes.
• Utilise efficacement l’espace disponible tout en évitant le texte tronqué.

L’objectif global est de réduire la quantité de mouvements oculaires requis pour trouver ce que les utilisateurs recherchent probablement, mais la nature des contrôles et ce que les utilisateurs recherchent dépend du contexte.

Il existe quatre styles courants de placement et d’alignement d’étiquette, chacun avec ses avantages :

• Étiquettes justifiées à gauche au-dessus des contrôles
• Étiquettes justifiées à gauche des contrôles
• Étiquettes justifiées à gauche des contrôles, contrôles rarés à gauche
• Étiquettes justifiées à droite à gauche des contrôles

étiquettes justifiées à gauche au-dessus des contrôles

Ce style est le plus simple à localiser, car la disposition ne dépend pas de la longueur des étiquettes, mais elle prend l’espace le plus vertical.

liste

Ce style prend le plus d’espace vertical, mais est plus facile à localiser. Il est préférable d’étiqueter principalement des contrôles interactifs.

Mieux utilisé lorsque :

• Les contrôles étiquetés sont interactifs (pas seulement du texte).
• L’interface utilisateur est localisée. Ce style offre souvent une chambre pour double ou même tripler la longueur de l’étiquette.
• L’interface utilisateur utilise une technologie de disposition fixe (telle que Win32).
• Il y a dix contrôles ou moins. Avec d’autres contrôles, les étiquettes sont difficiles à analyser.
• Il y a suffisamment d’espace vertical pour prendre en charge les étiquettes.
• La disposition doit être libre, pas seulement les colonnes.

étiquettes justifiées à gauche des contrôles

Ce style est le plus simple à analyser verticalement et fonctionne également bien lorsque les étiquettes diffèrent considérablement de longueur, mais il est plus difficile d’associer l’étiquette à son contrôle. Ce style peut utiliser des étiquettes multilignes si nécessaire.

liste

Ce style fonctionne bien. Toutefois, il existe deux colonnes, mais visuellement, il semble qu’il y a quatre données qui rendent les données plus complexes.

Mieux utilisé lorsque :

• Les utilisateurs sont susceptibles d’analyser verticalement pour rechercher des étiquettes spécifiques.
• Les utilisateurs ne sont pas susceptibles de lire les étiquettes et les contrôles de gauche à droite, en haut à bas.
• Il y a suffisamment d’espace horizontal pour prendre en charge les étiquettes.
• Les étiquettes varient considérablement en longueur.
• Il existe de nombreux contrôles, tels que les formulaires.
• Il existe quelques colonnes. Visuellement, les étiquettes et les contrôles apparaissent sous la forme de deux colonnes individuelles.

étiquettes justifiées à gauche des contrôles, les contrôles rarés à gauche

Ce style permet d’analyser facilement les étiquettes verticalement et les étiquettes et les contrôles horizontalement, et est très efficace ; mais il est plus difficile d’analyser les contrôles verticalement. Les contrôles sont justifiés avec le droit de tirer pleinement parti de l’espace disponible.

Ce style est compact et facile à lire, mais il est difficile d’analyser les contrôles verticalement.

Mieux utilisé lorsque :

• L’interface utilisateur utilise une technologie de disposition variable (par exemple, Windows Presentation Foundation).
• Les utilisateurs sont susceptibles d’analyser verticalement pour rechercher des étiquettes spécifiques.
• Les utilisateurs sont susceptibles de lire les étiquettes et les contrôles de gauche à droite, de haut en bas.
• Les utilisateurs ne sont pas susceptibles d’analyser les contrôles verticalement.
• Le texte du contrôle varie en longueur et sera probablement tronqué si un autre style a été utilisé.
• Les contrôles sont en lecture seule, tels que les zones de texte en lecture seule. Pour d’autres contrôles, cet alignement semble bâclé. Toutefois, les contrôles peuvent devenir modifiables en cliquant.
• Il existe de nombreuses colonnes, mais peu de contrôles dans une colonne.

étiquettes justifiées à droite à gauche des contrôles

Ce style est le plus simple à lire horizontalement pour associer les étiquettes à leurs contrôles, mais il est difficile d’analyser les étiquettes verticalement et ne fonctionne pas correctement lorsque labelsList avec des étiquettes et des contrôles mis en retrait diffèrent considérablement en longueur.

liste

Ce style permet une analyse verticale facile des contrôles, mais il est difficile d’analyser les étiquettes verticalement.

Mieux utilisé lorsque :

• Les utilisateurs sont susceptibles de lire les étiquettes et les contrôles de gauche à droite, de haut en bas.
• Les utilisateurs ne sont pas susceptibles d’analyser verticalement pour rechercher des étiquettes spécifiques, éventuellement parce que :
  • Il existe quelques contrôles.
  • Les étiquettes sont bien connues.
  • Les contrôles sont principalement explicites et sont rarement vides (peut-être avoir des valeurs par défaut pour empêcher les contrôles vides).
• Il y a suffisamment d’espace horizontal pour prendre en charge les étiquettes.
• Les étiquettes ne varient pas considérablement en longueur.
• Il existe de nombreuses colonnes. Visuellement, les étiquettes et les contrôles apparaissent sous la forme d’une seule colonne.

Avant d’adopter l’un de ces styles, tenez toutefois compte de deux facteurs supplémentaires :

• Préférez un style que vous pouvez utiliser de manière cohérente dans votre programme.
• Les étiquettes justifiées à gauche sont les styles les plus courants, de sorte qu’elles doivent être privilégiées.

Balance

Une fenêtre ou une page a un équilibre lorsque son contenu apparaît uniformément distribué sur sa surface. Si la surface avait physiquement la même pondération qu’elle l’a visuellement, une disposition équilibrée ne pointe pas vers un côté.

Le problème d’équilibre le plus courant est d’avoir trop de contenu sur le côté gauche d’une fenêtre ou d’une page. Vous pouvez créer l’équilibre de la manière suivante :

• Utilisation de marges plus grandes sur le côté gauche que la droite.
• Placer des éléments d’interface utilisateur utilisés pour effectuer une tâche à droite.
• Placer des éléments d’interface utilisateur utilisés dans toute la tâche dans le centre.
• Allongement des contrôles redimensionnables ou multilignes.
• Utilisation stratégique de l’alignement central.

Cette mise en page de l’Assistant bien équilibrée affiche une marge gauche supérieure à droite pour améliorer l’équilibre.

Si ces techniques n’atteignent pas d’équilibre, envisagez de réduire la largeur de la fenêtre ou de la page pour mieux correspondre à son contenu.

Pour les surfaces redimensionnables, ne centrez pas simplement le contenu pour obtenir un équilibre. Au lieu de cela, conservez une origine supérieure gauche fixe, définissez une surface maximale et équilibrez le contenu dans l’espace utilisé.

Grilles

Une grille est un système d’alignement sous-jacent invisible. Les grilles peuvent être symétriques, mais les grilles asymétriques fonctionnent également. Lorsqu’elles sont utilisées par une seule fenêtre ou une page, les grilles permettent d’organiser le contenu dans une surface. En cas de réutilisation, les grilles créent une disposition cohérente entre les surfaces.

Le nombre de lignes de grille affecte la perception de la complexité visuelle. Une disposition avec moins de lignes de grille apparaît plus simple qu’une disposition avec plus de lignes de grille.

complexe visuellement :

visuellement simple :

Les lignes de grille inutiles créent une complexité visuelle.

Vous savez qu’une disposition utilise efficacement des grilles quand :

• Windows ou pages avec un contenu ou une fonction similaires ont une disposition similaire.
• Les éléments de conception répétés apparaissent dans des emplacements similaires entre les fenêtres et les pages.
• Il n’existe pas de lignes de grille d’alignement verticale et horizontale inutiles.

Simplicité visuelle

La simplicité visuelle est la perception qu’une disposition n’est pas plus compliquée qu’elle ne doit l’être.

Vous savez qu’une disposition a une simplicité visuelle quand elle :

• Élimine les couches inutiles de chrome de fenêtre.
• Présente le contenu à l’aide d’au plus sept groupes facilement identifiables.
• Utilise un regroupement léger, tel que la disposition et les séparateurs au lieu de zones de groupe.
• Utilise des contrôles légers, tels que des liens plutôt que des boutons de commande pour les commandes secondaires, et des listes déroulantes au lieu de listes pour les choix.
• Réduit le nombre de lignes de grille d’alignement vertical et horizontal.
• Réduit le nombre de tailles de contrôle, par exemple en utilisant seulement une ou deux largeurs de bouton de commande sur une surface.
• Utilise la divulgation progressive pour masquer les éléments de l’interface utilisateur jusqu’à ce qu’ils soient nécessaires.
• Utilise suffisamment d’espace pour que la fenêtre ou la page ne se sente pas serrée.
• Dimensionne les fenêtres et les contrôles de manière appropriée pour éliminer les défilements inutiles.
• Utilise une police unique avec un petit nombre de tailles et de couleurs de texte.

En règle générale, si un élément de disposition peut être éliminé sans nuire à l’efficacité de l’interface utilisateur, il doit probablement être.

Lignes directrices

Résolution d’écran et ppp

• Prendre en charge la résolution minimale effective de Windows de 800 x 600 pixels. Pour les interfaces utilisateur critiques qui doivent fonctionner en mode sans échec, prenez en charge une résolution efficace de 640 x 480 pixels. Veillez à tenir compte de l’espace utilisé par la barre des tâches en réservant 48 pixels verticaux pixels relatifs pour les fenêtres affichées avec la barre des tâches.
• Optimisez les dispositions de fenêtre redimensionnables pour une résolution effective de 1024 x 768 pixels. Redimensionnez automatiquement ces fenêtres pour les résolutions d’écran inférieures d’une manière qui est toujours fonctionnelle.
• Veillez à tester vos fenêtres en 96 points par pouce (ppp) (à 800 x 600 pixels), 120 ppp (à 1024 x 768 pixels) et 144 ppp (à 1200 x 900 pixels). Vérifiez les problèmes de disposition, tels que le découpage des contrôles, du texte et des fenêtres, ainsi que l’étirement des icônes et des bitmaps.
• Pour les programmes avec des scénarios d’utilisation tactile et mobile, optimisez-les pour 120 ppp. Les écrans haute résolution sont actuellement répandus sur les PC tactiles et mobiles.

Taille de la fenêtre

• Choisissez une taille de fenêtre par défaut appropriée pour son contenu. N’avez pas peur d’utiliser des tailles de fenêtre initiales plus grandes si vous pouvez utiliser l’espace efficacement.
• Utilisez un rapport d’aspect de hauteur équilibrée en largeur. Un rapport d’aspect compris entre 3:5 et 5:3 est préféré, bien qu’un rapport d’aspect de 1:3 puisse être utilisé pour les boîtes de dialogue de message (telles que les erreurs et les avertissements).
• Utilisez des fenêtres redimensionnables chaque fois que cela est pratique pour éviter les barres de défilement et les données tronquées. Windows avec du contenu dynamique, des documents, des images, des listes et des arborescences bénéficie le plus des fenêtres redimensionnables.
• Pour les documents texte, envisagez une longueur maximale de ligne de 80 caractères pour faciliter la lecture du texte. (Les caractères incluent des lettres, une ponctuation et des espaces.)
• Fenêtres de taille fixe :
  • les fenêtres de taille fixe doivent être entièrement visibles et dimensionnées pour s’adapter à la zone de travail.
• Fenêtres redimensionnables :

  • fenêtres redimensionnables peuvent être optimisées pour des résolutions plus élevées, mais dimensionnées en fonction des besoins au moment de l’affichage pour la résolution réelle de l’écran.

  • Les tailles de fenêtre progressivement plus grandes doivent afficher progressivement plus d’informations. Assurez-vous qu’au moins une partie ou un contrôle de fenêtre a du contenu redimensionnable.

  • Conservez l’origine supérieure gauche du contenu fixe lorsque la fenêtre est redimensionnée. Ne déplacez pas l’origine pour équilibrer le contenu à mesure que la taille de la fenêtre change.

  • Définissez une taille de contenu maximale si le contenu peut être trop étendu trop large. Si le contenu devient instable, ne redimensionnez pas la zone de contenu au-delà de sa largeur maximale ou modifiez l’origine du contenu au fur et à mesure que la fenêtre est redimensionnée. Au lieu de cela, conservez une largeur maximale et une origine supérieure gauche fixe.

  • Définissez une taille de fenêtre minimale s’il existe une taille inférieure à laquelle le contenu n’est plus utilisable. Pour les contrôles redimensionnables, définissez les tailles d’éléments redimensionnables minimales sur leurs plus petites tailles fonctionnelles, telles que les largeurs de colonne fonctionnelles minimales dans les affichages de liste. Les éléments d’interface utilisateur facultatifs doivent être supprimés complètement.

  • Envisagez de modifier la présentation pour rendre le contenu utilisable à des tailles plus petites.

    capture d’écran

    Dans cet exemple, le lecteur Windows Media modifie son format lorsque la fenêtre devient trop petite pour le format standard.

Taille du contrôle

• Effectuez tous les contrôles interactifs au moins 16 x 16 pixels. Cela fonctionne bien pour tous les appareils d’entrée, y compris la tablette Windows et la technologie tactile.

• Contrôles de taille pour éviter les données tronquées. Ne tronquez pas les données qui doivent être lues pour effectuer une tâche. Dimensionner les colonnes d’affichage de liste pour éviter les données tronquées.

• Contrôles de taille pour éliminer le défilement inutile. Faites en sorte que les contrôles soient légèrement plus volumineux si cela élimine une barre de défilement. Il doit y avoir quelques barres de défilement verticales et aucune barre de défilement horizontale inutile.

  

  Dans cet exemple, la liste déroulante est dimensionnée pour éliminer la barre de défilement.

• Réduisez le nombre de tailles de contrôle sur une surface. Préférez utiliser les tailles de contrôle standard recommandées et, si nécessaire, utilisez quelques contrôles plus ou moins dimensionnés de manière cohérente. Essayez d’utiliser une largeur unique pour les zones de liste et les arborescences, et pas plus de trois largeurs pour les boutons de commande et les listes déroulantes. Toutefois, les largeurs de zone de texte et de zone de liste modifiable doivent suggérer la longueur de leur entrée la plus longue ou attendue.

  

  Dans cet exemple, une zone de liste et une taille de bouton de commande sont utilisées de manière cohérente.

• Pour les contrôles dimensionnés en fonction de leur texte, incluez un pourcentage supplémentaire de 30 % (jusqu’à 200 % pour le texte plus court) pour tout texte localisé. Cette directive suppose que la disposition est conçue à l’aide du texte anglais. Notez également que cette directive fait référence au texte localisé, et non aux nombres.

• Étendez les contrôles de texte statique, les cases à cocher et les cases d’option à la largeur maximale qui s’adaptera à la disposition. Cela évite la troncation du texte et de la localisation de longueur variable.

  Incorrect :

  

  Dans cet exemple, le texte de contrôle est inutilement tronqué.

Espacement du contrôle

• Si les contrôles ne touchent pas, disposez d’au moins 3 DTU (5 pixels relatifs) d’espace entre eux. Sinon, les utilisateurs peuvent cliquer sur l’espace inactif entre les contrôles. Étant donné que le fait de cliquer sur un espace inactif n’a aucun résultat ou commentaires visuels, les utilisateurs sont souvent incertains de ce qui s’est passé.

Placement

• Organisez les éléments de l’interface utilisateur dans une surface pour qu’ils circulent naturellement dans un ordre de gauche à droite et de haut en bas (dans les cultures occidentales). Le placement des éléments d’interface utilisateur transmet leur relation et doit mettre en miroir les étapes à suivre pour effectuer la tâche.
• Placez les éléments d’interface utilisateur qui lancent une tâche dans le coin supérieur gauche ou le centre supérieur. Donnez à l’élément d’interface utilisateur que les utilisateurs doivent d’abord examiner le plus grand accent visuel.
• Placer les éléments d’interface utilisateur qui terminent une tâche dans le coin inférieur droit.
• placer les éléments d’interface utilisateur associés ensemble et séparer les éléments non liés.
• Placez les étapes requises dans le flux principal.
• Placez les étapes facultatives en dehors du flux principal, éventuellement déconseillées à l’aide d’un contexte approprié ou d’une divulgation progressive.
• Placez les éléments fréquemment utilisés avant les éléments rarement utilisés dans le chemin d’analyse.

Foyer

• Choisissez un seul élément d’interface utilisateur que les utilisateurs doivent examiner en premier pour être le point focal. Le point focal doit être quelque chose d’important que les utilisateurs doivent trouver et comprendre rapidement.
• Placez le point focal dans le coin supérieur gauche ou le centre supérieur.
• Donnez au point focal le plus grand accent visuel, tels que le texte de premier plan, la sélection par défaut ou le focus d’entrée initial.

Alignement

• Normalement, utilisez l’alignement gauche.
• Utilisez l’alignement approprié pour les données numériques, en particulier les colonnes de données numériques.
• Utilisez l’alignement droit pour les boutons de validation, ainsi que les contrôles alignés sur le bord de la fenêtre droite.
• Utilisez l’alignement central lorsque l’alignement gauche ou droit est inapproprié ou est déséquilibré.
• Lors de l’alignement vertical des contrôles avec du texte, alignez les lignes de base de texte pour donner un flux de lecture horizontal lisse.
• Pour l’alignement des étiquettes, reportez-vous à la section Alignement des étiquettes dans les concepts de conception.

Accessibilité

• N’utilisez pas la disposition comme seul moyen de transmettre des informations importantes sur une interface utilisateur. Les utilisateurs présentant des déficiences visuelles peuvent ne pas être en mesure d’interpréter cette présentation. Par exemple, assurez-vous que les étiquettes communiquent leur relation avec d’autres éléments.

• N’incorporez pas de contrôles subordonnés dans les étiquettes de contrôle pour créer une phrase ou une expression. Ces associations sont basées uniquement sur la disposition et ne sont pas gérées correctement par la navigation au clavier ou les technologies d’assistance d’accessibilité. En outre, cette technique n’est pas localisable, car la structure des phrases varie en fonction de la langue.

  Incorrect :

  

  Dans cet exemple, la zone de texte est incorrectement placée dans l’étiquette de case à cocher.

  correct :

  

  Ici, la zone de texte est placée après l’étiquette de la case à cocher.

• Rendre le regroupement accessible. Les groupes définis par les volets de fenêtre, les zones de groupe, les séparateurs, les étiquettes de texte et les agrégateurs sont gérés automatiquement par les aides à l’accessibilité. Toutefois, les groupes définis uniquement par le placement et les arrière-plans ne sont pas, et doivent être définis par programme pour l’accessibilité.

Pour plus d’instructions, consultez d’accessibilité.

Dimensionnement et espacement recommandés

de dimensionnement de contrôle

Le tableau suivant répertorie les tailles recommandées (largeur x hauteur ou hauteur si un nombre unique) pour les éléments d’interface utilisateur courants (pour 9 pts. Interface utilisateur Segoe à 96 ppp). Les largeurs basées sur l’élément le plus long en anglais ajoutent 30 % pour la localisation (jusqu’à 200 % pour le texte plus court) pour tout texte (mais pas les nombres) qui sera localisé.

Exemple	Contrôle	Unités de boîte de dialogue	Pixels relatifs
	Cases à cocher	10	17
	Zones de liste modifiable	largeur de l’élément le plus long + 30% x 14	largeur de l’élément le plus long + 30% x 23
	Boutons de commande	50 x 14	75 x 23
	Liens de commande	25 (une ligne) ou 35 (deux lignes)	41 (une ligne) ou 58 (deux lignes)
	Listes déroulantes	largeur des données valides les plus longues + 30% x 14	largeur de l’élément le plus long + 30% x 23
	Zones de liste	largeur de l’élément le plus long + 30% x un nombre intégral d’éléments (3 éléments minimum)
	Affichages de liste	largeurs de colonnes qui évitent les données tronquées x un nombre intégral d’éléments
	Barres de progression	107 ou 237 x 8	160 ou 355 x 15
	Cases d’option	10	17
	Curseurs	15	24
	Texte (statique)	8	13
capture d’écran	Zones de texte	largeur de l’entrée la plus longue ou attendue + 30% x 14 (une ligne) + 10 pour chaque ligne supplémentaire	largeur des données valides les plus longues + 30% x 23 pixels relatifs (une ligne) + 16 pour chaque ligne supplémentaire
	Arborescences	largeur de l’élément le plus long + 30% x un nombre intégral d’éléments (5 éléments minimum)

espacement

Le tableau suivant répertorie l’espacement recommandé entre les éléments communs de l’interface utilisateur (pour 9 pts. Interface utilisateur Segoe à 96 ppp).

	Élément	Unités de boîte de dialogue	Pixels relatifs
image	Marges de la boîte de dialogue	7 sur tous les côtés	11 sur tous les côtés
	Entre les étiquettes de texte et leurs contrôles associés (par exemple, zones de texte et zones de liste)	3	5
image	Entre les contrôles associés	4	7
image	Entre les contrôles non liés	7	11
	Premier contrôle dans une zone de groupe	11 vers le bas du haut de la zone de groupe ; aligner verticalement sur le titre de la zone de groupe	16 vers le bas du haut de la zone de groupe ; aligner verticalement sur le titre de la zone de groupe
	Entre les contrôles d’une zone de groupe	4	7
image	Entre des boutons disposés horizontalement ou verticalement	4	7
	Dernier contrôle dans une zone de groupe	7 au-dessus du bas de la zone de groupe	11 au-dessus du bas de la zone de groupe
	À partir du bord gauche d’une zone de groupe	6	9
image	Étiquette de texte à côté d’un contrôle	3 vers le bas du haut du contrôle	5 vers le bas du haut du contrôle
	Entre les paragraphes de texte	7	11
	Espace le plus petit entre les contrôles interactifs	3 ou pas d’espace	5 ou aucun espace
	Espace le plus petit entre un contrôle non interactif et tout autre contrôle	2	3