Déplacement d'éléments entre les listes
J'ai une question ... J'ai affaire à une interface qui a deux listes, et vous pouvez glisser-déposer des éléments entre elles.
Quelle serait une meilleure approche et pourquoi?
a) Le déplacement entre les listes ne change aucun comportement des boutons entre elles. Si l'élément trois est déplacé vers la droite, le système supprimera l'élément de la liste source, sélectionnera l'élément disponible suivant et placera l'élément souhaité dans la liste cible. Le focus de l'élément précédemment sélectionné est perdu et remplacé par un autre. (Dans la figure ci-dessous, Item Three a été poussé vers l'autre liste et Item Four a été sélectionné).
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
b) Le comportement du bouton central change, car l'élément sélectionné ne perd pas le focus. Contrairement à l'exemple précédent, le déplacement en cliquant une fois sur le bouton central > déplacera l'élément d'une liste à l'autre et il deviendra <.
À mon avis, l'option b est plus conviviale car elle vous permet de revenir facilement à un état précédent (annuler). Cela supprime également la nécessité de désactiver les boutons et de sélectionner des éléments dans les deux listes, ce qui, pour moi, le rend un peu plus facile à utiliser.
Bonus: Considérant la solution a) nous savons que lorsqu'un élément du la liste de gauche est sélectionnée, elle ne peut aller qu'à la liste de droite, et inversement; lorsqu'un élément de la liste de droite est sélectionné, il ne peut aller que dans la liste de gauche. La désactivation des boutons en conséquence pourrait-elle être gênante pour l'utilisateur ou devrait-elle être encouragée?
Jetez un oeil à la vue d'ensemble. Qu'est-ce que l'utilisateur va faire ensuite? Probablement pas annulé - possible mais peu probable?
Si la prochaine étape probable consiste à déplacer un autre élément de la liste de gauche à droite, vous devez laisser le focus sur l'élément suivant dans la liste source, afin que l'utilisateur puisse déplacer plusieurs éléments facilement en appuyant séquentiellement sur le bouton fléché. Donc, pour déplacer les éléments 2,3 et 4, vous devez sélectionner l'élément 2, puis appuyer sur le bouton fléché 3 fois.
De même, si vous avez déplacé un élément de la liste de droite vers la gauche.
En supposant que la liste est ordonnée, vous devez conserver le même ordre dans la deuxième liste que la première, à moins qu'il n'y ait une bonne raison de ne pas le faire (comme la liste agit comme un historique des événements chronologiques et est ordonnée par le plus récemment ajouté).
Il n'est pas nécessaire de désactiver les boutons (grisés) sauf lorsqu'une liste est vide, et ne les masque pas du tout car cela empêche l'exploration visuelle des possibilités de la scène.
Il en est ainsi de l'option a).
Voici les points à prendre en compte pour les listes de transfert:
- Sélection unique vs sélection multiple (y compris en faisant glisser);
- Sélection après transfert;
- Double-clique dans les listes;
- Gestion possible des touches ENTER/DELETE pour transférer des éléments lorsque le focus est sur les listes;
- Politique de traversée du focus;
- Tri.
Pour être honnête, je pense qu'il est préférable de garder les deux boutons de transfert, à condition que le comportement soit le suivant:
- Lors du transfert des éléments sélectionnés d'une liste à une autre (dans les deux sens), les éléments transférés doivent être automatiquement sélectionnés dans la liste de destination. Cela permet à l'utilisateur de revenir rapidement en arrière en cliquant sur l'autre bouton, au cas où il ferait une erreur par exemple. En outre, cela donne une bonne rétroaction que les éléments ont été transférés car il est plus facile pour l'utilisateur de suivre ce qui se passe, surtout si les éléments de la liste de destination sont triés par exemple (l'élément transféré peut ne pas apparaître à la fin de la liste de destinations).
- Lors du transfert des éléments sélectionnés d'une liste à une autre (dans les deux sens), l'élément suivant de la liste source doit être automatiquement sélectionné. Cela permet à l'utilisateur de transférer rapidement des éléments consécutifs en cliquant rapidement sur le même bouton sans avoir à déplacer la souris pour sélectionner chaque élément individuellement.
- Selon votre cas d'utilisation, la sélection multiple peut être pratique dans les deux listes pour permettre à l'utilisateur de transférer plusieurs éléments à la fois. Et si rien n'est sélectionné dans une liste, le bouton associé pour transférer vers l'autre liste doit être désactivé. Les boutons ne doivent donc être activés que si un clic sur ceux-ci a réellement un effet.
- Créez la politique de traversée de telle manière que le composant suivant obtenant le focus après le bouton> soit le bouton <. Dans de nombreuses implémentations (en particulier Java Swing), cet ordre n'est pas celui par défaut, et a tendance à surprendre l'utilisateur (pas naturel).
- Comme de nombreuses personnes ont tendance à double-cliquer sur les éléments, il peut être judicieux de transférer les éléments double-cliqués vers l'autre liste.
- Certaines personnes ont également tendance à utiliser la touche SUPPR dans la liste de droite (selon la sémantique). Ce serait donc une bonne idée de l'appuyer. Dans ce cas, vous pouvez également autoriser la touche ENTRÉE dans la liste de gauche. Cependant, ce n'est peut-être qu'une question de goût, je n'en suis pas sûr.
Cette implémentation, nécessitant 2 boutons de transfert, est très pratique et permet à l'utilisateur d'aller très vite, et elle est également assez simple pour corriger rapidement les erreurs.
Notez qu'ici, nous faisons la distinction entre sélection et focus . Pour la manipulation du clavier, le focus doit rester le dernier composant utilisé. J'ai vu de nombreuses implémentations (dans Java Swing again) où les boutons sont temporairement désactivés pendant l'état de sélection intermédiaire dans les listes, ce qui transfère le focus du bouton activé au composant suivant. Cela rend la manipulation du clavier très ennuyant.
Une dernière chose à considérer est le tri : soit dans aucune des listes, soit seulement dans la première liste, soit dans les deux listes. Cela dépend vraiment si l'ordre dans les listes a une signification sémantique. Cependant, il est souvent conseillé de trier la première liste, surtout si elle contient initialement beaucoup d'éléments. Cela facilite la recherche d'articles. Vous pouvez jeter un œil à cette question: Ai-je raison de trier la listbox RHS par ordre alphabétique dans une GUI de listbox appariée? .
J'espère que ça aide ;)
Je recommanderais d'opter pour l'option A pour la simple raison qu'elle met clairement en évidence le rôle de chaque bouton et tient l'utilisateur informé des actions qu'il peut effectuer.
Dans l'option B, si vous voulez changer le bouton en fonction de la colonne sélectionnée, il est possible que les utilisateurs ne remarquent pas le changement dans l'action du bouton (je ne l'ai pas fait et la première réaction a été où se trouve l'option inverse). De plus, l'option B n'est pas intuitive, car vous cachez potentiellement les différentes fonctionnalités du bouton de déplacement qui ne sont révélées que lorsqu'une action est effectuée et les utilisateurs peuvent à première vue avoir l'impression que déplacer des éléments de la colonne 1 vers la colonne 2 est irréversible.
En ce qui concerne l'option A, je recommanderais de garder l'approche de la flèche droite à gauche désactivée lorsqu'il n'y a aucun élément dans la colonne de droite (et vice versa) et de l'activer dès qu'un élément est déplacé sur les colonnes comme cela informerait l'utilisateur qu'il peut basculer entre les colonnes. Le garder désactivé initialement est très bien car vous empêchez simplement une erreur d'amener l'utilisateur à essayer de déplacer le contenu d'une colonne vide.
Si vous envisagez l'option B, vous devez ajouter un repère visuel (par exemple "-------") de la position précédente dans la liste d'origine. Vous devez également vous rendre compte que ce séparateur ne sera plus visible si l'utilisateur défocalise l'élément dans la deuxième liste: la liste de gauche sera réinitialisée et le déplacement de l'élément entraînerait logiquement la mise à la fin (après l'élément quatre). Gardez à l'esprit que les éléments ne doivent pas perdre le focus lorsque vous cliquez sur le bouton.
Il faut se rappeler que le bouton doit avoir un état d'origine: si la liste de droite est initialement vide le choix est simple (>). Mais que se passe-t-il s'il y a des éléments dans les deux listes? C'est donc ce que je recommanderais: mettez les deux boutons mais lorsque les éléments sont focalisés/survolés/glissés masquez le bouton inactif ou changez la couleur du contour du bouton actif.
Donc ma réponse est faites les deux de manière interactive: le comportement doit s'adapter à l'utilisateur et non l'inverse.