Meilleure façon de réorganiser une liste sur une page Web
J'ai commencé à utiliser le site Carrières dans le groupe de sites StackExchange et j'ai commencé à entrer ma liste de publications. J'ai eu ma première série de 15 ou plus qui ont déjà été publiés. Le widget de liste sur le site ajoute chaque nouveau au bas de la liste; parce que je voulais que mon dernier apparaisse en haut, je les ai simplement entrés dans l'ordre chronologique inverse.
Le problème, cependant, se pose avec la maintenance continue: lorsque j'ajoute plus tard un nouvel article, il apparaît à la fin de la liste. Les seuls contrôles de réorganisation sont move-up-one-slot et move-down-one-slot (les flèches à peine visibles sur le bord droit): 
Cela pose un certain nombre de problèmes. Pour ajouter une nouvelle entrée en haut d'une liste de 15 éléments, je dois effectuer le move-up-one-slot action 15 fois après l'avoir ajouté. Pire encore, il n'y a pas 15 clics au même endroit - chaque fois que je clique, l'élément remonte physiquement la page (une chose raisonnable à faire dans l'isolement), mais je dois ensuite déplacer ma souris vers la petite flèche sur l'élément maintenant déplacé. Répétez ad nauseam.
J'ai posté une demande sur meta.stackoverflow.com ( Améliorer la réorganisation de la liste dans les carrières avec des contrôles de haut en bas et de bas en haut ) avec des suggestions pour améliorer cette expérience utilisateur, bien que rien n'ait encore été fait. En attendant, j'ai commencé à explorer de meilleures façons de le faire. Une approche un peu meilleure est sur Netflix. Ils associent un entier indiquant la position de la liste à chaque élément; l'entier se trouve dans une zone de texte qui peut être modifiée. Ainsi, on pourrait, par exemple, déplacer directement l'élément 5 en position 10. (Les éléments voisins se renumérotent de manière appropriée.) Au moins, Carrières est meilleur que LinkedIn, qui (pour paraphraser une citation bien connue sur le modèle T) vous donnera toute commande que vous souhaitez tant qu'il s'agit d'un ordre d'insertion!
Alors, quelles sont les autres approches pour réorganiser la liste sur une page Web? Je devrais penser que la réponse dépendrait de la longueur de la liste, voici donc mon regroupement arbitraire:
- 5 à 10 éléments (le glisser-déposer serait parfait)
- 10 à 25 éléments (je pense toujours que le glisser-déposer pourrait fonctionner, mélangé avec du défilement automatique)
- 25 à 50 articles ??
- 50 à 100 articles ??
Si l'interface a vraiment besoin de gérer entre 1 et 100 éléments (ou plus), une approche hybride peut fonctionner le mieux. Permettre à l'utilisateur de glisser-déposer pour de petits changements rapides ou de plus grands sauts via le style netflix.
Selon la complexité des informations/éléments de la liste, cela dépendra de la façon dont vous formatez les contrôles. Vous pouvez souhaiter faire glisser une poignée spécifique, ou cliquer et faire glisser n'importe où sur l'élément peut le rendre mobile.
Les choses importantes à considérer dans l'interaction sont.
- Définissez la marge de manœuvre pour le déclencheur de glissement. Puisqu'il existe d'autres contrôles comme l'entrée pour changer de position, vous ne voulez pas que le glissement se déclenche lorsque l'utilisateur clique sur l'entrée. Utilisez les paramètres, comme dans l'interface utilisateur jquery, pour retarder le glissement jusqu'à ce que la souris ait parcouru Xpx et/ou que la souris soit arrêtée pendant x millisecondes.
- Assurez-vous de n'autoriser le glissement que sur l'axe approprié. Comme votre seule réorganisation d'une liste aide l'utilisateur en limitant le mouvement uniquement à l'axe Y (ou approprié).
- Rendez la réorganisation facile à utiliser et mettez à jour instantanément lorsque l'utilisateur valide les modifications. Si je tape 1, onChange passe à 1 et tous les autres éléments sont également mis à jour instantanément. Rien de pire que de mettre à jour un élément à 1, puis d'avoir deux 1. Je veux ensuite déplacer un autre vers le haut et maintenant je dois mettre 1 et le système ne sait pas où le mettre. Si vous souhaitez attendre que toutes les mises à jour soient effectuées, puis soumettre, assurez-vous au moins de prendre en charge la commande via 1.1 1.2 1.3, bien que ce soit toujours sous-optimal car l'utilisateur doit garder une trace de leurs modifications et de ce qui était original. Il est toujours préférable de mettre à jour instantanément afin que l'utilisateur puisse voir les changements et continuer jusqu'à ce qu'il réponde à ses attentes.
Voilà mes deux cents ...
Pour ajouter à ce que Chris a dit, je dirais que le widget devrait prendre en charge une version légèrement meilleure du mécanisme de commande que le simple affichage par ordre d'insertion. Cela peut commencer par quelque chose d'aussi simple que le titre de l'article ou la date de publication.
Il peut s'agir des fonctions de tri automatique, auxquelles s'ajoute le glisser-déposer pour les éléments individuels.