Meilleure façon de réorganiser une longue liste d'articles
Je travaille actuellement sur la réorganisation des éléments d'une liste. Cependant, la partie délicate est que je dois pouvoir réorganiser jusqu'à 100 articles. J'ai quelques solutions en tête mais le design se cassera une fois qu'il abordera probablement plus de 20 éléments. Cela conduirait à une très mauvaise expérience pour les utilisateurs. Je serais ravi d'avoir vos pensées et vos idées sur la façon de permettre la réorganisation d'une longue liste d'articles.
Quelques solutions auxquelles j'ai pensé:
Option 1: faites glisser et déposez pour réorganiser les éléments
Comme vous pouvez le voir, il serait difficile de faire glisser les éléments jusqu'au 100e. Le défilement serait également une douleur. Ce serait formidable si vous pouviez partager vos pensées pour de meilleures façons d'utiliser le glisser-déposer.
Option 2: Flèche vers le haut et le bas pour réorganiser les articles
La réorganisation fonctionne ici lorsque vous cliquez sur la flèche de haut en bas. Le problème ici est cependant lorsque vous réorganisez des articles trop éloignés, comme si vous souhaitez déplacer l'article 98 à l'article 2.
La solution rapide pour résoudre ce problème est la pagination où nous n'affichons que 10 éléments par page à la fois. La réorganisation se produit cependant à l'intérieur de cela. Le problème se pose donc lorsque vous réorganisez des éléments à partir d'autres pages.
Option 3: Utiliser la liste déroulante pour sélectionner la position de l'élément 
Serait très heureux d'entendre vos solutions. Merci!
Mise à jour: je voudrais ajouter un peu de contexte sur le cas d'utilisation pour réorganiser cette longue liste d'éléments car certains pourraient se demander à quoi cela sert. Ceci est utilisé pour un questionnaire qui a une longue liste de questions. Le glisser-déposer n'est peut-être pas le mieux adapté à la personnalité des utilisateurs, j'explore donc quelques options et alternatives. Merci à tous ceux qui ont partagé leurs solutions et suggestions.
Avant de continuer à lire, vous voudrez peut-être expliquer un peu plus (dans votre question) le cas d'utilisation ... Je serais très intéressé d'obtenir plus d'informations sur la raison pour laquelle quelqu'un devrait être chargé de trier manuellement 100 entrées.
Si j'avais la nécessité de concevoir une page où l'utilisateur peut trier manuellement 100 éléments, je reviendrais en arrière et remettrais en question l'exigence. Je veux dire, quelle charge placez-vous sur un utilisateur qui pose ces questions: "L'article A est-il vraiment au rang 94, ou est-ce au rang 95?" Peut-être que vous pouvez utiliser le tri automatique basé sur un attribut, peut-être que la véritable exigence est de choisir les cinq meilleurs comme favoris, ...
Pour les moins de 5% de chances que l'exigence soit vraiment de trier manuellement 100 articles,
- assurez-vous qu'ils sont toujours complètement visibles (cela peut signifier que vous devez acheter de nouveaux moniteurs pour vos utilisateurs ;-) Trier les pages séparément et les fusionner plus tard est un ancien algorithme de tri informatique (fusionner le tri), mais je pense qu'il est tombé en disgrâce même pour les algorithmes.
- ajoutez beaucoup de colonnes personnalisables. Je suppose que les utilisateurs auront besoin de beaucoup d'informations contextuelles (attributs) sur les éléments pour pouvoir prendre 100 décisions sur lesquelles devraient être classées plus haut.
- ajoutez autant de façons différentes de réorganiser que vous le pouvez. Pour les déplacements à longue distance, les utilisateurs auront besoin des fonctions "de haut en bas" et "de bas en haut", ainsi que de la possibilité d'entrer la nouvelle position (n'utilisez pas de listes déroulantes, car 100 numéros également vos utilisateurs; utilisez un champ de saisie numérique). Assurez-vous d'inclure le classement par article, afin que l'utilisateur puisse identifier le numéro à entrer comme cible. Pour les mouvements à courte portée, le "one-up" et le "one-down" sont également nécessaires, bien sûr. Le glisser-déposer est sympa des mouvements de milieu de gamme.
- fournir un accès au clavier. Comme je pense que c'est un "cas d'utilisation à 5%" (c'est-à-dire très rare), je pense également que vos utilisateurs utilisent beaucoup les ordinateurs. Ces utilisateurs aiment toujours la prise en charge du clavier. De plus, le déplacement d'objets signifie que votre souris devra suivre si vous devez déplacer l'élément une deuxième fois. La position des touches reste la même.
- garder la présentation visuelle de la liste très stable. Si l'utilisateur modifie la séquence d'une manière ou d'une autre, modifiez uniquement la présentation des éléments modifiés. Ne réaffichez pas la table entière, même si elle est réaffichee à la même position. Le scintillement (ou pire, retourner en haut) désorientera vos utilisateurs et les laissera perdre leur position dans la liste.
J'ai (malheureusement) dû gérer le fait de permettre aux utilisateurs de réorganiser les champs d'un formulaire ... certains de ces formulaires sont ridiculement longs. Dans ce scénario, je devais optimiser pour déplacer occasionnellement un seul champ ou un groupe de champs consécutifs vers un nouvel emplacement, sans réorganiser la liste entière.
Il y a quelques approches qui ont aidé:
- Votre glisser/déposer standard pour les réorganisations à courte portée.
- La possibilité de couper et coller après ou coller avant d'autres champs. C'était plus intuitif pour les utilisateurs habitués à une interface graphique. Cela peut également être un passer à avant/après ..., ou marquer pour déplacer et déplacer ici.
- Attribuer à chaque champ un index que l'utilisateur pourrait voir et manipuler. Un écart de 10 entre les indices (10, 20, 30, etc.). Les utilisateurs plus techniques pourraient l'utiliser comme raccourci, en entrant une valeur telle que 25 pour placer entre 20 et 30. (Les indices sont régénérés chaque fois que l'ordre est modifié.)
- Encourager les utilisateurs à créer des groupes logiques de champs dans la mesure du possible, afin de réduire le nombre d'éléments à chaque niveau. La possibilité de couper et coller à l'intérieur a aidé ici.
Netflix a beaucoup d'expérience avec cela, car les utilisateurs qui s'abonnent toujours à leur service DVD doivent pouvoir réorganiser leurs files d'attente. Ils ont changé leur approche à plusieurs reprises, ce qui me dit que le problème est en fait difficile. Quelques points sur leur approche actuelle:
- Lorsque vous ajoutez quelque chose à la liste, il commence à la fin, mais vous avez la possibilité de le déplacer au début.
- Vous pouvez faire glisser les entrées de haut en bas.
- Si vous cliquez sur la poignée de glissement, une petite boîte apparaît où vous pouvez taper un nombre pour l'endroit où vous souhaitez le déplacer dans la liste. (Je pense que cela est préférable à un long menu déroulant à partir duquel sélectionner un numéro.)
- Ils n'ont pas de boutons pour monter et descendre d'une ligne à la fois.
Ils proposent donc de multiples approches. Si vous pensez que les grands mouvements dans les longues listes seront courants, je ne vois vraiment pas de meilleure approche que de laisser l'utilisateur saisir un index de destination pour la ligne en cours de déplacement.
Trier de longues listes n'est pas si inhabituel. Le cas le plus courant que je rencontre est celui des listes de lecture de musique.
Ma recommandation est la suivante: tout ce qui précède.
Lorsque vous avez beaucoup d'articles à trier, vous devez fournir beaucoup d'assistance au moyen de l'outillage.
Pour les listes courtes ou les éléments qui doivent être réorganisés à proximité les uns des autres, vous devez fournir un support par glisser-déposer. Gardez à l'esprit que cela sera inaccessible à certains utilisateurs, vous devrez donc également fournir des boutons de tri accessibles via les commandes du clavier.
Vous aurez besoin des boutons "trier" et "trier", mais il est également utile d'avoir des boutons "envoyer en haut" et "envoyer en bas".
Ensuite, après tout cela, il est également utile de pouvoir déplacer un élément spécifique vers une position spécifique.
Cela se fait généralement en fournissant un champ numérique entre les boutons "trier vers le haut" et "trier vers le bas":
---- /\
---- Item Name [##]
---- \/
Quelques autres fonctionnalités de tri qui peuvent être utiles dans des circonstances spécifiques:
- Mode de tri qui doit être activé pour éviter le glisser-déposer accidentel
- Boutons de tri à accès rapide pour réinitialiser le tri à une dimension trivialement programmable (alphabétique, date, etc.)
- Sélection de groupe par glisser-déposer afin que de nombreux éléments puissent être triés comme une unité (comme exemple rapide: les onglets du navigateur de Chrome peuvent le faire via
Ctrl+Click)
Comme le dit virtualnobi dans son excellente réponse, vous devez décider si l'utilisateur a vraiment besoin de trier manuellement la liste entière.
Cependant, s'ils le font, je voudrais signaler l'exemple utilisé sur le Premier League Fantasy Draft website . Il s'agit d'un jeu de football fantastique, où les utilisateurs peuvent enregistrer des joueurs pour référence ultérieure et peuvent trier manuellement leur commande. Points importants à considérer:
- Toujours afficher tous les éléments (la pagination le rend très gênant, le défilement est préférable)
- Offrez de nombreuses options
- Tri automatique (basé sur toutes les mesures dont vous disposez; cela permettra à l'utilisateur d'obtenir rapidement une estimation approximative)
- Options de filtrage
La raison pour laquelle je pointe vers le premier League Fantasy Draft est parce qu'ils vous permettent de réorganiser, pendant que vous filtrez, et je pense que c'est une excellente mise en œuvre.
Par exemple:
Liste initiale:
Filtré pour afficher uniquement "MID" (Milieux de terrain):
À ce stade, l'ordre de la liste complète est toujours affiché (Priorité), mais l'utilisateur peut trier cette liste filtrée et avoir un impact sur la liste globale.
Par exemple, l'utilisateur peut déplacer Snodgrass de la 4e de cette liste (7e au total) au 2e de cette liste, ce qui le place au 4e rang, ce qui est une moyenne entre les 2 joueurs entre lesquels il vient de les placer.
C'est certainement une exigence rigoureuse. En supposant que quelqu'un doit trier manuellement 100 éléments, je préfère en faire un jeu pour l'utilisateur. Avez-vous vu ce jouet puzzle pour les enfants pour organiser les numéros dans l'ordre croissant. Ma suggestion est d'en faire quelque chose comme ça.
- Divisez votre zone d'écran en 4 parties - chaque partie pouvant contenir 25 éléments => 100 éléments ensemble à l'écran. Donnez toujours des données complètes à l'utilisateur pour trier manuellement.
- Fournir une fonctionnalité de glisser-déposer, il est plus facile que de cliquer> 100 fois pour accomplir une tâche.
- Le tri doit-il être effectué en une seule fois, c'est-à-dire que l'utilisateur peut revenir et repartir de là où il est parti? Il serait utile de sauvegarder l'état si cela est possible, car même un jeu répétitif est ennuyeux. Donner des points après avoir terminé environ 10 objets serait une bonne stratégie, dans ce cas.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Cette approche a l'avantage que l'utilisateur obtiendra une validation, combien il a terminé.
Quelque chose qui pourrait bien fonctionner dans cette situation (amener les gens à produire un classement d'un grand nombre d'articles) est un instrument de style wars witten - où tout ce que l'utilisateur a à faire est de voir des paires d'articles et choisissez lequel des deux obtient le rang le plus élevé. Il existe du code pour implémenter cela. Il choisirait les paires à montrer à l'utilisateur et, après avoir évalué un nombre suffisant de paires, le classement complet de 100 éléments peut être calculé en fonction de leurs réponses. C'est amusant et facile car l'utilisateur n'a qu'à comparer deux éléments à la fois.
D'accord, je pense que mon approche n'a pas été couverte par les autres:
"Donc, c'est utilisé pour un questionnaire qui a une longue liste de questions." Donc, vous voulez que l'utilisateur évalue les réponses qu'il pense être les plus importantes. Quelque chose de similaire auquel je peux penser est l'aide au vote largement utilisée lors de chaque élection dans mon pays (Pays-Bas). Dans ce document, vous répondez aux questions "l'énergie nucléaire est meilleure que l'énergie éolienne" "La défense devrait obtenir plus d'argent que les soins de santé", puis vous attribuez laquelle de celles-ci vous semble plus importante. Les implémentations diffèrent.
Donc, si le cas d'utilisation est quelque chose comme ça, l'endroit exact (sur 100) d'un élément n'a pas beaucoup d'importance, et il est facile de comparer deux questions par importance. Alors fais ça. Continuez à poser des questions "qui se classerait plus haut, question XA ou question XB?" , qui sont facilement répondables, jusqu'à ce que vous puissiez établir un ordre suffisant pour vos articles. Vous n'avez probablement pas besoin de connaître le classement exact de chaque article, vous pouvez donc vous arrêter après avoir compris ce que sont les 25 premiers, puis ne poser que des questions pour les trier. Ou vous pouvez faire arrêter l'utilisateur quand il le souhaite et travailler avec des données incomplètes. Mieux que pas de données.
Vous devez poser au moins 100 questions avant d'avoir une photo d'une commande complète, mais ce sont des questions simples . Sinon, vous devrez également répondre à 100 questions, sauf sous la forme "Quel grade pensez-vous que la question XA devrait avoir? XB? XC?". Ce sont difficiles , car vous devez avoir une vue d'ensemble de l'importance de cet article par rapport aux 99 autres.
Si l'ordre exact est toujours d'une grande importance, vous pouvez au moins faire une liste à peu près triée à partir de ces réponses, (comme comparer 50 paires, puis comparer tous les gagnants et perdre des paires, de sorte que vous connaissez les 25% supérieurs ( qui a "gagné" les deux matchs) et les 25% les plus bas (qui les ont perdus) après seulement 100 comparaisons). Montrez-le ensuite à l'utilisateur pour la touche finale. La plupart des objets n'auront pas besoin de bouger beaucoup.