web-dev-qa-db-fra.com

Dans quelle direction les flèches doivent-elles pointer dans un tableau trié?

Dans un tableau trié, il est courant d'avoir une flèche vers le haut ou vers le bas indiquant le style de tri. Cependant, j'ai du mal à déterminer dans quelle direction la flèche doit pointer. Dans un tri ASC, les caractères sont triés de 1 à 9A-Za-z. La flèche doit-elle pointer vers le haut ou vers le bas?

J'ai trouvé des implémentations des deux sur le Web, donc cela ne m'a pas beaucoup aidé: p et Down (vous devez d'abord créer la table).

Y a-t-il une règle dure et rapide pour cela? Je me trouve capable de justifier les deux implémentations. Quelle méthode utilisez-vous? Qu'est-ce qui vous est le plus intuitif et pourquoi?

Edit: Certains d'entre vous ont suggéré des implémentations alternatives comme des barres montantes ou des lettres avec une flèche indiquant le sens de tri. Excellentes suggestions. Je suis définitivement ouvert à d'autres options. Le moins ambigu, mieux c'est. Cela peut être difficile, mais j'aimerais vraiment qu'il y ait peu ou pas de confusion de la part de l'utilisateur.

Edit: J'ai fini par aller avec les barres montantes et descendantes pour l'instant. Ce n'est pas standard, mais semble moins ambigu que les triangles. La colonne de tri actuelle affiche trois barres, petite à grande (de gauche à droite) pour ASC, l'inverse pour DESC. Les autres colonnes triables n'ont pas de barres par défaut, mais le survol de n'importe quel en-tête de colonne triable (y compris l'actuel) affiche des barres décrivant comment le tableau sera trié si cet en-tête de colonne est cliqué.

48
VirtuosiMedia

dans le Finder classique, Apple n'a pas utilisé de flèches. À la place, il y avait une petite icône qui ressemblait à trois (ou quatre?) lignes horizontales de longueur croissante ou décroissante. à première vue, il était comme un triangle, mais en le regardant, il était clair s'il devenait plus grand ou plus petit.

d'autres interfaces graphiques (KDE, par exemple) utilisent des triangles, mais la plupart des gens les interprètent comme des flèches, ce qui rend le message ambigu.

2
Javier

Je ne les considère pas comme des flèches, mais comme un mnémonique visuel de l'état actuel. Ainsi, montrer un triangle pointant vers le bas montre l'ordre décroissant. Il est visuellement en ligne avec l'icône avec le plus grand élément (base du triangle) en haut de la liste et le plus petit (point du triangle) en bas.

46
Chris Cudmore

J'ai toujours opté pour ce qui suit:

  • Croissant - Flèche pointant vers le haut
  • Descendant - Flèche pointant vers le bas

À mon avis, la représentation visuelle de la flèche pointant vers le haut/vers le bas explique le plus précisément l'ordre de tri.

13
Mikey

J'ai fait des tests d'utilisabilité à ce sujet. Il ne semble pas y avoir une interprétation cohérente parmi les utilisateurs de la signification des flèches. Je semble me souvenir que même chaque utilisateur n'était pas cohérent, pensant que la flèche vers le bas signifiait monter dans un cas et descendre dans un autre. J'ai essayé les flèches à gauche et à droite (tri "avant" ou "arrière"), mais elles n'ont pas non plus été interprétées de manière cohérente. J'ai essayé de montrer l'état actuel et de montrer l'état qui en résulterait. Aucun des deux n'a fonctionné.

Ce qui a fonctionné était une représentation textuelle schématique de l'ordre de tri: "A..Z" et "Z..A" pour alpha, "1..9" et "9..1" pour numérique, "1..12 "Et" 12..1 "pour les dates (le test d'utilisabilité utilisait le format de date mm/jj/aa).

Afficher ce texte en lecture seule indiquant l'état actuel. Placez un bouton à côté du texte pour définir ou permuter l'ordre de tri.

Je n’ai pas essayé l’icône de la barre montante/descendante, mais je pense qu’elle peut rencontrer des difficultés où "plus grand" est ambigu. Par exemple, une date plus ancienne dans le passé est-elle plus grande (il y a plus longtemps) ou plus petite (plus proche de l'heure 0) qu'une date plus récente? La priorité 1 est-elle plus grande ou plus petite que la priorité 2? Grade A plus grand ou plus petit que grade B? D'ailleurs, qui, à part les geeks, pense que "Zuschlag" est bien plus grand que "Abbott"? Non pas que je prenne cela personnellement, bien sûr.

10
Michael Zuschlag

Pour une raison quelconque, je pense que c'est toujours à l'envers. Pour moi, la flèche/triangle pointant vers le bas devrait représenter la façon dont je lis habituellement les choses (de haut en bas -> de a à z) et la flèche pointant vers le haut est à l'envers par rapport à la façon dont je lis les choses (de z à a). Mais ce n'est que moi, puisque les interfaces utilisateur les plus populaires (Mac, Windows, etc.) l'utilisent dans l'autre sens, elles doivent savoir quelque chose :).

Dans tous les cas, la cohérence avec ce à quoi l'utilisateur est habitué est une bonne option.

8
Jaime

Mon préféré est en fait la façon dont par exemple Excel le gère - n'utilisez pas de flèche, mais plutôt une icône personnalisée avec

A  |
Z  V

pour le tri croissant et

Z  |
A  V

pour le tri décroissant. Personne ne se demandera jamais de quelle manière vous triez.

Maintenant, si vous ne pouvez pas utiliser une icône personnalisée mais avez plutôt besoin d'un caractère imprimable, je dirais que les gens sont à peu près aussi susceptibles d'être déroutés par l'un ou l'autre. Windows utilise la "petite partie de la flèche correspond à une valeur plus petite" pour Explorer, c'est-à-dire que le tri croissant pointe vers le haut. Mais de nombreuses autres sources supposent que la base de la flèche commence à la valeur la plus basse et pointe dans la direction du tri, ce qui a franchement autant de sens que toute autre chose. En d'autres termes, la moitié de vos utilisateurs devront probablement s'adapter dans un sens ou dans l'autre.

6
Coderer

J'aime:

  • flèche pointant vers le bas pour l'ordre croissant
  • flèche pointant vers le haut pour l'ordre décroissant

Pourquoi? Parce que j'ai l'impression que je viens de trier la page. J'ai cliqué sur l'en-tête et c'était "Wow! Trié de haut en bas". Pourquoi "de haut en bas" est appelé croissant, c'est parce que la valeur des chiffres/lettres augmente lorsque l'ordinateur écrit sur l'écran. Le contraire pour descendre. Cependant, la liste est en fait décroissante bas l'écran de haut en bas - de a à z. Lorsque vous le commandez dans l'autre sens, le début de la liste se trouve en bas de l'écran.

Donc, pour la logique mentale humaine physique - le genre qui signifie que le sens horaire est proche et le sens antihoraire est ouvert, il est logique d'ignorer comment la machine trie et produit les données, et réfléchissez plutôt à la façon dont un humain pourrait trier les données: commencez par début (valeurs les plus petites) et en haut du papier, puis avancez jusqu'à la fin (valeur la plus grande) sur le papier.

La raison pour laquelle le début est le plus petit, c'est parce que 1 vient avant 2, et que l'alphabet romain commence par A et se termine par Z. C'est donc une sorte de valeur par défaut pour nous les humains à ce stade. Nous écrivons de haut en bas et de gauche à droite. Cela a à voir avec la souplesse et la façon dont nous tenons le papier - je pense. Je ne suis pas vraiment spécialiste des interfaces humaines. Je viens de réfléchir à la raison pour laquelle cela semble plus naturel. Les gars de KDE sont des spécialistes de l'interface humaine. Jetez un œil à la façon dont l'oxygène est fait.

L'autre façon dont je pense que tout va bien est un triangle qui montre en fait que les données sont du plus petit au plus grand. Encore une fois, c'est plutôt technique et à première vue, l'humain pourrait ne pas "comprendre".

4
d-_-b

L'autre chose que vous devez considérer est de savoir si la flèche représente la direction de tri actuelle ou la direction de tri qui sera appliquée si vous cliquez sur la flèche. (Pas toujours évident à partir du contenu du tableau car il peut y avoir des flèches sur chaque colonne)

Désolé d'ajouter à la confusion, mais vous devez en tenir compte.

Une clarification sur ce front peut être partiellement obtenue en ajoutant une info-bulle correctement formulée à la flèche.

3
belugabob

Je m'attends à ce que les flèches indiquent l'état actuel (pointant vers le haut lorsque la liste est actuellement croissante). C'est ce que fait l'Explorateur Windows dans la vue Détails.

2
James Curran

Une flèche pointant vers le haut signifie généralement plus grande ou plus grande, donc cela devrait être utilisé pour l'ordre croissant. Une flèche pointant vers le bas signifie généralement que quelque chose est plus petit ou devient plus petit et elle doit être utilisée pour l'ordre décroissant.

2
Dalin Seivewright

"Y a-t-il une règle dure et rapide pour cela?" - Apparemment non, puisque vous avez trouvé des exemples des deux.

Par souci de cohérence générale, je dirais que la flèche doit pointer vers le haut pour monter, vers le bas pour descendre. Ceci est cohérent avec Windows (cliquez sur un en-tête de colonne dans l'Explorateur) et Office (filtre/tri une colonne dans Excel).

1
GalacticCowboy

Le meilleur endroit pour vérifier, à mon avis ... serait de grands sites Web d'entreprise comme Amazon , dabs etc., car ce sont ce à quoi les utilisateurs sont le plus habitués.

1
adam

Je pense que tout le monde convient que la direction de la flèche oblige les utilisateurs à réfléchir à sa signification. Que signifie une flèche vers le bas? A-Z ou Z-A? Qu'est-ce que cela signifie lors du tri des dates? Cela n'est clair que lorsque l'utilisateur regarde les données triées réelles.

Pour cette raison, je trouve qu'il vaut mieux ne pas utiliser d'indication de direction. Il suffit d'indiquer le fait que les lignes sont triées selon une certaine colonne. Il est important de savoir de quelle manière les utilisateurs s'attendent généralement à ce que les lignes soient triées pour le premier clic. Le deuxième clic inverse l'ordre, le troisième clic désactive le tri.

J'ai implémenté cela plusieurs fois et les utilisateurs n'ont aucun problème à trier les lignes par différentes colonnes comme ils le souhaitent.

1
Zsolt Sky

enter image description here

Croissant : Flèche pointant vers le haut
Décroissant : Flèche pointant vers le bas

Astuces à retenir:

  • Alphabets:

    • [~ # ~] a [~ # ~] scending i.e. A B C D
    • [~ # ~] d [~ # ~] escending i.e. D C B A
  • Nombres:

    • A = 1, B = 2 ... Z = 26.
    • Croissant A B C D donc 1 2 3 4 c.-à-d. Petit à grand
    • Descendant D C B A donc 4 3 2 1 c.-à-d. Grand à petit
  • Date:

    • La date est en fait convertie en un nombre, elle augmente sur la base du jour, donc elle fonctionne à nouveau un système numérique. aujourd'hui est plus grand qu'hier, aujourd'hui est plus petit que demain.
0
Premraj

Il n'y a pas de règle absolue, mais la meilleure approche est de réduire la complexité apparente pour l'utilisateur, en utilisant le meilleur mappage des flèches vers le bas et vers le haut avec la terminologie "ascendant" et "descendant".

Notez que la plupart des concepts non numériques n'ont pas de correspondance naturelle forte avec "haut" ou "bas". Les lettres/mots vont-ils "vers le haut" ou "vers le bas" dans le dictionnaire? Et les dates et les heures? Là où c'est ambigu, je pense qu'il n'y a pas de "bonne" réponse - je recommande d'autoriser "Décroissant" pour représenter l'ordre de tri le plus utile pour la cohérence, car l'utilisateur est susceptible de penser que la table est "vers le bas" lorsqu'il déplace son les yeux baissés. Laissant de côté les représentations numériques puisque les utilisateurs de la plupart des applications ne connaissent pas ou ne se soucient pas de la représentation interne. Par conséquent, le tri alphabétique pourrait être "Décroissant" pour A-Z, et le temps pourrait être Décroissant avec le plus récent en premier. La bonne nouvelle est que tant que le premier clic donne à l'utilisateur le comportement de tri auquel il s'attend et que le second l'inverse, il ne se souciera généralement pas de savoir lequel des deux modes est utilisé.

Ce défi concernant le tri correct à faire "en premier" (en affichant le contenu, ou en triant sur une nouvelle colonne) est l'implication la plus importante de la question. Le type ET l'utilisation prévue des informations déterminent qu'elles doivent être triées. L'alphabétique devrait toujours par défaut A-Z, "décroissant" par ma logique ci-dessus. Les nombres varient beaucoup plus selon l'utilisation: les nombres qui représentent des identifiants séquentiels, par exemple, un identifiant d'employé serait croissant (1-10), tandis que le tri sur les quantités ou le prix serait généralement décroissant, pour amener les plus grandes valeurs vers le haut. Le temps varie également - le plus récent en premier ("Décroissant") fonctionne généralement mais dans certains contextes, le plus ancien doit être répertorié en premier.

0
Will Budreau

Rappelez-vous que d escending est pour d own. Donc, j'utiliserais la flèche vers le bas pour descendre. Mais, je suis toujours confus par cela de toute façon. Je vous recommande d'utiliser des lettres à la place, comme A-Z et Z-A au lieu des flèches. Ou utilisez-les en conjonction avec les flèches.

0
p1nk g33k

C'est une question très émue. Mais voici une solution logique et la raison pour laquelle je l'ai choisie:

Solution:

Si vous utilisez une flèche pour afficher l'ordre de tri dans une colonne de tableau, il sera préférable d'utiliser une flèche vers le bas pour la montée et vice versa.

Raisons:

  1. Si nous nous référons à une image ou à un graphique, où le parcours visuel et basé sur la valeur sont tous deux dans la même direction, l'utilisation de "Ascendant" ou "Descendant" servira son but comme prévu. Mais en ce qui concerne les tableaux, la principale source de confusion est que les valeurs sont traversées vers des valeurs plus élevées (vers le haut, mais uniquement conceptuellement) mais la direction de la traversée visuelle est vers le bas. Et comme une flèche est un indice visuel (direction), il peut être plus facile pour quelqu'un de mieux comprendre la traversée directionnelle avec elle.

  2. Pour de nombreuses personnes, le concept de montée et de descente est compréhensible en termes de valeurs. Mais dans certains cas, les utilisateurs de cette table peuvent ne pas être conscients de ces concepts. Par exemple, quelqu'un qui n'a jamais été à l'école ou un enfant du primaire ou quelqu'un de complètement nouveau dans le monde numérique. Pour eux, le concept directionnel sera plus facile à comprendre. Comme dans a-z, vers le haut ou vers le bas. Comme dans 1-9 vers le haut ou vers le bas. Il est à noter que les utilisateurs éduqués ou expérimentés peuvent le comprendre de toute façon (la 4ème raison).

  3. La raison suivante est que, que nous soyons maîtres des tableaux numériques ou non, nous avons toujours écrit des listes et des tableaux. Et dans presque tous les cas, nous l'écrivons par ordre croissant dans des directions descendantes. Donc, c'est un peu câblé à notre cerveau.

  4. Enfin, la confusion sur cette question a toujours existé et une méthode universelle est toujours meilleure. À ce jour, j'analyse toujours la façon dont les valeurs sont triées pour voir si elles sont dans l'ordre croissant ou décroissant. Les flèches directionnelles n'ont jamais atteint leur objectif car elles ne sont pas fiables. Pour les utilisateurs avertis ou expérimentés, connaître la commande immédiatement ne sera pas un problème. Cependant, lorsque nous créons une norme universelle, nous devons veiller à ce que chaque utilisateur probable soit `` capable '' de la comprendre ...

Comment je l'utilise:

J'utilise une flèche à queue pour les nombres, les alphabets ou toute autre valeur qui augmente progressivement en traversant dans cette direction.

Puisque les valeurs augmentent (par défaut), l'utilisateur peut l'appeler Ascendant s'il le souhaite, mais la flèche est vers le bas. Cela m'aide également à trier les "ensembles de mots" (par exemple, l'état d'un enregistrement dans la table. Il peut ne pas être trié par ordre alphanumérique mais par ordre de progression de l'état).

J'espère que cela a aidé.

0
BlackPanther