web-dev-qa-db-fra.com

Je veux laisser l'utilisateur basculer un en-tête de colonne pour trier une grille par un champ de date. Comment puis-je rendre ASC / DSC intuitif?

Je veux laisser l'utilisateur basculer un en-tête de colonne pour trier une grille par un champ date.

Comment rendre intuitive la dichotomie ascendante/descendante?


EDIT: Je cherchais date-column des solutions spécifiques.

7
Jim G.

La convention est d'avoir une flèche vers le haut pour les listes ascendantes et une flèche vers le bas pour les listes descendantes. Ça ne marche pas. Dans les tests d'utilisabilité que j'ai effectués, les utilisateurs sont également divisés sur le fait que mon nom se retrouve en haut ou en bas de la liste, quelle que soit la flèche que vous affichez.

Une partie du problème est qu'il y a juste quelque chose de bizarrement cognitif à propos d'une flèche vers le haut qui signifie que la liste augmente lorsque vous allez vers le bas dans la liste. Cependant, j'ai essayé les flèches gauche (ascendant/avant) et droit (descendant/arrière), et j'avais toujours des performances inacceptables.

La seule chose que j'ai trouvée qui fonctionne est une représentation alphanumérique générique des bornes. Par exemple:

Nom (A - Z)

Taille du fichier (1 à 9)

Date (1--12)

J'ai trouvé qu'il n'était pas nécessaire que les limites reflètent les vraies valeurs minimum et maximum dans la liste.

C'est à vous de décider si vous pensez que cela en vaut la peine. Les utilisateurs à qui j'ai parlé disent qu'ils regardent les éléments de la liste pour voir la commande et ignorent les symboles dans l'en-tête. C'est peut-être assez bien pour votre situation.

12
Michael Zuschlag

La manière préférée de le faire semble être d'utiliser un triangle "vers le haut" (▲) pour monter et un triangle "vers le bas" pour descendre (▼).

3
Marcos Crispino

Désolé de poster ceci comme réponse, je ne sais pas si c'est vraiment une réponse. Mais je ne peux pas encore commenter, de toute façon.

Je vois ici deux problèmes différents. Premièrement, si l'ordre croissant doit être représenté par un triangle pointant vers le haut ou vers le bas (ou des icônes similaires). Deuxièmement, si cette icône représente l'état actuel (maintenant) ou futur (après clic).

Quant au premier problème, en tant qu'utilisateur Windows (et peut-être devrions-nous voir le système d'exploitation ou d'autres conventions d'interfaces utilisateur largement utilisées par la plupart de nos utilisateurs cibles pour décider), mon intuition dit flèche vers le haut pour ascendant (a >> z, 1> > 9), même si les résultats sont affichés de haut en bas. Mais il n'y a aucune étude/preuve que je puisse montrer ici.

Pour le deuxième problème, j'ai semblé @Wilbert répondre sur ce fil , avec la conclusion suivante:

(...) il n'est pas clair si le symbole d'en-tête de colonne indique le critère actuellement utilisé pour le tri, ou agit comme un bouton qui triera selon le symbole lorsqu'il est cliqué.

Eh bien, je suis d'accord avec lui. Je me demandais donc deux situations qui pourraient avoir plus de sens pour moi:

  1. Nous utilisons le symbole de tri uniquement dans la colonne dans laquelle le tri est appliqué et représentant le tri en cours; ou
  2. Nous utilisons le symbole de tri sur toutes les colonnes, mais représentant l'état futur après avoir cliqué.

La première option me semble plus intuitive, car la colonne choisie pour le tri et l'ordre de tri sont explicites pour l'utilisateur. En revanche, l'utilisateur n'a aucun moyen explicite de savoir que cliquer dans un en-tête de colonne triera les résultats (bien que ce soit un bon sens). C'est donc l'option que j'appliquerais.

La seconde est tout le contraire: bien qu'il devienne plus explicite pour l'utilisateur que cliquer sur les colonnes triera les résultats, il n'est pas clair quels sont les critères de tri actuels (la colonne de tri et la direction de tri).

Je serais ravi d'entendre qu'il existe une convention largement utilisée, mais pour autant que je puisse trouver jusqu'à présent, il n'y en a pas. = /

2
ricardo.scholz

Une autre possibilité est d'utiliser de petits diagrammes à barres ascendants et descendants.

Par exemple ascending sort

1
Naveen M.