web-dev-qa-db-fra.com

Existe-t-il une norme en ce qui concerne l'utilisation des icônes œil ouvert et œil fermé pour afficher / masquer quelque chose?

En règle générale, chaque fois que j'utilise une icône pour un lien, je pense que l'icône devrait représenter l'action réelle de cliquer sur ce lien. Par exemple. Pour modifier une publication, vous utilisez généralement une icône de crayon.

Cependant, je voudrais utiliser une icône pour afficher/masquer une section ou un mot de passe. L'icône que j'ai généralement vue pour ce type d'action est un œil ouvert et un œil fermé ou un œil avec une ligne à travers.

Conformément à la logique actuelle que j'ai supposée plus tôt, je suppose que l'icône appropriée à afficher pour un lien qui cache quelque chose serait l'œil fermé ou l'œil barré. Mais j'ai un petit débat avec certains développeurs et je l'ai également vu où l'icône opposée est utilisée et je suppose que la pensée est que l'icône représenterait alors l'état actuel de ce que vous cachez et montrez. Il me semble que l'œil fermé est la façon la plus courante de le faire car c'est aussi la façon dont il semble IE est-il intégré pour les mots de passe.

Mon point de vue est qu'il est similaire au modèle d'utilisation des icônes plus (+) et moins (-) lors de l'expansion et de la contraction et de l'accordéon. Vous voyez presque toujours l'icône plus utilisée lorsque le contenu est contracté et le moins lorsque le contenu est développé.

Existe-t-il donc une norme ici? Ou est-ce quelque peu subjectif? J'aimerais savoir si quelqu'un a fait une étude pour voir ce qui est plus intuitif pour les utilisateurs.

1
NerdCowboy

Il existe en fait une ligne de pensée logique, bien que tout le monde ne s'y conforme pas.

  • 1 bouton d'état (bouton d'action) - ceux-ci sont simples; l'icône représente action à effectuer lorsque l'on clique sur le bouton.
  • bouton 2 états (bouton bascule/icône bascule) - l'icône sur ceux-ci signifie état actuel. Ceci est facile à retenir à partir des boutons marche/arrêt sur les anciens systèmes Hi-Fi: lorsqu'il est enfoncé (haut), le système est éteint; lorsqu'il est enfoncé (bas), le système est allumé. Vous pouvez vérifier l'état du système en regardant le bouton - sa position indique l'état actuel du système.

En regardant mon écran en ce moment, il y a deux exemples du deuxième point - l'icône étoile de votre question n'est pas mise en évidence, ce qui signifie que je n'en ai pas fait un favori. De plus, le début de la barre d'adresse de Chrome n'est pas rempli, ce qui signifie que je n'ai pas mis cette question en signet.

L'exemple + et - que vous donnez avec des arbres est en effet le contraire de celui suggéré ici (ils montrent une action plutôt qu'un état), mais vous pouvez affirmer que l'état du nœud est déjà évident à partir de la vue d'arbre elle-même. Ce qui est encore plus déroutant, c'est que lorsque le triangle rectangle et le triangle bas sont utilisés à la place, leur logique est opposée aux + et - (ils montrent l'état plutôt que l'action)

Soit dit en passant, dans ce cas spécifique, considérez un œil ouvert pour le montré et un œil ouvert avec une ligne diagonale pour le caché.

1
Izhaki