Afficher une gamme de notes
Dans un tableau d'une application Web, plusieurs objets du même type sont agrégés. Chaque objet a une condition qui est un nombre compris entre un et cinq. Au début, j'ai pensé à utiliser un style de barre de progression où la plage serait colorée. Cependant, cela n'est probablement pas clair pour l'utilisateur lorsque la plage inclut celle, car l'utilisateur confondra probablement la plage avec une seule valeur (la plus élevée).
Par exemple, nous avons une table qui stocke les chemises usagées. Chaque chemise a une condition qui lui est assignée. Maintenant, nous pourrions regrouper ces chemises par taille et j'essaie d'indiquer que des chemises avec des conditions allant de la qualité moyenne (3) à haute (5) sont disponibles .
Jetez un oeil à l'image: Ne connaissant pas l'interprétation à l'avance, on est obligé de croire que l'image montre la valeur quatre, pas la plage de un à quatre.
Que puis-je faire pour éviter cela?
Si vous vous en tenez au contrôle graphique pour définir la plage, l'affichage des nombres à l'intérieur des segments vous aidera. Ils véhiculent l'idée de l'ensemble plutôt que la valeur unique.
Bien sûr, testez cette interface utilisateur.
[~ # ~] mise à jour [~ # ~] après modification de la question
Selon votre montage, je doute que l'utilisation de la plage soit le meilleur moyen.
Range est principalement compris comme les éléments dans les limites inférieures et supérieures, ou intervalle. Les plages sont bonnes pour les valeurs continues, par ex. marchandises dont les prix varient entre 100 $ et 200 $.
Dans votre cas, vous avez l'ensemble des valeurs discrètes, certaines d'entre elles pourraient être dans votre sous-ensemble.
Considérez le cas:
Quelles informations sur les pointures ont plus de sens pour les utilisateurs:
- 28–37 gamme disponible
- 28/29, 36/37 set disponible
L'utilisation de boutons de type bascule pour définir les options disponibles est probablement la meilleure façon:
Réfléchissez à la question de savoir si l'affichage de la plage est un ajout utile. Je n'ai jamais vu une gamme de notes affichées comme ça, alors assurez-vous que votre cas spécifique le justifie.
( edit : il s'avère que l'affichage des plages n'était en effet pas une bonne solution au problème d'origine, donc la réponse d'AK a plus de sens dans ce contexte, mais la réponse ci-dessous s'applique toujours si c'est ce dont vous avez besoin)
Si vous êtes absolument sûr, essayez de suivre les modèles courants pour affichage des plages . De plus, j'ajouterais une petite marge de chaque côté des 1 et 5 pour que les curseurs n'atteignent jamais les points de terminaison, donc ne peuvent pas être confondus avec une seule valeur.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
À noter dans la maquette ci-dessus:
- les limites de la plage sont clairement marquées par la couleur, les indicateurs triangulaires (peuvent être des cercles ou autres) et les valeurs 1 et 5 indiquées en dessous (qui réduisent également la charge cognitive)
- Une marge importante est laissée de chaque côté du 1 et du 5 pour indiquer clairement que ce qui est affiché n'est pas une valeur unique
- Pour les points bonus, la note moyenne est affichée en haut, avec le mot "average". Bien que vous n'ayez pas spécifié cela comme une exigence, je pense que cela aide en outre à lever l'ambiguïté de la plage par rapport à la valeur.
Au lieu de gammes, j'utiliserais des cases à cocher (ou quelque chose de similaire qui ressemble moins à un élément d'un formulaire) pour afficher la disponibilité des différentes qualités de produits:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Cette idée est proche de celle de la fin du réponse d'Alexey Kolchenko .