Le gris représente-t-il toujours une condition désactivée?
Récemment, j'ai mis à jour le style de notre module d'administration d'une application Web. Les boutons ont été repensés et de nouvelles couleurs ont été introduites pour différents états.
Dans diverses sections, j'ai la petite icône de point d'interrogation, qui affiche les informations (sur la terminologie ou l'aide) sur le survol.
Maintenant, la couleur de cette icône est grise. Je l'ai gardé délibérément pour ne pas le rendre plus visible, un peu tamisé. 
L'argument que je reçois de certaines personnes de mon équipe est que lorsque l'icône d'aide est vue en présence de boutons "désactivés", cela donne l'impression que "l'icône d'aide" est également désactivée.
Je veux juste avoir votre avis si c'est vrai. Tes opinions. Dois-je envisager de changer la couleur de l'icône juste pour cette raison. Si non, quelles sont les raisons que je peux éventuellement donner pour faire comprendre à mes collègues.
Ma réponse courte est non. Le gris ne représente pas toujours une condition désactivée. Je pense que cela dépend de l'utilisation, du contexte et de la palette de couleurs de votre application.
Prenons les popups d'inscription par e-mail comme premier exemple. Vous atterrissez sur un site Web d'actualités et immédiatement après le chargement de la page, vous obtenez une fenêtre contextuelle avec quelques entrées et généralement deux boutons, Annuler et S'inscrire. Le bouton d'inscription est vert vif hurlant sur toute la page. L'annulation est généralement grise, quelque peu décolorée ou même pas du tout représentée comme un bouton. Il faut du temps aux utilisateurs pour le trouver, mais ils savent toujours que le bouton est actif (ou du moins ils essaient de cliquer dessus).
Un autre bon exemple est une application iOS. Le HIG d'Apple suggère que tous les boutons/étiquettes/icônes cliquables ou plutôt utilisables devraient partager la même couleur. C'est suffisant. Les utilisateurs y sont habitués. C'est un modèle bien établi. Donc, si vous avez une application qui utilise la couleur bleue pour les boutons, les utilisateurs s'attendent à ce que tout ce qui est cliquable soit bleu. Ainsi, la présentation d'un autre élément cliquable en gris amènera les utilisateurs à penser qu'en effet le bouton est désactivé.
Dans votre cas Je voudrais y associer des analyses et voir comment elles fonctionnent. Si vous trouvez que vos utilisateurs n'utilisent pas le bouton, votre application pourrait être bien conçue :] Ou vous pouvez essayer de changer la couleur comme dans l'image ci-dessous. La couleur bleue suggère que le bouton est toujours cliquable, mais l'icône de contour ne prend pas beaucoup de focus (ce que vous voulez d'un bouton d'aide).
Le gris est une convention, pas une règle
Il aide à comprendre pourquoi gris est utilisé pour les boutons désactivés:
- Le gris est une couleur neutre, il est donc bon pour communiquer des éléments subtils ou sans accent.
- Les boutons désactivés (car ils ne sont pas cliquables) sont généralement communiqués à l'utilisateur via la désaccentuation. Le message visuel est:
- "Je suis un bouton (regardez ma forme) mais je ne peux pas être cliqué (je suis visuellement désaccentué)
La désaccentuation visuelle peut être effectuée de différentes manières:
- Réduire le contraste entre le bouton et la page (c'est-à-dire l'arrière-plan subtil)
- Réduire le contraste entre la police et le bouton (c.-à-d. Police subtile)
- tilisez l'italique ou une police plus fine par rapport aux autres boutons (c'est-à-dire une police subtile)
- Supprimer l'ombre ou le gaufrage par rapport aux autres boutons (c'est-à-dire supprimer le repère interactif)
Une fois que vous comprenez la logique de conception ci-dessus, vous pouvez la suivre pour créer toutes sortes de boutons désactivés qui peuvent communiquer efficacement. Quelques exemples:
Vous voudrez peut-être jeter un œil à une question UXSE connexe . Il est correct d'utiliser le gris pour les choses non désactivées, à condition qu'il n'y ait pas de conflit sur la page.
Actuellement, votre couleur grise est surchargée par deux significations. Sur les boutons, il agit comme un état désactivé, sur l'icône n'est pas le cas. Cela réduit l'abordabilité et les utilisateurs le désapprouveraient certainement.
Les meilleures réponses dans les questions liées devraient vous donner plus d'informations sur la façon de résoudre ce problème.
Rien ne représente toujours rien ... homme.
Mais sérieusement, ces boutons semblent désactivés. Ne perdez pas votre temps à exécuter un test, utilisez simplement une autre couleur. Les boutons blancs avec un contour bleu auraient probablement fière allure.
Je suis d'accord avec les points ci-dessus. L'association visuelle d'un bouton désactivé dépend du contexte des autres boutons et du style. De la même manière que rouge et vert ne signifient pas toujours négatif et positif, le gris peut signifier tout ce que vous lui donnez à condition qu'il y ait suffisamment de contexte pour qu'un utilisateur comprenne à quoi ressemble l'actif.