Dans une grille, comment réorganiser manuellement les lignes?
Je souhaite permettre à mes utilisateurs de réorganiser les éléments dans une grille - ne pas faire de tri automatique sur une colonne. Ils sélectionnent quel élément est le premier, lequel vient après l'autre, etc.
J'ai pensé et vu des solutions qui pourraient fonctionner selon les cas:
- Glisser-déposer: sexy mais ne fonctionne pas pour les longues grilles avec défilement ou pagination. Un autre inconvénient est qu'il est invisible, vous ne savez peut-être même pas que cette fonctionnalité est disponible. Enfin une certaine dextérité est requise. Cependant, il peut être utilisé pour déplacer plusieurs éléments à la fois.
- Flèches haut/bas: compréhensibles et faciles à utiliser pour les petits mouvements, mais ennuyeuses lorsque vous devez déplacer le dernier élément en premier lieu. De plus, lorsque vous déplacez un élément de quelques étapes, vous devez attraper cette flèche après chaque mouvement. Fonctionne uniquement sur un élément à la fois.
- Une colonne d'index: l'utilisateur saisit un nombre indiquant la position de l'élément. Utile lorsque l'utilisateur connaît la position absolue souhaitée. Difficile de deviner ce qui se passera si un numéro déjà existant est entré. Fonctionne uniquement sur un élément à la fois.
Je suis tenté de combiner deux de ces techniques comme la colonne d'index + glisser-déposer, mais j'ai peur de cumuler les inconvénients des deux au lieu d'avoir les avantages des deux.
Quelles sont les techniques de réorganisation qui se sont avérées efficaces?
Netflix combine trois méthodes dans leur file d'attente. Vous pouvez faire glisser et déposer, mais également spécifier un numéro de ligne particulier, ou cliquez pour le déplacer tout en haut:
Ce que je trouve intéressant à propos de leur approche, c'est qu'ils ont placé l'icône "Haut" (entourée en vert) juste là sur chaque ligne, au lieu d'exiger que l'utilisateur fasse une sélection puis clique quelque part en haut de la page, où la plupart des applications Web mettent de telles icônes ou boutons.
Dans votre cas, j'utiliserais le glisser-déposer, mais je mettrais une icône d'engrenage sur chaque ligne:
Cela permettrait plusieurs actions:
L'utilisateur peut glisser-déposer une ou plusieurs lignes
L'utilisateur peut sélectionner plusieurs lignes, puis cliquer sur l'icône engrenages pour faire dérouler un menu et effectuer un certain nombre de choses, par exemple déplacer la sélection vers le haut ou le bas, déplacer la sélection d'un nombre spécifié de lignes vers le haut ou vers le bas (auquel cas une petite boîte de dialogue apparaît), copier, couper, etc. Pratiquement aucune limite.
La première chose que vous devez vous demander avant d'essayer de comprendre comment le faire est la fréquence à laquelle les utilisateurs vont le faire.
Si elle doit être utilisée souvent, j'essaierais de la créer pour que vous utilisiez le glisser-déposer et que vous fassiez simplement défiler automatiquement la page une fois qu'un utilisateur a atteint un certain seuil.
C'est une bonne règle de base de dire que si un utilisateur doit faire quelque chose assez souvent et que vous pouvez le rendre plus facile même en introduisant un type d'interaction exotique, faites-le. L'utilisateur est d'accord avec la courbe d'apprentissage car cela lui sera utile plus tard.
Si ça ne va pas être utilisé souvent, je ferais une flèche haut/bas, ce n'est peut-être pas en train de sortir mais c'est clair.
Je combinerais les flèches haut/bas avec drag'n'drop.
Devoir deviner un certain nombre, ou devoir le déterminer à l'avance, est tout simplement lourd. Et bien que les collisions puissent et doivent être traitées dans le code, par exemple en incrémentant simplement tous les nombres qui sont sur ou au-dessus de celui entré, la plupart des utilisateurs essaieront de trouver le bon à l'avance, ne serait-ce que par incertitude sur la façon dont un doublon ou un mauvais numéro sera traité.
Les flèches haut et bas sont un moyen beaucoup plus pratique de réorganiser sur de courtes distances.
Pour les distances plus longues et pour les déplacements de plusieurs éléments, le glisser-déposer peut être ajouté. Pour garantir l'utilisabilité du glisser-déposer sur des distances de plus d'une seule page, le défilement automatique de la grille doit également être mis en œuvre. Cela signifie que lors d'une opération de glissement, la grille défile automatiquement lorsque vous faites glisser la souris dans une certaine marge de la bordure supérieure ou inférieure de la grille. C'est exactement ce que fait l'Explorateur Windows.
Pour augmenter cela encore plus, la vitesse de défilement peut commencer lentement et augmenter à mesure que la traînée continue d'être dans la zone "sensible au défilement". Soyez prudent avec cela, et définissez une vitesse de défilement maximale: j'ai été poussé à la fureur par le défilement automatique qui accélérait tellement et/ou si rapidement que je défilais toujours bien au-delà de l'endroit où je devais être.
Le CMS Drupal a une solution relativement bonne pour cela qui évolue vers des listes de 30 à 50 articles. Je ne sais pas comment il évoluerait plus haut.
La configuration des "blocs" du site en est un exemple - voir la capture d'écran ci-dessous.
- Chaque élément a une poignée à 4 directions qui peut être saisie pour les opérations de glisser-déposer.
La poignée offre une "possibilité visuelle" que l'élément peut être déplacé. - La liste est divisée en sections.
Le déplacement d'un élément vers une section particulière peut être effectué en le sélectionnant dans la zone de liste déroulante affichée pour cet élément
L'approche "glisser-déposer" est beaucoup plus simple que d'avoir des flèches qui déplacent les éléments d'une étape. JIRA fait cela et c'est vraiment laborieux de mettre les choses au bon endroit.
Cela dépend de la façon dont vos utilisateurs utilisent le système:
Si le numéro de ligne est significatif (par exemple la position dans la file d'attente), vous souhaiterez probablement l'afficher et le rendre modifiable.
Si "faire ceci en premier" est une action courante, vous voudrez peut-être introduire un bouton "aller en haut" (ou aller en bas).
Si vos utilisateurs comme les raccourcis clavier ajoutent des raccourcis vers le haut et vers le bas, assurez-vous que la sélection/mise au point suit la ligne lorsqu'elle se déplace, donc en appuyant sur le raccourci vers le haut 3 fois, la ligne se déplacera de 3 endroits vers le haut.
Vous pouvez ajouter des boutons haut/bas, mes utilisateurs n'aiment pas beaucoup ceux-ci (vos utilisateurs peuvent être différents)
Et enfin, Drag & Drop, le moyen préféré de mes utilisateurs pour réorganiser les lignes - dans mon application, il n'y a pas de poignées de glisser et les utilisateurs parviennent à glisser-déposer très bien (vos utilisateurs peuvent être différents)
Et, quoi que vous fassiez, assurez-vous de le tester sur vos utilisateurs spécifiques et de voir comment ils l'aiment.