web-dev-qa-db-fra.com

Style de survol pour les éléments non cliquables?

Dans notre système, nous avons actuellement un bon style et des effets pour les boutons, par exemple le bouton soumettre, le bouton annuler, etc.

enter image description here

Maintenant, nous avons un élément différent. Disons que c'est un élément de balise de résumé. Qui agit comme le détenteur d'informations récapitulatives d'un tableau.

Mais, en survol, il affiche une liste déroulante/info-bulle avec plus d'informations. C'est tout, pas de fantaisie. VEUILLEZ NOTER QUE L'ÉTIQUETTE IS NON CLICABLE ET NE MENEZ PAS PARTOUT

Nous avons donc ici 2 options.

1. Avec vol stationnaire ayant un style ou un effet fané. Mais mon dilemme ici est que l'utilisateur ne sentirait-il pas qu'il est cliquable?

enter image description here

2. Sans style en vol stationnaire.

enter image description here

Selon vous, quelle est la meilleure option ici? Y a-t-il une solution meilleure/standard ici?

2
Kishan

Je crois que vous le savez déjà, mais l'élément pourrait simplement ressembler à un bouton s'il s'agit d'un bouton et ce n'est pas le cas.

Je voudrais voir plus que les boutons, je voudrais voir où et dans quelle situation vous implémentez ces éléments. Il est difficile de vous donner une bonne réponse sans cela.

Sinon mon point de vue vous avez 2 alternatives:

  1. Rendez-les gris clair pour les boutons inactifs.
  2. Faites-leur des icônes d'informations comme les exemples ci-dessous. À propos de la convivialité des icônes, vous pouvez lire cet article .

Ma question pour vous: si vous faites ressembler les éléments à un bouton inactif, l'utilisateur passera la souris dessus? Ensuite, l'utilisateur lira vos informations de survol?

enter image description hereenter image description here

Vous devez prendre soin d'empêcher le bouton gris inactif de ressembler à un autre bouton (moins important) comme sur cette image:

enter image description here

2
Rafael Perozin

Comme d'autres l'ont dit, ce contrôle ressemble à un bouton, les utilisateurs s'attendent donc à cliquer dessus. L'ajout d'effets de survol ne fera que renforcer cette attente.

Dans tous les cas, je me méfierais d'utiliser hover pour exposer ces informations, pour plusieurs raisons:

  • Le survol n'est pas une chose sur les appareils tactiles, donc personne sur un téléphone, une tablette ou un ordinateur portable tactile ne pourra y accéder.
  • Il est impossible (ou du moins très difficile) de sélectionner/copier + coller ces informations.
  • Il est impossible de comparer les informations contenues dans deux de ces résumés.
  • Cela ajoute de la complexité car vous devez tenir compte de l'emplacement du contrôle à l'écran (afin que votre info-bulle ne s'étende pas hors de la vue).

Pour plus de simplicité, j'utiliserais probablement un contrôle de divulgation plus traditionnel, qui a une bascule pour développer/réduire. Si vous ne le pouvez pas (restrictions d'espace, etc.), j'ajouterais au moins un autre indicateur qui montre qu'il y a plus d'informations cachées - peut-être un flèche ou ..., et faites basculer les informations étendues en un clic (pour les "verrouiller" en place).

Compact disclosure control example

2
Beejamin

"Faded" suggère grisé/désactivé, donc est moins susceptible de suggérer une cliquabilité que "surligné", ce qui est ce que montrent vos boutons.

Cependant, le style de vol stationnaire peut être approprié pour attirer l'attention sur l'infobulle; définissant éventuellement la couleur d'arrière-plan ou la bordure de l'élément de résumé sélectionné de la même manière que l'info-bulle pour produire une connexion visuelle entre les deux.

N'utilisez pas le style identique pour les boutons et vos éléments de résumé, car cela peut créer la confusion que vous mentionnez.

1
Stobor