Icônes standard

Notes

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 recommandations actuelles en matière de conception.

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

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

Les icônes standard ont les significations suivantes :

• 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 qui peut provoquer un problème à l’avenir.
• Icône d’informations. L’interface utilisateur présente des informations utiles.
• Icône de point d’interrogation. L’interface utilisateur indique un point d’entrée d’aide.

Les icônes standard sont remarquables, car elles sont intégrées à de nombreuses api de programmation d’applications Windows, telles que des boîtes de dialogue de tâches, des boîtes de message, des bulles et desnotifications. Ils sont également couramment utilisés sur les messages sur place et les barres de status.

Note: Les instructions relatives aux icônes sont présentées dans un article distinct.

Principes de conception

Il existe plusieurs facteurs dans le choix de l’icône standard appropriée, ce qui explique en partie pourquoi ils sont si souvent utilisés incorrectement. 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 ».
• 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.
• Alarmer 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, ce qui fait qu’ils n’ont pas d’importance.

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

Type de message et gravité

Choisissez des icônes standard en fonction du type de message, et non de 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 de provoquer 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 « atténuer » les erreurs mineures. Ainsi, malgré leur différence de gravité, « Taille de police incorrecte » est une erreur, tandis que « La poursuite de cette opération mettra votre maison en feu » est un avertissement.

Détermination du type de message approprié

Certains problèmes peuvent être présentés sous la forme d’une erreur, d’un avertissement ou d’une information, en fonction de l’importance et de la formulation. Par exemple, supposons qu’une page Web ne puisse 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é. » (Il s’agit d’un 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é ? » Le fait de le faire à partir de sources non approuvées peut nuire à votre ordinateur. » (Les deux sont formulés comme des conditions susceptibles de provoquer des problèmes futurs.)
• Information. « Vous avez configuré Windows Internet Explorer pour bloquer les contrôles ActiveX non signés. » (Formulé comme une déclaration de fait.)

Pour déterminer le type de message approprié, concentrez-vous sur l’aspect le plus important du problème que les utilisateurs doivent connaître ou sur lequel ils doivent 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 main ou tout autre texte correspondant en fonction de ce focus, puis choisissez une icône (standard ou autre) qui correspond au texte. Le texte et les icônes de l’instruction main doivent toujours correspondre.

Gravité

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

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 une autre forme, telle que du texte ou du son.) Les utilisateurs doivent être en mesure de dire en un coup d’œil la nature de l’information et les conséquences de leur réponse. Nous devons donc différencier les erreurs critiques et les avertissements de leurs équivalents ordinaires. Les erreurs et avertissements critiques présentent les caractéristiques suivantes :

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

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

Tous les messages n’ont pas besoin d’une icône. Les icônes ne sont pas un moyen de décorer des 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 potentiellement irréversible.

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 des 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 de l’utilisateur 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 des problèmes d’entrée utilisateur.

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

Éviter les surajouts

Nous avons déjoué les programmes Windows. Le programme Windows classique a des icônes d’avertissement apparemment partout, mettant en garde sur des choses qui ont peu de signification. Dans certains programmes, presque chaque question est présentée comme un avertissement. L’utilisation excessive d’un programme donne l’impression d’être une activité dangereuse, et elle diminue les problèmes vraiment importants.

Le seul risque de perte de données est insuffisant pour appeler une icône d’avertissement. En outre, tous les résultats indésirables doivent être inattendus ou involontaires et ne pas être facilement corrigés. Sinon, à peu près toute question mal répondue pourrait être interprétée comme pouvant entraîner une perte de données d’une sorte et mériter une icône d’avertissement.

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

• Assurez-vous que le problème justifie une attention accrue de l’utilisateur. Les confirmations et questions de routine ne doivent pas comporter 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’examiner 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 actions importantes à faire ou une décision à prendre? Les avertissements sans actions rendent simplement 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) ?

Context

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

• Alors 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 la pertinence de l’icône standard

Lorsque vous évaluez le texte de votre interface utilisateur, lisez également les icônes standard. Lisez les icônes d’erreur comme « erreur ! », les icônes d’avertissement comme « avertissement, soyez très prudent ici ! » et les icônes d’information comme « attention ! ». Ensuite, continuez à lire le contexte restant, tel que l’instruction main, 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.

Consignes

Note: Pour les instructions suivantes, « sur place » signifie sur n’importe quelle surface de fenêtre normale, par exemple 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éral

• Choisissez les icônes standard en fonction de leur type de message, et non de la gravité du problème sous-jacent :
  • Erreur. Erreur ou problème qui s’est produit.
  • Avertissement. Condition qui peut causer 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 main ou à tout autre texte correspondant.

Correct :

Incorrect :

Dans l’exemple incorrect, l’icône d’avertissement standard ne correspond pas à l’instruction main (qui génère une erreur).

Taille d'icône

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

  Context	Quand l’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 toutes les autres.
  Notifications	Utilisez des icônes de 16 x 16 pixels.
  Bulles	Utilisez des icônes de 16 x 16 pixels.
  Bannières	Utilisez des icônes de 16 x 16 pixels.

Icônes d’erreur

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

  Context	Quand l’utiliser
  Boîtes de dialogue	Utilisez uniquement pour les erreurs critiques. (n’utilisez pas d’icônes standard pour les erreurs non critiques.)
  Erreurs sur place	Utilisez pour toutes les erreurs.
  Notifications	Utilisez uniquement pour les erreurs critiques. (pour les échecs d’action.)
  Bulles	Ne pas utiliser. 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	Ne pas utiliser. 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 sinon, 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

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

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

• N’utilisez pas d’icônes d’avertissement pour « atténuer » les erreurs non critiques. Les erreurs ne sont pas des avertissements. Appliquez plutôt les instructions relatives aux icônes d’erreur.

• Pour les boîtes de dialogue 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 de routine.

Correct :

Incorrect :

Dans l’exemple incorrect, une icône d’avertissement est incorrectement utilisée 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 avertir 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

• Utilisez les icônes d’informations uniquement lorsque le contexte ne présente pas manifestement d’informations :

  Context	Quand l’utiliser
  Boîtes de dialogue	Ne pas utiliser.
  Sur place	Ne pas utiliser. Utilisez plutôt du texte statique brut ou une bannière.
  Notifications	Ne pas utiliser.
  Bulles	Ne pas utiliser.
  Bannières	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 pour qu’ils fournissent des informations aux utilisateurs.

• 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 il va sans dire qu’il s’agit d’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 relatives au point d’entrée de l’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, il suffit de présenter une instruction main 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.