Qu'est-ce qu'une interface HTML intuitive pour sélectionner des éléments d'une liste dans plusieurs sous-ensembles?
J'ai une liste d'éléments dont certains iront dans un nombre indéterminé de sous-ensembles. Un élément peut appartenir à au plus un sous-ensemble. Un élément peut ne pas se retrouver dans un sous-ensemble.
C'est facile s'il y a toujours au plus 1 sous-ensemble. Cela rend la tâche plus difficile, car il pourrait y en avoir plus (jusqu'au nombre d'articles dans la liste). Quelqu'un peut-il me montrer un bon exemple?
Modifier: Pour simplifier, l'utilisateur se verra présenter une longue liste d'éléments. L'utilisateur voudra en regrouper certains en groupes distincts. Chaque élément de la liste peut ou non être groupé. Si un élément est placé dans un groupe, il ne peut pas être placé dans un autre groupe. (Ou dit autrement, un élément de la liste ne peut être que dans zéro ou un groupe).
L'exemple le plus courant de ce que vous décrivez est un système de fichiers.
On dirait que vous décrivez quand je sépare mon linge en piles. J'ai un tas de vêtements qui veulent mettre du blanc, du noir et des couleurs. Pour ce faire, j'ai 3 piles et je prends un objet à la fois et je l'ajoute à une pile.
Ce processus de réflexion est quelque peu délicat à représenter sur une page Web, mais je pense que Google Plus le fait très bien. Vous avez effectivement deux moitiés d'écran. La moitié contient la liste des éléments qui ne font pas actuellement partie d'un groupe. Il devrait être possible d'en sélectionner plusieurs et de les désélectionner un à la fois (l'option "resélectionner" proposée par Google+ est une fonctionnalité de sauvetage!). Vous pouvez ensuite les faire glisser vers l'autre moitié de votre écran vers les groupes et au-dessus du groupe dans lequel vous souhaitez les placer. Il doit y avoir suffisamment de commentaires sur le survol pour être sûr que la tâche sera exécutée correctement.
Cela fonctionne bien dans des circonstances où il y a assez peu de groupes pour qu'ils puissent être affichés dans une partie d'un écran. Par exemple. Cercles dans Google+ pour la plupart des gens.
Avec cette approche, votre utilisateur sait quels éléments n'ont pas encore été affectés à un groupe. Donc, cet aspect des choses devrait bien fonctionner.
Dans l'ensemble, Google+ est un excellent exemple. Mais c'est une interface utilisateur difficile à réussir parfaitement. Bonne chance!
Utilisez une interface glisser-déposer pour permettre de trier les éléments dans des listes distinctes
Avec le plugin jQuery UI Sortable , utilisez une liste non ordonnée par sous-ensemble et liez tous les sous-ensembles, comme indiqué dans cette démo:
(J'ai ajouté les en-têtes à la maquette ci-dessus, mais sinon le code est exactement le même que la démo de l'interface utilisateur jQuery.)
Il s'agit d'une version `` pauvre '' de l'interface Google+ Circles, mais elle est un peu plus facile à mettre en œuvre et les utilisateurs seront probablement plus familiers avec elle (jusqu'à ce que davantage d'utilisateurs aient expérimenté Google+, au moins). Il existe quelques approches pour la mise en œuvre:
- Mettez tous les éléments dans le sous-ensemble 1 pour commencer, puis invitez l'utilisateur à `` glisser-déposer les éléments dans les bons groupes ''.
- Triez au hasard les éléments en plusieurs sous-ensembles, puis incluez la même instruction.
- Placez tous les éléments au-dessus des sous-ensembles dans un groupe "non trié" et invitez l'utilisateur à les trier (ce que Google+ fait avec l'interface Cercles):
Dans chaque cas, assurez-vous de colorer les cibles de dépôt pour les rendre très évidentes (y compris éventuellement le texte `` déposer ici '' lorsque le sous-ensemble est vide), et envisagez d'omettre complètement le widget glisser-déposer si le visiteur utilise un écran tactile.