À quoi devrait ressembler l'état de survol d'un bouton de contour?
Un ami et moi avons eu une discussion sur la conception des boutons et sommes tombés sur l'état de vol stationnaire des boutons de contour de Marvel.
Je crois que ce n'est pas la bonne approche car un bouton de contour est conçu de cette façon pour une raison. Lorsqu'un bouton de contour n'est plus un contour, je pense que les utilisateurs peuvent subir une perte de contexte.
En guise d'alternative, je choisirais un bouton de contour pour avoir une augmentation de la vibration des couleurs sur le contour en survol.
À votre avis, à quoi devrait ressembler l'état de survol d'un bouton de contour?
Je pense que c'est une question de choix. Vous pouvez vérifier comment les différents sites Stackexchange appliquent différents styles et survolent les interactions aux boutons de la barre supérieure.
Conception matérielle ne couvre pas ces boutons fantômes . Cependant, ils sont assez similaires aux boutons plats et vous pouvez peut-être suivre les conseils appliqués à ceux-ci. Pour ceux lorsque l'utilisateur survole le bouton, il est censé effectuer un changement subtil. Il ne fait que changer l'arrière-plan en une couleur plus foncée/différente mais la couleur de la police est maintenue la même .
J'ai vu des logiciels comme Photoshop appliquer le contour de couleur le plus important aux boutons en raison de l'importance d'un bouton spécifique parmi les autres, pas en survolant mais toujours (par exemple: Enregistrer, Annuler, Terminé; L'enregistrement a une couleur de bordure plus remarquable) .
comme un bouton de contour est conçu de cette façon pour une raison
Il est conçu de cette façon afin d'éviter d'attirer trop l'attention sur le bouton par rapport à d'autres commandes "plus fines". Avec un bouton rempli, les utilisateurs pourraient se laisser distraire en remarquant le bouton de manière préventive.
Dès que le bouton est en vol stationnaire, ce raisonnement ne s'applique plus, cependant:
- Soit, l'utilisateur plane intentionnellement. Ensuite, leur attention est déjà concentrée sur le bouton. À son tour, le bouton doit indiquer clairement qu'il est actif et un bouton (plutôt que, disons, une autre zone de texte).
- Ou, l'utilisateur a accidentellement déplacé le curseur sur le bouton en regardant ailleurs. Dans ce cas, attirer l'attention de l'utilisateur sur le bouton est justifié afin de les avertir de ne pas cliquer accidentellement maintenant, étant donné que le bouton pourrait provoquer une action (éventuellement destructrice!).
Conclusion: La conception avec l'état de vol stationnaire rempli est bonne.
Le problème n'est pas que le bouton est rempli lorsque vous le survolez, mais le bouton est un mélange entre le contour et le bouton 3D. En effet, vous pouvez voir l'effet de bordure ci-dessous au survol et au-dessus au clic, c'est pourquoi vous perdez le contexte. Mais le bouton de contour doit ressembler à un bouton, un élément cliquable, vous devez donc faire plus qu'un simple surlignage de bordure comme le remplir de couleur unie (de préférence la même couleur que la bordure). Voici un article intéressant pour en savoir plus sur l'expérience utilisateur sur les boutons: https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6