Éléments graphiques

éléments graphiques afficher visuellement les relations, la hiérarchie et l’accentuation. Ils incluent des arrière-plans, des bannières, du verre, des agrégateurs, des séparateurs, des ombres et des poignées.

Exemple avec plusieurs types d’éléments graphiques.

Les éléments graphiques ne sont généralement pas interactifs. Toutefois, les séparateurs sont interactifs pour le contenu redimensionnable et les handles sont des graphiques qui montrent l’interactivité.

Remarque : Instructions relatives aux zones de groupe , animations, icôneset de personnalisation sont présentées dans des articles distincts.

Est-ce l’interface utilisateur appropriée ?

Bien que les éléments graphiques soient un moyen visuel fort d’indiquer des relations, les surutiliser ajoute un encombrement visuel et réduit l’espace disponible sur une surface. Ils doivent être utilisés avec parcimonie.

Une tendance de conception dans Microsoft Windows est une apparence plus simple et plus propre en éliminant les graphiques et lignes inutiles.

Pour déterminer si un élément graphique est nécessaire, tenez compte des questions suivantes :

• La présentation et la communication de la conception sont-elles aussi claires et efficaces sans l’élément ? Si c’est le cas, supprimez-le.
• Pouvez-vous communiquer efficacement les relations à l’aide de la disposition seule ? Dans ce cas, utilisez disposition à la place. Vous pouvez placer des contrôles connexes en regard des autres et placer un espacement supplémentaire entre des contrôles non liés. Vous pouvez également utiliser le retrait pour afficher les relations hiérarchiques.

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

• La communication est-elle efficace sans texte ? Si ce n’est pas le cas, utilisez une zone de groupe , un séparateur étiqueté ou un autre étiquette.

Modèles d’utilisation

Les éléments graphiques ont plusieurs modèles d’utilisation :

Élément	Description
illustrations graphiques permet de communiquer visuellement une idée.	Les illustrations graphiques sont similaires aux icônes, sauf qu’elles peuvent être n’importe quelle taille et ne sont généralement pas interactives. graphique d’historique de l’utilisation de l’uc Dans cet exemple, une illustration graphique est utilisée pour suggérer la nature d’une fonctionnalité.
arrière-plan utiliser pour mettre en évidence ou dé-souligner différents types de contenu.	Les arrière-plans peuvent être utilisés pour mettre en évidence du contenu important. dans cet exemple, un arrière-plan est utilisé pour mettre en évidence une tâche importante. Les arrière-plans peuvent également être utilisés pour mettre en évidence le contenu secondaire. capture d’écran Dans cet exemple, les tâches secondaires sont déconseillées en les localisant dans un volet Office.
bannières utilisé pour indiquer un état important.	Contrairement aux arrière-plans, les bannières mettent principalement en évidence une seule chaîne de texte. Dans cet exemple, une bannière est utilisée pour indiquer que les paramètres de la page sont contrôlés par la stratégie de groupe.
verre utilisez stratégiquement pour réduire le poids visuel d’une fenêtre.	Le verre peut réduire le poids d’une surface en se concentrant sur le contenu au lieu de la fenêtre elle-même. Dans cet exemple, le verre concentre l’attention de l’utilisateur sur le contenu au lieu des contrôles.
aggregators permet de créer une relation visuelle entre des contrôles fortement liés.	dans cet exemple, un arrière-plan d’agrégation est utilisé pour mettre en évidence la relation entre les boutons précédent et avant dans l’Explorateur. capture d’écran Dans cet exemple, un agrégateur de limites est utilisé pour mettre l’accent sur la relation entre les contrôles et les faire sentir comme un seul contrôle au lieu de huit.
séparateurs permet de séparer les contrôles faiblement liés ou non liés.	Les séparateurs peuvent être interactifs ou non interactifs. les séparateurs interactifs entre le contenu redimensionnable sont appelés séparateurs. dans cet exemple, un séparateur interactif est utilisé pour le contenu redimensionnable. Dans cet exemple, le séparateur n’est pas interactif.
ombres permet de faire en sorte que le contenu se distingue visuellement par rapport à son arrière-plan.	Dans cet exemple, les ombres font ressortir l’œuvre d’art par rapport à l’arrière-plan.
Handles permet d’indiquer qu’un objet peut être déplacé ou redimensionné.	Les poignées sont toujours interactives et leur comportement est suggéré par le pointeur de la souris sur le pointage. Dans ces exemples, les handles indiquent qu’un objet peut être redimensionné.

Lignes directrices

Généralités

• Ne transmettez pas les informations essentielles par le biais d’éléments graphiques seuls. Cela présente des problèmes d’accessibilité pour les utilisateurs présentant des handicaps visuels ou des déficiences visuelles.

Conceptions graphiques

• Les graphismes sont les plus efficaces lorsqu’ils renforcent une idée simple unique. Les graphismes complexes qui nécessitent une pensée pour interpréter ne fonctionnent pas correctement. Les hiéroglyphes sont mieux laissés pour les dessins de grotte.

  Incorrect :

  graphique complexe

  Dans cet exemple, un graphique complexe de Windows XP tente inefficacement d’expliquer une décision de confiance complexe.

• N’utilisez pas de flèches, de chevrons, de cadres de bouton ou d’autres affordances associées à des contrôles interactifs. Cela invite les utilisateurs à interagir avec vos graphiques.

• Évitez les swaths de rouge pur, jaune et vert dans vos conceptions. Pour éviter toute confusion, réservez ces couleurs pour communiquer l’état. Si vous devez utiliser ces couleurs pour quelque chose d’autre que l’état, utilisez des tonalités muets au lieu de couleurs pures.

• Utilisez des conceptions culturellement neutres. Ce qui peut avoir une certaine signification dans un pays, une région ou une culture peut ne pas avoir la même signification dans un autre.

• Évitez d’utiliser des personnes, des visages, des sexes ou des parties de corps, ainsi que des symboles religieux, politiques et nationaux. Ces images peuvent ne pas être facilement traduites ou offensives.

• Lorsque vous devez représenter des personnes ou des utilisateurs, les représenter de manière générique ; éviter les représentations réalistes.

Arrière-plans et bannières

• Pour mettre en évidence le contenu, utilisez du texte foncé sur un arrière-plan clair. Le texte noir sur un arrière-plan gris clair ou jaune fonctionne bien.

  d’arrière-plan jaune

  Dans cet exemple, le lien obtient l’attention de l’utilisateur, car il se trouve sur un arrière-plan jaune.

• Pour mettre en évidence le contenu, utilisez du texte clair sur un arrière-plan sombre. Le texte blanc sur un arrière-plan gris ou bleu foncé fonctionne bien.

  

  Dans cet exemple, l’arrière-plan sombre met en évidence le contenu.

• Si un dégradé est utilisé, assurez-vous que la couleur du texte présente un bon contraste sur l’ensemble du dégradé.

• Utilisez toujours une icône de 16 x 16 pixels pour attirer l’attention sur la bannière. Les bannières sont trop faciles à ignorer sinon. Pour plus d’instructions et d’exemples, consultez icônes standard.

• Utilisez des arrière-plans et des bannières avec précaution. Bien que l’intention de l’arrière-plan ou de la bannière soit de mettre en évidence le contenu, les résultats sont souvent le contraire d’un phénomène connu sous le nom de « aveuglement des bannières ».

Verre

• Envisagez d’utiliser du verre de manière stratégique dans de petites régions touchant le cadre de fenêtre sans texte. Cela peut donner à un programme une apparence plus simple, plus légère et plus cohésive en faisant apparaître la région comme faisant partie du cadre.
• N’utilisez pas de verre dans les situations où un arrière-plan de fenêtre simple serait plus attrayant ou plus facile à utiliser.

Séparateurs

• Utilisez des lignes verticales et horizontales pour les séparateurs. Veillez à disposer d’un espace suffisant entre les séparateurs et le contenu séparé.
• Pour les séparateurs entre le contenu sizable (séparateurs), affichez le pointeur de redimensionnement au pointage.

Dans ces exemples, les pointeurs de redimensionnement sont affichés sur le pointage.

Ombre

• Utilisez uniquement pour faire en sorte que le contenu ou les objets les plus significatifs de votre programme soit déplacé visuellement en arrière-plan. Considérez les ombres comme un encombrement visuel dans d’autres circonstances.

Prise en charge élevée des ppp

• Prendre en charge les modes vidéo 96 et 120 points par pouce (ppp). Détectez le mode ppp au démarrage et gérez les événements de modification d’ppp. Windows est optimisé pour 96 et 120 ppp et utilise 96 ppp par défaut.
• Préférez fournir des bitmaps distinctes rendues spécifiquement pour 96 et 120 ppp par rapport à la mise à l’échelle des graphiques. Au moins, fournissez des versions de 96 et 120 ppp pour les bitmaps les plus importantes, visibles, ainsi que pour centrer ou mettre à l’échelle les autres. Ces applications sont considérées comme « prenant en charge les ppp élevés » et offrent une meilleure expérience visuelle globale que les programmes mis à l’échelle automatiquement par Windows.
  • Développeurs : vous pouvez déclarer un programme prenant en charge les ppp élevés (et empêcher la mise à l’échelle automatique) définissant l’indicateur de prise en charge des ppp dans le manifeste du programme, ou en appelant l’API SetProcessDPIAware() pendant l’initialisation du programme. Vous pouvez utiliser des macros pour simplifier la sélection des graphiques appropriés. Pour les bitmaps Win32, vous pouvez utiliser SS_CENTERIMAGE pour centrer ou SS_REALSIZECONTROL à mettre à l’échelle.
• Vérifiez votre programme à la fois dans 96 et 120 ppp :
  • Graphiques trop petits ou trop volumineux.
  • Graphiques clippés, superposés ou non correctement ajustés.
  • Graphiques mal étirés (« pixilatés »).
  • Texte clippé ou non adapté aux arrière-plans graphiques.

SMS

• Pour l’accessibilité et la localisation, n’utilisez pas de texte dans des graphiques. Ne faites que des exceptions pour représenter personnalisation et le texte sous la forme d’un concept abstrait.