Un bouton devrait-il devenir plus clair ou plus foncé en vol stationnaire?
Nous avons une discussion au bureau pour savoir si un bouton doit devenir plus clair ou plus sombre lorsqu'un utilisateur passe dessus.
Voici quelques exemples sur le terrain:
Bouton "Acheter maintenant" d'Apple (le deuxième est en vol stationnaire, le troisième est enfoncé) - http://www.Apple.com/iphone/
Twitter Bootstrap - http://Twitter.github.com/bootstrap/
(Non sélectionné)
(Flotter)
Page d'accueil de Github - github.com
Le bouton de la page d'accueil de FogBugz passe du jaune au jaune légèrement plus clair. Les boutons d'Optimizely et de Visual Website Optimizer ne changent guère.
Le bouton "Acheter maintenant" d'Amazon ne fait rien lorsque vous passez la souris dessus (en plus de changer en curseur de pointeur). Les boutons colorés de la nouvelle interface de Google (voir Gmail ou Calendrier) s'assombrissent légèrement lorsque vous les survolez.
Enfin voici notre bouton:
Votre bouton devrait-il devenir plus clair ou plus foncé lorsque vous le survolez? Que devriez-vous considérer d'autre? Quelqu'un a-t-il des données pour savoir si l'effet de survol est important pour les conversions?
Il n'y a pas de modèle assez commun pour être considéré comme "normal" pour cela par la plupart des gens, donc peu importe ce que vous choisissez tant que cela a du sens pour votre application.
L'important n'est pas de savoir s'il devient plus sombre ou plus clair en vol stationnaire. C'est qu'il y a un changement. Quelqu'un qui utilise un site ne va pas dire "qui est devenu sombre en survol au lieu de la lumière, donc ça doit être autre chose".
Le changement est là simplement pour vous faire savoir qu'il est cliquable en plus de tout changement de curseur. Ce qui est exactement un changement, c'est plus une question de design ou d'esthétique qu'une question de convivialité.
Disons que vous avez le scénario le plus courant de texte sombre et qu'aucune autre partie de la conception ne change en survol et que c'est l'arrière-plan uniquement, puis lorsque vous survolez, le bouton doit être mis en surbrillance. Vous essayez de vous concentrer sur un élément - de l'examiner et il est donc logique de l'éclaircir comme si vous lui donniez plus de lumière pour le voir. Apparaître en contre-jour ou en contre-jour ne fait aucune différence.
Sauf ... cependant, ce n'est pas une règle écrite universelle - c'est juste logique - et courante.
La clé n'est pas vraiment la couleur, c'est le contraste .
Le principal résultat du scénario ci-dessus est que le bouton situé sous le survol est légèrement plus clairement identifié et que le chiffre contraste mieux avec le sol que ses voisins.
Donc, par exemple, par comparaison, regardez le scénario inverse, où vous avez texte clair, la même règle de base dirait que pour augmenter le contraste relatif entre la figure et le sol, l'arrière-plan devrait assombrir, pour augmenter le contraste relatif.
Par exemple, à Apple.com .
Ce n'est pas que Apple sont nécessairement le synonyme de 'correct'! - Par exemple - ces boutons de téléchargement n'ont pas n'importe quel effet avec hover ou appuyez sur!
La règle que vous suivez est simplement la suivante.
Lorsque vous survolez un élément, vous souhaitez le mettre en surbrillance (le faire `` apparaître '' comme diraient certains clients) par rapport aux autres éléments autour de vous.
Donc, lors du roulement ...
Lorsque le texte d'arrière-plan est BLANC , vous ASSOMBRIT le bouton pour souligner le contraste.
Lorsque le texte d'arrière-plan est NOIR , vous ÉCLAIRCIT le bouton pour accentuer le contraste.
Dans ton cas:
Un conseil supplémentaire, faites apparaître les ombres en dessous du texte, PAS au-dessus. Ce jeu avec l'ombre donnerait un look sinistre à vos créations. Une astuce de film courante, pour rendre identifiable un personnage diabolique, consiste à faire briller la source de lumière de SOUS .
Cela dépend de la couleur d'arrière-plan, n'est-ce pas? Un bouton devient de préférence "plus visible" par rapport aux autres éléments de l'interface utilisateur lorsque l'utilisateur final survole, donc dans un design sombre, ils deviendraient plus lumineux et vice versa. (Remarque: j'ai dit "plus lumineux", pas "moins opaque" :))
Prenant les exemples de Conception matérielle - boutons mon impression est que les boutons deviennent plus sombres s'ils sont clairs et plus clairs s'ils sont sombres :
- Boutons plats
- Boutons surélevés: le bouton devient un peu plus sombre, mais la principale différence est que l'ombre donne l'impression qu'elle se soulève.
Quelque chose que j'ai remarqué à travers le guide, mais je ne sais pas si cela est mentionné, c'est que les boutons conservent leur couleur de texte lorsqu'ils sont pressés ou survolés .
Je dirais que c'est un peu plus complexe que plus clair ou plus foncé. Vous voulez le faire ressortir des autres boutons, et si moins blanc fait cela, alors ça va. Je dis moins blanc parce que c'est différent de plus noir (imaginez que vous mélangez de la peinture à partir de ces grandes bouteilles que vous aviez l'habitude d'aller à l'école). Plus de noir peut donner l'impression que le bouton est dans l'ombre, ce qui peut le rendre déprimé. Rendre les boutons déprimés devrait être réservé à l'OMI avec la souris enfoncée. Ne le faites pas pour planer.
Nous pouvons traduire les termes légèrement subjectifs moins blanc et plus noir en descriptions techniques des couleurs. Si la luminosité (en HSL) est inférieure à 50%, moins de blanc et plus de noir sont essentiellement la même chose (réduisant la luminosité), et ce sera à vous de déterminer si cela donne l'apparence du bouton enfoncé. Si la luminosité est supérieure à 50%, la réduction de la luminosité est moins blanche, mais si vous réduisez la saturation même légèrement, cela donnera l'apparence de plus de noir.
Bien sûr, il y aura des occasions où plus de noir ne rendra pas le bouton déprimé, mais c'est une bonne règle générale, d'autant plus que la plupart de vos exemples donnent l'impression d'être en 3D.
L'état de vol stationnaire doit être plus brillant que celui par défaut. Vous pouvez le mettre en surbrillance avec une échelle de couleurs différente pour le texte ou l'arrière-plan ou avec l'ombre ou la lumière.
L'exemple le plus simple: les liens textuels sont généralement en bleu sans soulignement, en survol il devient souligné.
je pense que cela dépend de l'arrière-plan. si l'arrière-plan est blanc, il est nettement plus clair en vol stationnaire!
Une interaction comme celle-ci ne doit pas être considérée isolément. Il y a de fortes chances que l'effet souhaité soit déjà apparu dans une discussion:
... et lorsque vous survolerez le bouton, ce sera en surbrillance ...
Plus clair/plus foncé ne sont pas non plus vos seules options - dans de nombreux cas, je trouve approprié d'avoir les boutons plus saturés en vol stationnaire (ce qui est un choix facile - si c'est interactif, vous savez pas de - sature le bouton!)
Cela fonctionnerait bien pour votre scénario (c'est-à-dire brillant en vol stationnaire), mais vous pouvez également régler l'autre état rendu. Il est si pâle qu'il a presque l'air désactivé!
Y a-t-il d'autres boutons/liens sur votre site/application? Et comment est votre traitement UI pour le vol stationnaire ou onClick? Les éléments clés à considérer sont la cohérence et la pertinence.
La cohérence est quelque chose qui n'a pas besoin d'être expliqué, tant que vous comprenez comment afficher des modèles de conception d'interface utilisateur similaires sur tout le site.
La pertinence consiste simplement à réfléchir à la force de l'appel à l'action que vous souhaitez que ce bouton "Connecter" soit? Avez-vous peur que l'utilisateur ne comprenne pas qu'il s'agit d'un bouton actionnable, ou y a-t-il des raisons spécifiques pour lesquelles vous souhaitez que le bouton soit activé? Je pense que ce que j'essaie de comprendre, c'est si vous concevez le bouton pour qu'il se démarque du reste des éléments du site, pourquoi est-il nécessaire de changer la couleur du plus clair au plus foncé ou vice versa en premier lieu?
Je pense que cela dépend aussi du fond. Une couleur plus claire sur un fond plus sombre et vice versa, puis lorsque quelqu'un passe la souris dessus, il doit l'avoir déjà vue afin que vous puissiez l'éclaircir s'il faisait sombre ou l'assombrir lorsqu'il était clair.
C'est du moins ce que je trouverais logique de faire avec les boutons. C'est si c'est un bouton que vous voulez vraiment attirer l'attention. Sinon, je choisirais plus lumineux et non plus léger en vol stationnaire parce que c'est ce à quoi je suis habitué de travailler sur un ordinateur Windows.