icônes en couleur vs icônes grisées dans les menus
Les icônes dans les menus sont souvent en couleur. Même si la page qu'une icône/élément de menu contrôle n'est pas active, l'icône apparaît toujours dans ses teintes normales. Pour distinguer l'icône qui est active, un concepteur changera souvent la couleur d'arrière-plan entourant l'icône. À titre d'exemples, considérons la barre d'outils de développeur Google Chrome ...
Mais un autre ensemble de techniques peut être employé. Une option consiste à avoir une version délavée des icônes qui ne sont pas actives, de sorte que la barre d'outils du développeur Chrome Chrome deviendrait:
Ou considérez l'écran WordPress Admin dashboard, où seule l'icône active a une couleur. 
Mes questions):
- quelle option trouvez-vous préférable?
- Est-ce trop distrayant d'avoir toutes vos icônes de menu en couleur, même lorsqu'elles ne sont pas actives?
- Ce niveau de distraction (possible) devrait-il être quelque chose que vous devez peser lorsque vous considérez les autres éléments de la page qui sont plus importants?
- Y a-t-il eu des études d'utilisabilité dans ce domaine?
Si votre réaction est que les icônes grisées indiquent "désactivé", alors une question de suivi serait: si toutes les icônes sont dans une version grisée (ala Google Analytics), trouvez-vous cela préférable aux icônes en couleur?
Question intéressante et quelques points:
- parfois grisé est utilisé du point de vue de la sécurité/des autorisations pour signifier - "ne peut pas y toucher"
- dans votre exemple principal, il y a toujours une "dépression" et une démarcation des
Personnellement, je n'ai pas de préférence marquée, mais mon inclination est de montrer une taille/un marquage différent pour montrer actif plutôt que de grisonner non actif.
J'ai fait une toute petite étude sur cette dernière année, rien de bien solide. J'ai donné deux versions des mêmes captures d'écran aux utilisateurs, une avec des icônes colorées et une avec des grisées (c'était une application de gestion de base de données). J'ai demandé à 200 d'entre eux lequel ils préféraient et pourquoi.
- 80% des utilisateurs ont préféré la version colorée, le sentiment général étant qu'ils fournissent un repère visuel qui aide à trouver des actions.
- 20% ont préféré grisé, et ils ont dit que l'interface était plus lisible de cette façon (étiquettes d'icônes, etc.).
J'ai donc trouvé une règle personnelle selon laquelle les menus système devraient avoir des icônes grisées et tout le reste en couleur, mais c'est ma règle de base. Je suppose que cela dépend de l'application.
Les icônes blanchies à la chaux peuvent être clairement distinctes des icônes désactivées (par exemple: dans le contraste disponible, avec le sens de contraste complet activé, ou les icônes désactivées adoptant un aspect en relief/intégré comme le fait la police.)
Il y a quelques éléments à considérer. D'une part: les éléments affichés à la fois dans l'interface wordpress et google) ne sont pas des boutons pour représenter des actions. Ils représentent davantage des vues/écrans. C'est ce qui rend nécessaire de distinguer entre actif et non actif en premier lieu (les boutons représentant des actions n'ont qu'à répondre au clic, mais une fois le clic enregistré, le bouton 'rebondit' à son état d'origine enfoncé.)
En outre, il y a généralement plus de vues que d'actions, ce qui signifie que la couleur peut devenir plus encombrante. Bien que je n'ai pas d'études pour étayer ma demande, je pense que plus de couleurs sont nécessaires lorsque les icônes sont plus petites (pour compenser moins de distinction de forme), et les utilisateurs à basse fréquence bénéficient davantage de couleurs distinctes lumineuses repérées en un coup d'œil, tandis que les utilisateurs avancés sont plus habitués à la position des boutons (et du texte) comme moyen de déchiffrer l'interface. Ces utilisateurs plus avancés bénéficient de moins de couleurs, car cela rend l'interface plus calme et permet également à la couleur d'indiquer d'autres éléments sur la page (comme le codage couleur du code source ou la colorisation de l'icône réseau en cas d'erreur).
Je pense que l'utilisation d'icônes en niveaux de gris peut être utilisée correctement sans perte de sens si vous ne les grisez pas réellement, mais laissez un contraste raisonnablement élevé. (En fait, dans notre application, de petites icônes aux couleurs vives sont utilisées comme boutons rapides pour quelques outils rapides et fréquemment utilisés, et la page de détails utilise une interface à onglets avec des icônes en niveaux de gris + du texte pour toutes les pages non actives.)
En comparant vos deux captures d'écran, il est beaucoup plus facile de reconnaître quel élément de menu est actuellement affiché lorsqu'il est le seul en couleur. De plus, les autres éléments de menu non actifs ne semblent pas suffisamment délavés pour que je puisse conclure qu'ils sont réellement désactivés. Ce que je veux dire, c'est que cet effet peut être davantage souligné au-delà de tout doute raisonnable.
Une autre chose à considérer est que même si un élément de menu semble être désactivé en raison de son apparence visuelle, il n'est pas rare que l'utilisateur vérifie cela en interagissant avec les éléments lorsqu'il est en train d'explorer l'interface. Autrement dit, ils apprendront que les éléments sont réellement activés. Ainsi, le gain immédiat à court terme en informant explicitement l'utilisateur que chaque élément est activé en utilisant la couleur pour tous ne vaut pas le gain à long terme car il est plus facile de toujours identifier où vous vous trouvez actuellement.
Je suis d'accord avec le consensus selon lequel les icônes grisées indiquent des fonctions verrouillées ou inaccessibles. @Ben Durnell souligne que cela fonctionne sur Wordpress à cause du texte bleu qui indique un hyperlien.
Cependant, je trouve définitivement les icônes en couleur distrayantes et je crois que la couleur est l'un des moyens les plus puissants pour attirer l'attention sur quelque chose. Comme il est utilisé dans l'exemple de Google, les couleurs semblent écrasantes. Je pense que les choix de couleurs des icônes doivent absolument être pris en compte et mis en balance avec les éléments de la page.
Personnellement, j'expérimenterais quelque chose au milieu. Utilisez la couleur sur toutes les icônes, mais limitez la palette de couleurs et essayez de "délaver" les couleurs des icônes inactives en diminuant leur opacité.
Lors de l'utilisation d'icônes de couleur, les icônes d'échelle de gris, même délavées, ont généralement indiqué des icônes désactivées. Personnellement, j'aurais supposé qu'ils étaient désactivés avant d'essayer de cliquer dessus. C'est un élément commun dans les interfaces utilisateur sous Windows et Mac OS X (et probablement aussi Linux).
L'arrière-plan du bouton enfoncé dans la capture d'écran supérieure est plus que suffisant pour indiquer l'écran actif actuel.