Meilleur modèle d'interface utilisateur pour permettre à un utilisateur d'affecter des éléments à des groupes
Problème: l'utilisateur a une liste d'environ 5 à 20 éléments non catégorisés et doit les classer en 2 à 4 groupes. La partie délicate est que le même élément peut être placé dans plusieurs groupes (il s'agit d'un cas Edge mais doit être pris en charge).
D'après ce que je peux voir, deux modèles de conception s'appliquent:
Glisser-déposer:
Fondamentalement, l'utilisateur dispose d'une liste d'éléments glissables qu'il peut ensuite regrouper en groupes inot
Le principal problème avec ce modèle est que, comme le même élément peut être placé dans plusieurs groupes, cela signifie qu'il ne s'agit pas vraiment d'une interaction de `` déplacement '', l'élément doit rester dans la liste non catégorisée pour que l'utilisateur puisse placez-le également dans une autre catégorie. Une autre conséquence de cela est que la liste non catégorisée ne se rétrécit jamais, il n'est donc pas immédiatement clair quels éléments de celle-ci ont été regroupés et lesquels ne sont pas affectés.
Voici une conception possible qui essaie de gérer les problèmes ci-dessus. Les éléments qui ont été attribués à des groupes apparaissent plus sombres. J'utilise également la couleur (point coloré correspondant à la couleur de l'étiquette du groupe) pour aider l'utilisateur à voir sous quel (s) groupe (s) l'élément a été placé.
Tableau des cases à cocher:
Une interface utilisateur de type tableau où chaque élément peut être affecté à un groupe en cochant la case de la colonne de ce groupe. Des cases à cocher plutôt que des boutons radio sont utilisées en raison de l'affectation de plusieurs groupes par exigence d'article. Voici un exemple:
Le principal inconvénient que je vois avec cette interface utilisateur est qu'il n'est pas immédiatement facile de voir quels éléments appartiennent à un groupe donné. De plus, il est un peu plus maladroit de déplacer des éléments entre les groupes une fois attribués (action en 2 étapes: l'utilisateur doit décocher une case et en cocher une autre). Cela peut être résolu en fournissant une liste séparée des éléments de chaque groupe à côté de l'interface utilisateur de la table d'affectation. Cette liste peut être non interactive ou prendre en charge le glisser-déposer pour déplacer des éléments entre les groupes. Exemple:
Pour être honnête, je ne suis pas complètement satisfait de l'une ou l'autre solution. Je me demande si quelqu'un a de meilleures idées ou améliorations à ce design?
Il s'agit plutôt de savoir si vous devez voir l'intégralité de la cartographie ou non. Si vous n'avez pas besoin de voir l'ensemble du mappage à la fois, il existe une autre possibilité.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Si l'intégralité de la cartographie est essentielle, votre meilleure approche consiste à utiliser une matrice qui permettra aux utilisateurs de visualiser l'intégralité de la cartographie.
Gardez à l'esprit que l'utilisation de l'interface utilisateur de glisser-déposer est agréable mais peut être fastidieuse s'il y a une action répétitive qui doit être effectuée par les utilisateurs - les cases à cocher peuvent rendre les tâches répétitives beaucoup plus faciles.
Beaucoup dépend du nombre d'articles et de groupes que vous attendez il doit y en avoir, ainsi que du nombre de personnes avec lesquelles vous allez travailler activement à la fois.
Si vous travaillez avec un grand nombre de groupes et d'éléments, la première option deviendrait inutilisable. Bien que j'aurais tendance à m'en éloigner même si le nombre était petit.
La deuxième option peut ne pas sembler sophistiquée, mais elle est à la fois simple à utiliser et à comprendre, tout en étant capable de bien s'adapter à un plus grand nombre d'éléments et de groupes. Je ne vois aucune faiblesse majeure de celui-ci autre que le fait que ce n'est pas une nouvelle façon de le faire. Mais c'est sa force.
La troisième option est une belle amélioration par rapport à la seconde, mais uniquement avec un faible nombre de groupes et d'articles.
Je suggérerais l'option 2 avec quelques modifications. Ajoutez la possibilité de trier par n'importe laquelle des colonnes (groupes) et d'avoir un panneau de résumé à droite qui montre dans quels groupes un élément se trouve lorsque cet élément est sélectionné.
Pourquoi ne pas combiner les deux? Utilisez l'affichage initial du second et autorisez les utilisateurs à cocher des cases. (La sélection de cases à cocher est beaucoup plus rapide et plus facile que le glisser-déposer, ce qui la rend supérieure à l'option 1.) Pour que l'utilisateur puisse facilement savoir quels sont les éléments d'un groupe donné en regardant la colonne, chaque case à cocher se transforme en bouton comme dès qu'il est vérifié. (Ce bouton peut ressembler à ceux que vous affichez à l'extrême droite de l'option 2b avec un x sur lequel vous pouvez cliquer pour supprimer l'élément du groupe et transformer le bouton en case à cocher non cochée.) Vous pouvez même le faire ainsi qu'un utilisateur est en mesure de cliquer et de faire glisser le bouton pour le déplacer entre les groupes dans un mouvement fluide, alors qu'il aurait toujours l'option intuitive mais légèrement plus lente de la désélectionner d'une colonne et de la resélectionner dans une autre à l'aide de cases à cocher.
Edit: Voici une maquette rapide de ce que je veux dire.
Je pense que les deux paradigmes ont un sens, mais pas lorsqu'ils sont présentés à la fois.
Comme question de suivi: avez-vous besoin d'accomplir cette activité sur une seule page? (par exemple, fait-il partie d'un formulaire?)
Si cette tâche fait partie d'une expérience de gestion des éléments qui est au cœur du produit, je recommanderais une approche de deux pages comme celle utilisée dans iTunes pour la liste de lecture et Google+ pour les cercles.
Sur la page "liste des éléments", l'utilisateur peut voir une liste de tous les groupes existants et peut faire glisser et déposer des éléments dans ces groupes. Chaque groupe peut afficher le nombre d'éléments qui ont été ajoutés. Vous pouvez ensuite étiqueter chaque élément avec le nombre de groupes auxquels il a été ajouté, lorsqu'un élément est sélectionné, le ou les groupes auxquels il appartient peuvent être mis en surbrillance.
Lorsqu'un groupe est sélectionné, la structure de la page change pour différencier clairement les éléments qui se trouvent dans et hors du groupe sélectionné. Les éléments qui sont hors du groupe peuvent ensuite être glissés ou sélectionnés pour les déplacer dans le groupe sélectionné.
Que diriez-vous de montrer des groupes avec une liste de sélection capable de "suggestion automatique". Ces groupes pourraient en outre être placés dans une grille réactive (organiser selon vos règles de mise en page).
Vous pouvez également afficher les éléments sélectionnés dans un nuage de tags comme un composant comme le groupe # 3
Quelle est la tâche principale?
- Affectation d'éléments à un groupe
- Comparaison des groupes
- Déplacer des éléments entre des groupes
- Autre chose?
Je pense que # 1 est mieux supporté par glisser-déposer. Un bon exemple de cela dans la pratique est google + cercles . Les # 2 et # 3 sont probablement mieux pris en charge avec la grille de cases à cocher illustrée ci-dessus ou une certaine variation de ce concept, bien que je pense qu'il pourrait y avoir des problèmes de surcharge d'informations avec un grand nombre d'éléments ou de groupes. Cela pourrait être plus ou moins un problème en fonction de la fréquence d'utilisation pour le groupe d'utilisateurs cible. Comme d'autres l'ont dit, j'éviterais de combiner des modèles et je resterais avec celui qui prend le mieux en charge la tâche principale.
Je suggère une variante de votre deuxième option, mais ne montrez qu'un groupe à la fois pour minimiser la confusion de l'utilisateur. Dans de nombreux cas, le glisser-déposer ajoute simplement plus de travail à l'utilisateur lorsqu'une méthode plus simple existe.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Dans la maquette ci-dessus, le groupe est sélectionné dans la liste déroulante et les cases à cocher changent dynamiquement en fonction du groupe sélectionné. Notez que le bouton d'enregistrement est au-dessus de la sélection de groupe pour indiquer qu'il enregistrera tous les groupes plutôt qu'un seul. La sélection du groupe dans une liste déroulante rend également ce modèle beaucoup plus évolutif, quel que soit le nombre de groupes.
Si vous effectuez cette opération pour une interface Web, vous pouvez l'utiliser comme une solution progressivement améliorée, la solution de rechange étant tous les groupes affichés en même temps, l'un au-dessus de l'autre.
Il faut tenir compte de la taille physique du travail que vous utiliserez. Si cette tâche est répartie sur tout l'écran, le glisser-déposer devient un problème. Quelques systèmes sur lesquels j'ai travaillé ont maintenu les boutons de la souris enfoncés tout en faisant glisser longtemps (les commentaires ont dit long), les distances ont conduit à de nombreuses erreurs lorsque les doigts se sont levés avant qu'ils n'aient dû. Si le glisser-déposer est un clic, un léger tour de poignet, une chute, la plupart des gens le manipuleront facilement, même les personnes âgées avec des problèmes de mouvement.
La case à cocher est une excellente idée pour presque toutes les tailles de grille et convient mieux aux utilisateurs qui souhaitent utiliser des claviers plutôt que des souris.
Comme d'habitude, la suggestion d'une combinaison des deux méthodes gagnerait mon vote car elle fournit une solution à la plupart des utilisateurs. Le développement devient un peu plus long mais ce n'est pas la préoccupation de votre utilisateur.
Les réponses semblent toutes reposer sur la prise d'un élément et son affectation à un groupe. Je ne comprends pas l'importance relative de l'élément et du groupe, mais est-il sensé d'utiliser le groupe comme source principale et de "tirer" les éléments de la liste dans le groupe, puis de passer au groupe suivant.