Sélectionner un élément d'une liste à ajouter à une autre liste
J'ai une application implémentée avec Java Swing. La vue principale des applications est divisée en un côté gauche et un côté droit. Le haut du côté droit contient un SearchField et une liste de recherche Les résultats sont affichés sous le champ. L'utilisateur recherche des éléments à l'aide de SearchField puis l'utilisateur sélectionne l'un des éléments des résultats de la recherche à ajouté dans la liste de gauche côté.
Considérez cela comme une application dans laquelle l'utilisateur "crée" une commande à partir d'articles trouvés lors de la recherche.
+------------------------+-----------------------+
| | SearchField |
| +-----------------------+
| | |
| | |
| | |
| List of | List of |
| added | matched |
| items | items |
| | |
| | |
| | |
+------------------------+-----------------------+
Comment l'utilisateur doit-il sélectionner l'élément dans les résultats de recherche et l'ajouter à la liste de gauche? Par défaut dans Java Swing lorsque j'ai une JList ou JTable les éléments sont sélectionnés lorsque l'utilisateur clique sur un élément . Il a été naturel qu'il y ait un bouton "Ajouter" pour chaque élément, je suppose. Mais je dois faire quelques contournements pour que cela fonctionne comme ça dans Java Swing. "Add "un élément en double-cliquant dessus fonctionnerait, mais ce n'est pas si intuitif. Sélectionnez un élément, puis appuyez sur Entrée.
Mais si j'avais implémenté cela comme une application Web, il aurait été naturel d'avoir un lien "Ajouter" pour chaque élément dans la liste des résultats de recherche.
Comment dois-je résoudre ce problème de convivialité? Est-il préférable d'avoir un bouton "Ajouter" pour chaque élément, ou existe-t-il une solution plus intuitive? Je pense que l'interface utilisateur aura l'air "en désordre" si chaque élément a un bouton par défaut, donc je suppose que je dois utiliser un bouton personnalisé plus discret si un bouton est la solution.
J'ai construit plusieurs de ces types d'interfaces. Je vous suggère, comme vous l'avez mentionné, d'avoir un bouton Ajouter sur chaque élément et un bouton Supprimer de la liste des éléments ajoutés.
Une autre option avec laquelle j'ai réussi est d'avoir des boutons entre les deux cases avec des flèches indiquant la direction du mouvement. De droite à gauche <- est Ajouter et de gauche à droite -> est Supprimer.
J'accepte qu'un double-clic ne soit pas détectable. Vous avez mentionné que cliquer sur un élément le sélectionne. Pourquoi ne pas placer un gros bouton "AJOUTER" en bas du panneau de droite, qui agira sur tous les éléments sélectionnés? Il peut être désactivé lorsqu'il n'y a pas de sélection et devenir activé une fois qu'un élément a été sélectionné. Appuyer sur Entrée peut être un raccourci clavier pour le bouton.
Le panneau de gauche peut avoir un bouton "Supprimer" fonctionnant de la même manière et placé au niveau du bouton AJOUTER.
BTW, à moins que cette interface soit pour un langage RTL, il me semble que la direction du processus de travail devrait être inversée - la source est généralement à gauche et la cible à droite.
De plus, je ne sais pas comment vous gérez cela en ce moment, mais juste au cas où - à mon avis, les éléments ajoutés ne devraient pas disparaître du panneau source (ce sont toujours les résultats de la recherche, ils ne vont nulle part ), mais il devrait y avoir une indication visuelle qu'ils ont été ajoutés.
Je suis d'accord avec Vitaly, les boutons d'ajout et de suppression deviennent naturels avec ce genre de tâche. Si vous souhaitez donner plus d'options à l'utilisateur, activez le glisser-déposer du champ de recherche vers la liste cible. Activez également la modification via les touches, le retour dans la liste de recherche ajoute, la suppression dans la liste construite supprime l'élément.
Au lieu de supprimer des éléments de la liste qui affiche les résultats de la recherche, une meilleure solution serait de les marquer (désactiver l'élément) de cette façon lorsqu'un utilisateur exécute une recherche qui inclut des éléments qui ont déjà été ajoutés à la liste, le résultat est le même comme précédemment mais les éléments déjà sélectionnés sont visibles. Sinon, deux recherches afficheraient deux résultats différents, ce qui pourrait distraire certains utilisateurs.
Vous pouvez même ajouter une case à cocher pour chacun des éléments dans les deux zones de liste. Et fournissez 2 boutons, Ajouter (Se déplace vers la liste sélectionnée) et Supprimer (Se déplace vers la liste non sélectionnée). Ce faisant, vous pouvez sélectionner plusieurs éléments à la fois dans l'une ou l'autre liste et les déplacer facilement. Vous pouvez le faire en utilisant une grille de données et en la stylisant pour ressembler à une liste si vous le souhaitez. J'espère que cela t'aides.
Soit dit en passant, j'ai développé une alternative qui affiche une zone de liste contenant uniquement les éléments sélectionnés, puis a un bouton sur le côté ou un moyen d'entrer dans une petite boîte de dialogue similaire à une ombre portée combobox. Dans la liste déroulante, il y a ensuite une liste d'options avec des cases à cocher à côté d'eux ainsi qu'une zone de texte de filtrage en haut. Ce modèle a bien fonctionné pour moi jusqu'à présent et déplace la modification de la liste sur une surface différente tout en permettant une vue simple des options sélectionnées à afficher uniquement sur la surface principale.
Cela fonctionne mieux dans les cas où vous devez avoir des multiples de ce type de contrôle dans une seule interface utilisateur ou si vous devez utiliser ce contrôle conjointement avec d'autres contrôles complexes sur une seule surface. Si votre exemple consiste à encapsuler le sélecteur dans sa propre boîte de dialogue, il est probablement plus facile d'utiliser le concept plus traditionnel listes doubles.