web-dev-qa-db-fra.com

Conventions pour l'état actuel / actif sur un élément de liste

J'ai une liste d'éléments dont l'un sera dans un état actuel/actif. Disons, par exemple, que sa liste d'emplois est exceptionnelle, mais je dois faire la différence entre le travail sur lequel je travaille actuellement et celui qui reste à faire.

Voici 3 exemples de la même maquette:

enter image description here

1 (Left)

Utilise une couleur différente et une étiquette de texte indiquant clairement que c'est votre travail actuel. Je pense que cela fait essentiellement le travail, mais sans le texte, je ne présumerais pas automatiquement que cela signifiait que c'était le travail sur lequel je travaillais. J'ai également ajouté un "temps écoulé" afin que vous puissiez voir depuis combien de temps ce "travail" est actif.

2 (Middle)

Met en retrait l'élément actuel et ajoute un indicateur pour le différencier des autres, mais il ne me dit pas exactement de manière intuitive qu'il s'agit de l'élément actuel.

3 (Right)

J'ai ancré l'élément actif en bas (ce pourrait être le haut probablement au-dessus des filtres). Faire cela garde l'élément actuel à l'écran à tout moment, mais il a ensuite perdu son contexte.


En utilisant les onglets comme analogie, l'onglet actif est généralement plus grand ou plus avancé (certainement dans les conceptions skeuomorphes) et il se retrouve le plus souvent dans le contenu qu'il représente.

Existe-t-il un moyen standard ou conventionnel de mettre en évidence un état actuel/actif dans une liste? Ou suis-je en train de penser à tout cela et la couleur suffit-elle à elle seule?

1
Chris Spittles

Je pense que le première option sera le plus intuitif pour les utilisateurs car ils peuvent immédiatement voir le changement en raison du contraste.

La seconde au milieu serait un peu moins visible tandis que la troisième option sera très difficile pour les utilisateurs de repérer l'élément actif car il a descendu la page et ils s'attendent à ce qu'il soit en place.

Je vous suggère d'utiliser la première option, car les utilisateurs dépenseront le moins de ressources d'attention (recherche visuelle) pour repérer l'élément en surbrillance.

2
Kristiyan Lukanov

Je pense que vous devriez essayer de fusionner les options 1 et 3 .

Un élément ancré de la tâche en cours sera utile pour avoir un accès rapide si l'élément de tâche en cours dans la liste a été déplacé hors de la vue. Ne le perdez pas de la liste principale comme dans l'option 3, sauf ajoutez-le et différenciez-le par la couleur/l'icône/le texte. En couple avec un élément ancré qui indique qu'il s'agit de la tâche active (voir l'exemple ci-dessous), vous pouvez peut-être vous en sortir avec un simple changement de couleur sur l'élément dans la liste principale. Sinon, vous ne pourriez pas simplement compter sur la couleur.

De plus, si vous venez d'utiliser l'option 1, l'élément pourrait sembler être simplement l'élément actif dans l'interface utilisateur, c'est-à-dire le dernier élément exploité par exemple.


Réfléchissez à la façon dont Spotify a un élément ancré lors de la lecture d'une chanson afin que vous puissiez y accéder rapidement. Mais la chanson ne disparaît pas de la liste des chansons dans la vue de défilement principale. Si vous pensez qu'un accès rapide est utile dans votre situation, j'essaierais cette option.

Exemple

enter image description here

0
Dave Haigh