Étoiles multicolores ou monochromes
Je développe une application Web qui utilise essentiellement les couleurs 2(3):
- Magenta
- Blanc
- Écailles de gris
L'application est un registre des artistes locaux et, par conséquent, les utilisateurs peuvent les évaluer.
Actuellement, je n'affiche que les étoiles atteintes sous forme d'étoiles grises/demi-étoiles.
Maintenant, je l'ai vu avec quelques exemples de lignes et il semblait qu'ils n'avaient pas encore d'étoile (intuitif: gris = mauvais).
Pensez-vous que je devrais afficher les 5 étoiles grises en arrière-plan et mettre en évidence celles obtenues en magenta?
Le thème est globalement plat et stérile, est-ce que ce sera trop intrusif?
Parce que je crains, le bas d'une rangée dominera visuellement le reste, car il y a maintenant les rangées avec les étiquettes et les étoiles de notation.
Tout d'abord, je pense que vous êtes bien préparé à utiliser uniquement le système de classement par étoiles . Comme il existe d'autres moyens de comparer les produits ou le profil (les artistes dans votre cas).
Note latérale: YouTube est passé d'un système basé sur les étoiles au pouce binaire haut/bas, leurs notes ont été multipliées. Il pourrait en être de même dans votre cas, les votes positifs/négatifs seraient très bien, je suppose. Pour en savoir plus ... Lien 1 & Lien 2
Arriver au point réel. Étant donné que votre application est davantage basée sur des niveaux de gris, le magenta pour l'étoile attirera sûrement plus d'attention que le repos.
Solution:
En parlant du système de classement par étoiles, vous ne pourriez peut-être faire qu'une seule chose. Soit à l'état normal (pas atteint selon vous) vous pourriez avoir gris (ou quelle que soit votre nuance de gris ) frontière à une étoile.
Lequel à l'état actif (atteint selon vous), vous pouvez les remplir de gris (ou quelle que soit votre nuance de gris) .
Un exemple grossier:
Gris au lieu de couleur noire
Mise à jour: Solution côté développement
Je suppose que vous utilisez peut-être une police géniale pour ces étoiles, vous effectuez l'une des deux solutions:
Pourrait changer la classe s'il est intégré via html. Comme Font-Awesome fournit deux types d'étoiles (classes), l'une remplie de couleur et l'autre avec juste une bordure.
Pourrait changer l'Unicode fourni si cela est fait avec CSS
Ces changements concerneraient les états de vol stationnaire/actif/de mise au point.
Je pense que c'est ce dont vous avez besoin si vous allez avec ma réponse.
Essayez d'utiliser les contours mais personnellement pour votre cas ici, je pense que deux couleurs valent mieux qu'une. Il montre une sorte de hiérarchie visuelle lorsqu'il s'agit d'un utilisateur qui prend une décision.
Je suggérerais d'utiliser cotes d'étoiles multicolores parce que dans le premier exemple où il s'agit d'une seule étoile, j'avais une supposition initiale que la dernière étoile est mal formatée ou que l'interface est boguée/non terminée. En fait, c'était une demi-étoile mais je l'ai mal interprété. Cela peut entraîner de la confusion et une diminution de la crédibilité du site.
Étant donné que la plupart des sites Web, à mon avis, utilisent des étoiles multicolores, vous devez vous en tenir à cela, sinon vous briseriez l'heuristique d'utilisation cohérente. Il doit être familier aux utilisateurs afin de traiter les informations plus rapidement.
À propos de votre préoccupation que la zone inférieure de la page attirera plus d'attention car elle est plus colorée, vous pouvez simplement tiliser des couleurs de contraste plus faibles pour les notes d'étoiles ou les rendre ~ 50% transparentes. Une autre alternative consiste à utiliser des couleurs gris clair et gris pour désigner les étoiles.
La raison principale pour laquelle il est important d'afficher les cinq étoiles est qu'il ne serait pas clair quelle est la limite des étoiles autrement. (Si je suis sur une page avec 3 étoiles, je pourrais penser que c'est la meilleure note.)
Je suggérerais également d'aller avec des étoiles décrites ou vous pourriez utiliser deux nuances de gris, une très claire.
Un widget de classement par étoiles riche en fonctionnalités est toujours préférable pour visualiser le classement dans votre scénario.
En outre, il devrait prendre en charge la notation fractionnaire affichée en remplissant partiellement les étoiles, et il sera également préférable que le widget de notation lui-même puisse être utilisé comme champ de saisie pour récupérer la notation non encore collectée. Vous pouvez voir un tel contrôle en action ici .
Je pense que les contours de la notation fonctionnent bien, mais j'envisagerais de déplacer ces étoiles plus haut jusqu'à la 3e ligne sous l'emplacement géographique. On dirait des informations importantes.
Pour les étoiles, je suis principalement d'accord avec l'idée de contour de Divy, mais au lieu de gris pour le noir pour le contour, j'irais avec le magenta. Je suis également d'accord avec le fait que les deux étant magenta, le bas dominera le reste du contenu, donc pour contrer cela, je changerais également le nom de l'artiste en magenta. Cela devrait créer un joli conteneur pour le reste du contenu sans attirer trop l'attention sur une partie tout en soulignant ce que la plupart des utilisateurs trouveront comme les informations les plus importantes.