Quel est le raisonnement derrière les icônes en niveaux de gris?
Un certain nombre d'applications Web ont commencé à utiliser des icônes d'échelle de gris (noir), par exemple Github, le nouveau Google Analytics, etc. Même des applications comme Firefox 4, Chrome, IE9, iTunes, Mac OS ont abandonné des icônes colorées.
Quel est le raisonnement derrière le passage des icônes colorées aux icônes en niveaux de gris/monochromes?
Exemples:
- Icône Paramètres Google Analytics
- Github (regardez les boutons d'icônes en haut à droite)
- iTunes 1 est passé aux icônes monochromes
Mise à jour: il semble Apple l'a d'abord introduit dans Aqua sous Conception d'icônes pour les contrôles de barre d'outils de style rectangulaire :
Les icônes qui semblent bonnes dans les commandes de la barre d'outils de style rectangulaire sont des images noires simplifiées qui transmettent du sens à travers le contour et le contour, et non les détails internes. Étant donné que vos icônes doivent faire écho à l'apparence des images Mac OS X existantes dans les contrôles de barre d'outils de style rectangulaire, utilisez les images de modèle fournies par le système comme guide. Lorsque vous concevez une icône pour un contrôle de barre d'outils de style rectangulaire, gardez à l'esprit les points suivants:
- Rendre le contour net et net
- Utilisez une perspective directe
- Utilisez du noir complet et quelques nuances de gris pour suggérer la dimensionnalité
- Utilisez l'anticrénelage
- Assurez-vous que l'image est visuellement centrée dans le contrôle (notez que visuellement centrée peut ne pas être la même que mathématiquement centrée)
Les icônes des contrôles de barre d'outils de style rectangulaire de taille normale ne doivent pas mesurer plus de 19 x 19 pixels.
Je crois que cette tendance est venue avec l'idée de la séparation du contenu et de la présentation. Les icônes font partie du chrome/ui et ne doivent pas être trop visibles pour ne pas rivaliser avec le contenu lui-même.
Une autre raison peut être qu'il est plus facile d'attirer l'attention sur un élément lorsqu'il est le seul à avoir une icône colorée, et tout le reste est en niveaux de gris. Par exemple, une icône de cadenas de connexion verte en combinaison avec des icônes de menu en niveaux de gris. Faire ressortir quelque chose dans un groupe d'éléments colorés demande beaucoup plus de compétence et de temps car vous devez penser à bien plus que de la couleur (qui ne joue plus le rôle principal pour attirer l'attention de l'utilisateur).
- Ils ont souvent une belle apparence, quelle que soit la disposition, vous pouvez donc les conserver si la disposition change.
- Vous pouvez combiner des icônes de différentes sources (The Noun Project, polices de symboles, icônes existantes utilisées sur des plateformes comme l'iPhone, etc.), car elles se ressemblent généralement.
- C'est facile de faire le vôtre.
Personnellement, je pense que c'est généralement une mauvaise tendance. Nos cerveaux traitent la couleur de manière prétensive (avant même de la voir consciemment); nous sommes vraiment bons dans des tâches comme "trouver l'icône rouge dans une liste d'icônes colorées". Nous ne sommes pas si bons dans une tâche comme "trouver l'icône qui ressemble à un petit camion dans une liste d'icônes noires". Rendre toutes les icônes de la même couleur rend votre produit plus difficile à utiliser.
Il y a des exceptions, bien sur. Vous ne voulez pas de couleurs criardes dans une application comme Photoshop, car elles peuvent influencer la façon dont vous voyez l'image sur laquelle vous essayez de travailler. Ils ne sont également pas nécessaires lorsque les utilisateurs identifient des icônes principalement en fonction de leur position (le bouton de retour est toujours à l'extrême gauche dans la barre de boutons d'un navigateur, par exemple).
Je pense que cette tendance a été stimulée par la sortie initiale de Google Chrome. Le nom "Chrome" est ironique car l'objectif de Google était d'utiliser moins chrome (tout sauf le contenu) que tous les autres navigateurs.
- Son onglet agirait comme le titre de la fenêtre
- Sa barre de menus a disparu
- Il combine la barre d'adresse avec la recherche
Google Chrome
Mozilla Firefox 3
Remarquez comment Google Chrome utilise beaucoup moins chrome que Firefox? Google en fait même un point clé :
Simplicité
La fenêtre du navigateur de Chrome est rationalisée, propre et simple.
Chrome comprend également des fonctionnalités conçues pour être efficaces et faciles à utiliser. Par exemple, vous pouvez rechercher et naviguer dans la même boîte et organiser les onglets comme vous le souhaitez - rapidement et facilement.
Google Chrome voulait que l'expérience de navigation se concentre sur le contenu du site Web, sans être distrait par le chrome. Il est évident que des boutons colorés et brillants dans le chrome détourner l'attention du contenu du site Web. En conséquence, Google Chrome a utilisé les boutons en niveaux de gris dès le départ. D'autres navigateurs jouent maintenant au rattrapage. Nous pouvons clairement voir que Firefox 4 et IE9 ont emprunté à Le principe de conception de Google de moins (couleur/substance) est plus.
IE9
Firefox 4
Veillez à ne pas appliquer ce principe de conception à d'autres domaines de la conception d'interface utilisateur. La couleur fonctionne bien dans les interfaces inconnues pour attirer l'attention sur les boutons sur lesquels les utilisateurs doivent cliquer. Étant donné que le concept de navigation Web est si courant et que les boutons sont plus ou moins dans la même position sur tous les navigateurs Web, les concepteurs de navigateur Web n'avaient pas besoin de réduire l'interface en ajoutant de la couleur.
Mon hypothèse: il faut moins de temps pour créer une bonne icône en noir et blanc qu'une icône en couleur qui fonctionne bien avec le thème environnant. Vous pouvez plus facilement recycler une icône en noir et blanc existante.
Mon intuition (ou peut-être une justification) s'apparente à de la camelote. Les sites Web se transforment en applications Web avec de nombreuses icônes contextuelles dispersées dans l'interface utilisateur. Pour ne pas rivaliser avec le contenu/les données réels, l'utilisation d'un ensemble d'icônes monotones peut les empêcher de coller comme des zits sur la page.
S'ils sont utilisés dans un but précis, la réponse est simple: si vous prêtez attention à tout sur la page, rien n'attire l'attention des utilisateurs.
J'aime la façon dont Windows 7 a adopté les couleurs en niveaux de gris pour les icônes système de la barre des tâches. Ils n'attirent pas votre attention sur eux. Lorsqu'une situation nécessite votre attention, les icônes ont une superposition jaune ou rouge selon la gravité du problème.
La même chose peut être dite à propos de la barre d'outils dans les fenêtres et le volet de détails de l'Explorateur Windows: ils attirent beaucoup moins l'attention mis en œuvre dans les couleurs grises contrairement à Vista où ces zones étaient beaucoup plus colorées. Également à IE 4/5 ère, les icônes de la barre d'outils étaient généralement grises et au survol de la souris, elles étaient affichées en couleur.
Ainsi, l'utilisation d'icônes en niveaux de gris permet aux utilisateurs de se concentrer sur le contenu avec lequel ils travaillent plutôt que sur les icônes colorées de l'interface utilisateur.