Interface utilisateur pour réorganiser un élément de liste

Question

J'ai une liste d'éléments dans le cadre d'une application Web. La question est de savoir comment l'utilisateur peut manipuler l'ordre des éléments de la liste (et non l'ordre de tri de la liste). La méthode typique consiste à utiliser les boutons fléchés pour déplacer les éléments vers le haut ou le bas. L'autre façon est le glisser-déposer.

Mais existe-t-il d'autres moyens pour une interface utilisateur de réorganiser les listes?

Answer 1

Il existe deux autres méthodes de tri (en plus de ceux que vous avez mentionné, je l'ai vu, ce qui fonctionne assez bien.

Cliquez Sur Pour Déplacer

La méthode utilisée pour la commande d'éléments dans la Galerie web photo album fonctionne assez bien pour commander les photos, et cela devrait fonctionner tout aussi bien pour n'importe quel jeu qui peut être représenté comme un groupe trié des éléments cliquables:

• Présente la liste de vos articles comme des éléments cliquables.
• En cliquant sur un élément "choisit", il est mis en surbrillance pour indiquer qu'il est sélectionné.
• En cliquant sur un autre élément déplace l'élément sélectionné d'une position juste avant l'élément cliqué.
• Répétez jusqu'à ce que tous les éléments sont dans l'ordre souhaité.
• Un mannequin élément est affiché à la fin de la liste pour déplacer des éléments vers la fin.

C'est un peu plus facile à utiliser que les drag-n-drop, car elle nécessite moins de dextérité, et vous n'avez pas à maintenir enfoncé le bouton de la souris pendant que vous comprendre où vous voulez "drop" de l'élément.

La méthode peut facilement être étendu pour permettre la sélection de plusieurs éléments (via shift-clic ou similaire) qui pourrait ensuite être placé dans une nouvelle position de la même manière.

Fournir Des Numéros De Commande

Utilisé par Netflix et certaines applications internes avec qui j'ai travaillé. Cela fonctionne mieux si vos utilisateurs ont une idée concrète de ce que l'ordre numérique doit être utilisé lorsque vous travaillez avec des listes d'instruction étapes de notre application).

• Présente la liste de vos articles un par ligne.
• Fournir une boîte de saisie de texte à côté de chaque élément où le numéro de commande est affiché, en commençant par 1.
• L'utilisateur de modifier l'ordre des nombres dans les champs de texte comme désiré.
• Si plusieurs éléments sont donné le même numéro de commande, ils sont placés les uns à côté des autres.
• Fournir un bouton "appliquer" le tri en JavaScript, de sorte que l'utilisateur n'a pas à soumettre l'ensemble de la page pour voir les ré-arrangé liste. Cela rend plus facile de travailler en incréments.

Edit: quelques réflexions supplémentaires sur le Glisser-Déposer. Vous pourriez avoir utilisé ces avant ou pas, mais il ya quelques choses qui peuvent faire glisser-déposer, plus tolérant et plus facile à utiliser:

• Mettre en surbrillance la zone où l'objet apparaîtra en cas de chute. Par exemple, montrent un éminent ligne horizontale entre les deux éléments existants où l'article sera inséré s'il est tombé.
• - Esprit de selection élément, tel qu'il est déplacé de sorte qu'il est évident que ce qui est déplacé, plutôt que d'utiliser un générique de "glisser" curseur. Cela fonctionne mieux si les éléments traîné sont encore lisibles si indiquée sur le dessus de l'un l'autre avec de la transparence.
• Assurez-vous que la cible des zones où la déplaçable peuvent être supprimés sont suffisamment importantes. De grandes zones peuvent être utiles pour les personnes qui ont de la difficulté avec la coordination requise.

Answer 2

Nous avons trouvé que le glisser-déposer peut être contre-intuitif pour les non-techniciens. Nous avons exploré le Haut Flèche vers le Bas qui fonctionne, mais peut également être lourde que vous avez besoin de garder en cliquant sur en haut et en bas et il en résulte beaucoup de trafic.

Un autre paradigme que nous avons exploré est le bouton de Déplacement de sorte que chaque élément dans une liste a un Déplacement de l'Élément de bouton lorsque vous cliquez à nouveau les boutons sont ajoutés avant et après chaque élément dans la liste pour vous permettre de déplacer l'élément vers un autre emplacement.

Cela fonctionne bien lorsque chaque élément de la liste prend beaucoup de place, si chaque élément de la liste est d'une seule ligne, il peut en résulter une encombré d'interface. Dans notre cas, chaque élément a été une demi-douzaine de lignes de texte ou plus. Nous avons aussi ajouter un élément ici bouton avant / après chaque élément pour permettre l'insertion.

Survey Monkey utilise ce paradigme et ainsi inspiré une partie de ce que nous faisons.

Answer 3

Quelques réflexions - Très bien sur les idées plutôt que la mise en œuvre fin si...

1 - Fournir à la fois des flèches haut et bas et faites-le glisser-déposer, et de surveiller ce qui est de plus en plus populaire, le type d'utilisateurs se servent de qui etc, puis sur mesure à partir de là, une fois que vous avez quelques données

2 - Ajouter un bouton "aléatoire", qui génère de l'ordre de façon aléatoire pourrait être inutile, pourrait être amusant en fonction de votre application

3 - Ajouter un "ordre d'affichage" champ par le côté de chaque élément et de permettre à l'utilisateur de manipuler (mais assurez-vous que vous avez un peu de code pour la mise à jour automatique le reste des numéros quand on change), personnellement, je pense que cela pourrait être très déroutant, mais pour certains utilisateurs, cela pourrait fonctionner

4 - au Lieu de faire glisser et de les déposer en lieu, demandez aux utilisateurs de glisser à une nouvelle liste

5 - Pour une version très basique, avoir un "favori" case à cocher, puis avoir la liste de montrer les favoris d'abord, (dans l'ordre alphabétique ou quelque chose)

6 - Avez-groupes - vous attribuer un numéro de groupe à un élément, tous les celles de groupe apparaît en premier, suivi par le groupe 2, etc

Espérons que cela aléatoire randonnée a été utile, si je pense à quelque chose de plus, je vais revenir...

Answer 4

Vous pouvez expérimenter avec glisser-déposer à l'aide de l'exemple de jQuery UI Sortables. Pour le rendre évident pour les non-techniques ou de nouveaux utilisateurs, vous pouvez utiliser des indices visuels tels que des poignées ou des flèches et peut-être une info-bulle sur le vol stationnaire à suggérer en faisant glisser l'élément.

Vous pouvez même fournir à un gif animé montrant le geste.

Dès qu'un utilisateur apprend à faire cela, je pense que c'est la méthode la plus simple de la commande d'une liste.

Answer 5

Une autre façon est de fournir un petit de saisie de texte à côté de chaque élément, de sorte que l'utilisateur peut entrer un numéro de commande eux-mêmes; puis ils cliquent sur un bouton pour réorganiser tout cela à la fois. (Je n'ai vu que ce utilisé sur les sites qui stockent l'ordre des éléments, tels que Netflix file d'attente ou Livejournal liens.)