Icônes standard

Note

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des conseils s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas nos conseils de conception actuels.

Les icônes standard sont les icônes d’erreur, d’avertissement, d’informations et de point d’interrogation qui font partie de Windows.

capture d’écran

Icônes d’erreur, d’avertissement, d’informations et de point d’interrogation standard.

Les icônes standard ont ces significations :

• Icône d’erreur. L’interface utilisateur présente une erreur ou un problème qui s’est produit.
• Icône d’avertissement. L’interface utilisateur présente une condition susceptible de provoquer un problème à l’avenir.
• Icône d’informations. L’interface utilisateur présente des informations utiles.
• Icône point d’interrogation. L’interface utilisateur indique un point d’entrée d’aide.

Les icônes standard sont notables, car elles sont intégrées à de nombreuses interfaces de programmation d’applications Windows, telles que dialogues de tâche, boîtes de message, bulleset notifications. Ils sont également couramment utilisés sur messages sur place et barres d’état.

Remarque : Instructions relatives aux icônes sont présentées dans un article distinct.

Concepts de conception

Il existe plusieurs facteurs dans le choix de l’icône standard appropriée qui explique en partie pourquoi ils sont si souvent utilisés de manière incorrecte. Les erreurs les plus courantes sont les suivantes :

• Utilisation d’une icône d’avertissement pour les erreurs mineures. Les avertissements ne sont pas des erreurs « adoucies ».
• L’utilisation d’une icône standard lorsqu’il est préférable d’utiliser aucune icône du tout. Tous les messages n’ont pas besoin d’une icône.
• Alarmant les utilisateurs en donnant des avertissements pour des problèmes mineurs ou en présentant des questions de routine en tant qu’avertissements. Cela rend les programmes susceptibles d’être exposés à des risques et de nuire à des problèmes vraiment importants.

Le reste de cette section explique comment réfléchir aux icônes standard afin d’éviter ces erreurs courantes.

Type de message et gravité

Choisissez des icônes standard basées sur le type de message, et non sur la gravité du problème sous-jacent. Les types de messages sont les suivants :

• Erreur. Erreur ou problème qui s’est produit.
• Avertissement. Condition susceptible d’entraîner un problème à l’avenir.
• Information. Informations utiles.

Par conséquent, un message d’erreur peut prendre une icône d’erreur, mais jamais une icône d’avertissement. N’utilisez pas d’icônes d’avertissement pour « adoucir » les erreurs mineures. Ainsi, malgré leur différence de gravité, « Taille de police incorrecte » est une erreur, tandis que « Continuer avec cette opération va mettre votre maison en feu » est un avertissement.

Détermination du type de message approprié

Certains problèmes peuvent être présentés comme une erreur, un avertissement ou des informations, en fonction de l’accentuation et de la formulation. Par exemple, supposons qu’une page Web ne peut pas charger un contrôle ActiveX non signé en fonction de la configuration actuelle de Windows Internet Explorer :

• Erreur. « Cette page ne peut pas charger un contrôle ActiveX non signé ». (Phrased en tant que problème existant.)
• Avertissement. « Cette page peut ne pas se comporter comme prévu, car Windows Internet Explorer n’est pas configuré pour charger des contrôles ActiveX non signés » ou « Autoriser cette page à installer un contrôle ActiveX non signé ? » Cela peut endommager votre ordinateur à partir de sources non approuvées. (Les deux expressions sont des conditions susceptibles d’entraîner des problèmes futurs.)
• Information. « Vous avez configuré Windows Internet Explorer pour bloquer les contrôles ActiveX non signés. » (Expression sous la forme d’une déclaration de fait.)

Pour déterminer le type de message approprié, concentrez-vous sur l’aspect le plus important du problème sur lequel les utilisateurs doivent savoir ou agir. En règle générale, si un problème empêche l’utilisateur de continuer, il est présenté comme une erreur ; si l’utilisateur peut continuer, il s’agit d’un avertissement. Créez l'instruction principale ou d’autres textes correspondants en fonction de ce focus, puis choisissez une icône (standard ou autre) qui correspond au texte. Le texte et les icônes d’instruction principaux doivent toujours correspondre.

Sévérité

Bien que la gravité ne soit pas prise en compte lors du choix entre les icônes d’erreur, d’avertissement et d’informations, gravité est un facteur déterminant si une icône standard doit être utilisée du tout.

Les icônes fonctionnent mieux lorsqu’elles sont utilisées pour communiquer visuellement. (Notez que pour des raisons d’accessibilité, cette communication visuelle doit toujours être redondante avec un autre formulaire, tel que du texte ou du son.) Les utilisateurs doivent pouvoir donner un coup d’œil à la nature des informations et aux conséquences de leur réponse. Nous devons donc différencier les erreurs critiques et les avertissements de leurs équivalents ordinaires. Les erreurs critiques et les avertissements présentent ces caractéristiques :

• Ils impliquent une perte potentielle d’un ou plusieurs des éléments suivants :
  • Un actif précieux, tel que la perte de données ou la perte financière.
  • Accès ou intégrité du système.
  • Confidentialité ou contrôle des informations confidentielles.
  • Temps de l’utilisateur (une quantité importante, par exemple 30 secondes ou plus).
• Ils ont des conséquences inattendues ou inattendues.
• Ils nécessitent une gestion correcte maintenant, car les erreurs ne peuvent pas être facilement corrigées et peuvent même être irréversibles.

Pour distinguer les erreurs non critiques et les avertissements des messages critiques, les messages non critiques sont généralement affichés sans icône. Cela attire l’attention sur les messages critiques, rend les messages critiques et non critiques visuellement distincts et est cohérent avec le ton Windows.

Tous les messages n’ont pas besoin d’une icône. Les icônes ne permettent pas de décorer les messages.

Voici un bon exemple d’avertissement critique, car il répond aux caractéristiques définies précédemment.

Dans cet exemple, un avertissement critique avertit les utilisateurs d’une perte de données irréversible potentielle.

Toutefois, l’exemple suivant n’est pas critique, car il est susceptible d’être intentionnel et ses résultats sont facilement annulés.

Incorrect :

Dans cet exemple, cette confirmation n’est pas critique, car elle est susceptible d’être intentionnelle et facilement annulée.

Dans une interface utilisateur classique, la plupart des erreurs concernent les erreurs d’entrée utilisateur. La plupart des erreurs d’entrée utilisateur ne sont pas critiques, car elles sont facilement corrigées et les utilisateurs doivent les corriger avant de continuer. En outre, attirer trop l’attention sur les erreurs mineures des utilisateurs est contraire au ton Windows. Par conséquent, les erreurs d’entrée utilisateur mineures sont généralement affichées sans icône d’erreur. Pour renforcer leur nature non critique, nous les appelons problèmes d’entrée utilisateur.

d’entrée correctes

Dans cet exemple, ce problème d’entrée utilisateur mineur n’est pas critique. Il n’a donc pas besoin d’une icône lorsqu’elle est présentée dans une boîte de dialogue.

Éviter la sur-guerre

Nous avons dépassé les programmes Windows. Le programme Windows classique a des icônes d’avertissement apparemment partout, avertissement sur les choses qui ont peu d’importance. Dans certains programmes, presque toutes les questions sont présentées comme un avertissement. La sur-guerre rend l’utilisation d’un programme comme une activité dangereuse, et elle a pour effet de nuire à des problèmes vraiment importants.

Le simple risque de perte de données seul est insuffisant pour appeler une icône d’avertissement. En outre, les résultats indésirables doivent être inattendus ou inattendus et ne sont pas facilement corrigés. Sinon, une question incorrecte peut être interprétée pour entraîner une perte de données d’un type quelconque et mériter une icône d’avertissement.

Pour concentrer les icônes d’avertissement sur des problèmes vraiment critiques :

• Assurez-vous que le problème justifie une attention accrue de l’utilisateur. confirmations de routine et les questions ne doivent pas avoir d’icônes d’avertissement.
• Les utilisateurs sont-ils susceptibles de se comporter différemment en raison de l’icône d’avertissement ? Les utilisateurs sont-ils susceptibles d’envisager la décision plus attentivement ?

Incorrect :

Dans cet exemple, les utilisateurs sont-ils susceptibles de répondre différemment à cette question en raison de l’icône d’avertissement ?

• Y a-t-il des mesures importantes à prendre ou à prendre des décisions ? Les avertissements sans actions font simplement sentir les utilisateurs paranoïaque.

Incorrect :

Pourquoi cette notification est-elle un avertissement ? Que sont censés faire les utilisateurs (en plus de s’inquiéter) ?

Contexte

Le contexte est également un facteur à prendre en compte lors de l’utilisation d’icônes standard, car le contexte lui-même communique des informations. Spécifiquement:

• Bien que les boîtes de dialogue (y compris les boîtes de dialogue de tâche et les boîtes de message) et les notifications n’ont pas besoin d’icônes pour les erreurs non critiques, les erreurs sur place ont toujours besoin d’icônes d’erreur. Sinon, ces commentaires non modals seraient trop faciles à ignorer.
• Les avertissements sur place ont toujours besoin d’icônes d’avertissement pour les distinguer du texte normal.
• Les boîtes de dialogue, les notifications et les bulles n’ont pas besoin d’icônes d’informations, car elles présentent clairement des informations. En revanche, les bannières ont besoin d’informations de 16 x 16 pixels ou d’autres icônes, car ces commentaires non modals seraient trop faciles à ignorer.

Étant donné que le contexte est un facteur important dans l’utilisation des icônes, les instructions d’icône standard de cet article sont données en termes de contexte.

Évaluation de l’exactitude de l’icône standard

Lorsque vous évaluez votre texte d’interface utilisateur, lisez également toutes les icônes standard. Lisez les icônes d’erreur en tant que « erreur ! », icônes d’avertissement comme « avertissement, soyez très prudent ici ! » et les icônes d’informations comme « attention ! ». Continuez ensuite à lire le contexte restant, tel que l’instruction principale, la zone de contenu et les boutons de validation. Assurez-vous que la signification et le ton de chaque icône standard correspondent à la signification et au ton de son contexte. Si ce n’est pas le cas, vous avez trouvé un problème.

Si vous ne faites qu’une seule chose...

Assurez-vous que la signification et le ton de chaque icône standard correspondent à la signification et au ton de son contexte. S’ils ne correspondent pas, modifiez ou supprimez l’icône.

Lignes directrices

Remarque : Pour les instructions suivantes, « sur place » signifie sur n’importe quelle surface de fenêtre normale, telle que dans la zone de contenu d’un Assistant, d’une feuille de propriétés ou d’une page d’élément du panneau de configuration.

Généralités

• Choisissez les icônes standard en fonction de leur type de message, et non la gravité du problème sous-jacent :
  • Erreur. Erreur ou problème qui s’est produit.
  • Avertissement. Condition susceptible d’entraîner un problème à l’avenir.
  • Information. Informations utiles.
• Si un problème chevauche différents types de messages, concentrez-vous sur l’aspect le plus important sur lequel les utilisateurs doivent agir.
• Les icônes doivent toujours correspondre à l’instruction principale ou à tout autre texte correspondant.

correct :

Incorrect :

Dans l’exemple incorrect, l’icône d’avertissement standard ne correspond pas à l’instruction principale (ce qui donne une erreur).

Taille de l’icône

• Choisir la taille d’icône standard en fonction du contexte :

  Contexte	Quand utiliser
  Boîtes de dialogue	Utilisez 32 x 32 pixels pour les icônes de zone de contenu ; 16 x 16 pixels pour les icônes de zone de note de bas de page.
  Sur place	Utilisez 32 x 32 pixels pour les pages d’erreur ; Icônes de 16 x 16 pixels pour tous les autres.
  Notifications	Utilisez des icônes de 16 x 16 pixels.
  Ballons	Utilisez des icônes de 16 x 16 pixels.
  Bannières	Utilisez des icônes de 16 x 16 pixels.

Icônes d’erreur

• Utiliser les icônes d’erreur uniquement lorsqu’une erreur ou un problème s’est produit :

  Contexte	Quand utiliser
  Boîtes de dialogue	Utiliser uniquement pour les erreurs critiques. (n’utilisez pas d’icônes standard pour les erreurs non critiques.) capture d’écran
  Erreurs sur place	Utilisez-la pour toutes les erreurs.
  Notifications	Utiliser uniquement pour les erreurs critiques. (pour les échecs d’action .)
  Ballons	N’utilisez pas. Les bulles ne doivent pas être utilisées pour les erreurs critiques, et elles n’ont pas besoin d’icônes d’erreur pour les erreurs non critiques.
  Bannières	N’utilisez pas. Les bannières ne doivent pas être utilisées pour les erreurs.

• En règle générale, les icônes d’erreur ne sont pas nécessaires pour les problèmes d’entrée utilisateur non critiques. Toutefois, les icônes sont nécessaires pour les erreurs sur place, car dans le cas contraire, ces commentaires contextuels seraient trop faciles à ignorer.

• Pour les boîtes de dialogue de tâche, n’utilisez pas d’icônes de note de bas de page d’erreur. Les icônes d’erreur doivent être présentées uniquement dans la zone de contenu.

Icônes d’avertissement

• Utiliser les icônes d’avertissement uniquement lorsqu’une condition peut provoquer un problème à l’avenir :

  Contexte	Quand utiliser
  Boîtes de dialogue	Utilisez-le pour tous les avertissements.
  Avertissements sur place	Permet d’identifier le texte en tant qu’avertissement.
  Notifications	Utilisez-le pour tous les avertissements. (pour les événements système non critiques .)
  Ballons	Utiliser pour conditions spéciales.
  Bannières	Utilisez cette option pour attirer l’attention sur la bannière.

• N’utilisez pas d’icônes d’avertissement pour « adoucir » les erreurs non critiques. Les erreurs ne sont pas des avertissements qui appliquent les instructions d’icône d’erreur à la place.

• Pour les dialogues de questions, utilisez des icônes d’avertissement uniquement pour les questions ayant des conséquences significatives. N’utilisez pas d’icônes d’avertissement pour les questions courantes.

correct :

Incorrect :

Dans l’exemple incorrect, une icône d’avertissement est utilisée de manière incorrecte pour une question de routine.

• Pour les boîtes de dialogue de tâche, vous pouvez utiliser une icône de note de bas de page d’avertissement pour alerter les utilisateurs des conséquences risquées. Toutefois, utilisez une icône d’avertissement dans la zone de contenu ou dans la zone de note de bas de page, mais pas les deux.

Dans cet exemple, un bouclier de sécurité jaune est utilisé dans une note de bas de page.

Icônes d’informations

• Utiliser des icônes d’informations uniquement lorsque le contexte ne présente pas évidemment des informations :

  Contexte	Quand utiliser
  Boîtes de dialogue	N’utilisez pas.
  Sur place	N’utilisez pas. Utilisez plutôt du texte statique brut ou une bannière.
  Notifications	N’utilisez pas.
  Ballons	N’utilisez pas.
  Bannières	utiliser pour attirer l’attention sur la bannière.

• Les icônes d’informations ne sont pas nécessaires dans les boîtes de dialogue, les notifications et les bulles, car leur contexte communique suffisamment qu’ils fournissent aux utilisateurs des informations.

• Pour les boîtes de dialogue de tâche, n’utilisez pas d’icônes de note de bas de page d’informations. Les notes de bas de page sont suffisamment visibles et cela va sans dire qu’elles sont des informations.

Icônes de point d’interrogation

• Utilisez l’icône de point d’interrogation uniquement pour les points d’entrée d’aide. Pour plus d’informations, consultez les instructions point d’entrée d’aide.
• N’utilisez pas l’icône de point d’interrogation pour poser des questions. Là encore, utilisez l’icône de point d’interrogation uniquement pour les points d’entrée d’aide. Il n’est pas nécessaire de poser des questions à l’aide de l’icône de point d’interrogation de toute façon, il suffit de présenter une instruction principale en tant que question.
• Ne remplacez pas régulièrement les icônes de point d’interrogation par des icônes d’avertissement. Remplacez une icône de point d’interrogation par une icône d’avertissement uniquement si la question a des conséquences significatives. Sinon, n’utilisez aucune icône.