Icône de tri croissant-décroissant
J'essaie de trouver deux icônes pour représenter l'ordre de tri croissant-décroissant qui permettrait à l'utilisateur de trier les membres ("barres") d'un graphique/visualisation.
Le contrôle sera une bascule permettant à l'utilisateur de sélectionner une option ou l'autre. J'ai inclus quelques variations, je me demande ce que vous pensez être le plus intuitif/clair:
Une note, je ne sais pas si cela est pertinent ou non, pourrait potentiellement avoir un impact sur la convivialité des icônes: souvent, les données ont plus de membres que le graphique peut afficher - par exemple, un graphique à barres ne peut contenir que 20 barres alors que nous avons 200 villes dans les données . Dans ce cas, ce qui se passe, c'est que les 20 barres les plus grandes/les plus petites sont affichées (en fonction de l'ordre de tri) et les autres sont simplement moyennées et regroupées dans une barre "autres".
Je ne pense pas que la barre `` autres '' aura un effet négatif sur l'expérience utilisateur, si vous la placez toujours comme le dernier élément en bas et l'étiquetez clairement. (Vous pouvez utiliser des parenthèses ou des polices italiques sur l'étiquette pour la faire ressortir encore plus, alors la plupart des utilisateurs ne la confondront pas avec une étiquette normale.)
Pour l'icône: que signifient les couleurs, pourquoi un vert et l'autre gris? S'il indique l'ordre actuel, je pense que celui sélectionné pourrait être plus lumineux et peut-être avoir un peu d'éclat (et je pense que c'est une bonne façon de montrer l'état actuel.)
Sur les données non triées, je les rendrais neutres (les deux options sont égales.) Le contraste actuel entre le vert et l'arrière-plan est un peu trop faible et un peu difficile à l'œil.
(Pour comparer d'autres applications: mail, Windows Explorer et d'autres, utilisez simplement un seul triangle pour indiquer la colonne triée et supposez que les utilisateurs savent que cliquer sur les en-têtes triera. Certaines applications Web utilisent une flèche de haut en bas au survol (le cas échéant - pas pour mobile) pour indiquer la possibilité. Word utilise un az avec une flèche vers le bas, un outil de visualisation utilise presque les mêmes icônes que vous, mais divisé en deux boutons distincts. Dans une nouvelle application, la première option est probablement trop indiscernable.)
J'essaierais d'éviter les flèches, car on ne sait pas ce qu'elles devraient signifier. Au lieu de cela, je n'utiliserais que les largeurs de barre croissantes/décroissantes: options a ou b sans flèches.
Pour les exemples que vous avez fournis, "B" est le plus intuitif car il montre une différence entre le haut et le bas dans les barres, mais ça me fait trop réfléchir. Selon l'endroit où vous positionnez les icônes (dans un en-tête, par exemple), vous pouvez supprimer les barres et simplement placer les icônes avec Haut et Bas. Ou un simple triangle pointant vers le haut ou vers le bas.
En ce qui concerne votre autre préoccupation, avoir une barre "Autres" est explicite qu'il y a d'autres villes et que vous ne montrez que les meilleures. Je le testerais avec les utilisateurs pour voir s'ils comprennent ce qu'il essaie de faire, et je partirais de là.
J'aime cet exemple de AristsValley.com , bien que l'icône elle-même soit beaucoup trop grande et nécessite trop de détails pour votre cas d'utilisation probable:
Les caractéristiques importantes sont la largeur des lignes (qui sont affichées comme la bette à carde réelle apparaîtra) ainsi que la largeur de la flèche . La largeur de la flèche projette également l'aspect "haut lourd" que le graphique affichera une fois que vous aurez cliqué sur le bouton. Comme le montrent vos exemples, les flèches lourdes normales non supérieures/inférieures sont ambiguës.
Maquette de peinture MS haute fidélité:
