Comment puis-je permettre aux utilisateurs d'associer facilement des éléments de longues listes?
J'essaie de créer une interface utilisateur conviviale qui permettra aux utilisateurs ayant peu ou pas d'expérience en informatique de créer des paires à partir de deux énormes listes (environ 2000 éléments chacune). Au-dessus de chaque liste, il y aura un champ de recherche (pas dans l'image) qui limitera les éléments affichés.
Je suis bloqué car je pense que ce n'est pas vraiment convivial. Moi, en tant que programmeur, je trouve ça facile.
Existe-t-il un meilleur moyen de présenter ces deux listes et de permettre à l'utilisateur de se connecter entre elles?
Règles simples: une fois qu'un élément est dans une paire, il ne peut plus être sélectionné. Il peut également être supprimé de la liste.
Cette interface utilisateur concerne une application Windows dans une machine avec une souris, etc. Pas pour les interfaces tactiles.
edit: Les deux listes contiennent du texte décrivant les examens médicaux, ce qui signifie qu'ils seraient très longs. Aussi comme Juan Lanus suggère, j'ai déjà ajouté des zones de recherche au-dessus des listes afin de permettre aux utilisateurs de filtrer les données.
Je serais tenté de modifier légèrement la mise en page pour éviter d'avoir beaucoup de colonnes:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Puisque vous avez mentionné que les utilisateurs de tout âge et de toute compétence d'utilisation de l'ordinateur devraient pouvoir utiliser cette interface utilisateur, voici une approche simple et intuitive que j'ai trouvée. Il utilise des icônes de flux suggestives, des textes de commande pour les instructions et il sépare visuellement les éléments des composants des éléments appariés.
D'après mon expérience, l'introduction de modèles d'interaction non conventionnels à des utilisateurs inexpérimentés peut parfois s'avérer très efficace. Regardez l'iPhone par exemple, tout était nouveau avec cela et il pourrait attirer des gens de tous types de groupes de discussion. Même les personnes n'ayant aucun intérêt pour les téléphones portables, autres que les appels, ont quand même trouvé l'usage et ont été envoûtées.
Par conséquent, considérant que ce sont des utilisateurs inexpérimentés, je voudrais suggérer d'utiliser quelque chose qui se rapporte plus au monde réel que ce que font trois listes individuelles avec un bouton d'action.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Il s'agit d'une solution qui utilise le glisser-déposer, un modèle d'interaction qui utilise une manipulation directe qui est une stratégie interactive très bien reçue pour les utilisateurs qui ne sont pas habitués aux représentations virtuelles. L'utilisateur extrait un élément de l'une des listes, laissant par exemple. silhouette derrière, l'autre liste s'allume (cueing dropability) et l'utilisateur la dépose sur un élément de l'autre liste. Lors de la chute, les éléments sont combinés en un seul élément dans la liste adjacente qui contient les éléments appariés, suggérant visuellement qu'ils sont désormais appariés.
Une autre fonctionnalité pourrait être que lorsqu'un élément associé est sélectionné, une action contextuelle pour libérer l'association pourrait être fournie, si vous incluez cette fonctionnalité, ce que j'espère que vous ferez.
Modifier: Une autre façon de dissocier/libérer des paires pourrait être d'utiliser la même action que de les coupler, en faisant simplement glisser la paire hors du conteneur de paires:
Vous pouvez obtenir le même résultat en affichant une seule liste à la fois.
Selon que le contenu de la liste est le même (je suppose que c'est le cas, mais vous ne l'avez pas précisé explicitement), le contenu de la liste affichée devrait - bien sûr - changer. Étant donné que l'utilisateur le fera très probablement toujours pas à pas ("localiser le premier élément", "localiser le deuxième élément", créer une paire), il n'y a aucun avantage à voir les deux listes en même temps.
Selon la probabilité qu'un utilisateur sélectionne un élément indésirable, l'étape suivante peut être invoquée soit lors de la sélection, soit via un bouton au bas de la liste.
Toutes les options semblent valides et je les implémenterais (presque) toutes.
1- Deux listes avec un filtre texte dans chacune pour que les utilisateurs puissent les raccourcir en tapant des données. IMO le filtre idéal trouve les caractères saisis partout où il apparaît dans l'élément de liste, par opposition à le trouver au stert du texte de l'élément ou au début des mots du texte de l'élément. De plus, si l'utilisateur tape deux mots (ou des mots partiels), le filtre recherche tous les éléments qui contiennent les deux morceaux de texte. Lorsque l'utilisateur tape le filtre raccourcit la liste après un court instant, c'est-à-dire qu'il n'est pas nécessaire que l'utilisateur clique sur un bouton "Rechercher". Comme les listes sont longues, les entrées de texte où l'utilisateur doit taper le texte de recherche doivent être positionnées à des emplacements fixes, comme lorsque l'on fige une ligne d'en-tête dans Excel.
2- L'utilisateur clique sur un élément dans une liste, puis sur un élément dans l'autre, et un bouton "créer une paire" s'allume. L'utilisateur clique dessus et une correspondance est faite!
3- L'utilisateur clique sur un iten dans une liste et double-clique sur un élément dans l'othar et la paire est faite.
4- L'utilisateur fait glisser un élément dans une liste, le balaye sur un élément de l'autre et dépose la paire dans la liste des macthes. S'il n'est pas en vue, il y aurait une cible "drop here", toujours visible, et si possible toujours positionnée au même endroit.
5- L'élément correspondant disparaît lentement des listes de sources. L'amimation signale à l'utilisateur où cherche-t-elle à la ramener là où elle est partie.
En tant que recommandation pratique, n'utilisez pas la saisie semi-automatique de l'interface utilisateur jQuery. Je l'ai essayé hier avec une liste de 1300 articles et cela prend trop de temps à afficher. L'année dernière, j'ai utilisé un autre contrôle, plus simple et plus réactif, dont je ne me souviens plus. Contactez-moi plus tard si vous voulez les informations.
J'ai fait face au même problème il y a quelques années. J'ai cherché après recherche à la recherche d'un bon moyen de le faire et j'ai finalement décidé de regarder les gens faire ce travail manuellement.
Ils parcouraient la liste A avec une règle une à la fois, puis faisaient défiler la liste B avec leur doigt jusqu'à ce qu'ils trouvent la meilleure correspondance. J'ai essayé de dupliquer ce processus avec l'interface utilisateur ci-dessous.
La mouche en haut est l'élément actuel dans la liste A. Les éléments sous l'en-tête sont les correspondances les plus pondérées de la liste B. Chaque colonne a été pondérée comme 100 pour la correspondance exacte en ignorant la casse, 80 pour les correspondances exactes en ignorant la casse et en supprimant tous les espaces, et 30 pour qu'une valeur soit entièrement contenue dans l'autre. Seuls les articles dont le poids est supérieur à zéro sont indiqués.
Appuyer sur l'un des boutons de correspondance vous déplacerait vers l'entrée suivante dans la liste A et supprimerait les deux entrées correspondantes de la liste A et de la liste B.
Comme mentionné ci-dessus, le bouton Annuler était requis. J'allais y aller très rapidement et puis je me rendais compte que j'avais appuyé sur le bouton de correspondance supérieur quand il ne correspondait pas.
Les couleurs indiquent le type de correspondance de chaque colonne. 