Quels sont les bons modèles d'interface utilisateur pour sélectionner exactement deux éléments dans une liste?
Dans un logiciel de bureau, j'ai environ 20 articles.
Ces éléments doivent être affichés dans une liste, qui tient sur l'écran.
L'utilisateur doit être en mesure de sélectionner exactement deux éléments dans la liste, puis, un résultat semblable à un diff est affiché dans un contrôle utilisateur à côté de la liste.
Quels modèles serait agréable à utiliser ici, afin que le nombre d'actions nécessaires pour sélectionner deux éléments soit minimisé?
MODIFIER
En raison de la résonance et des questions posées dans les commentaires, voici un peu de contexte.
Le programme consiste à comparer les arbres.
Dans mon cas, l'utilisateur sélectionne généralement des éléments aléatoires, mais j'aimerais avoir une bonne solution pour les deux cas, sélectionner deux éléments aléatoires ou conserver un élément sélectionné et changer l'autre élément.
Les éléments eux-mêmes représentent les arbres, cependant une balise courte est disponible pour chaque élément qui serait affiché dans la liste.
Pour le diff, les deux arbres peuvent être affichés côte à côte, où les nœuds manquants dans l'autre arbre sont mis en évidence, par exemple comme ceci:
Le programme sera utilisé par les informaticiens du monde universitaire, donc les personnes âgées ou les enfants ne sont pas préoccupants.
deux rangées de boutons radio comme par ex. sur le wikipedia http://en.wikipedia.org/w/index.php?title=Wikipedia&action=history
Vous pouvez utiliser une zone source (liste d'éléments) et une zone cible (zone de dépôt), vers lesquelles l'utilisateur peut faire glisser des éléments de la liste.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
La zone de dépôt doit indiquer clairement combien d'articles doivent y être placés. Je suggère d'utiliser un message texte qui souligne le nombre d'éléments restants, c'est-à-dire le nombre en premier, ou sinon dans une taille plus grande, en gras ou en surbrillance dans une couleur différente du reste (donc il est facilement numérisable). En outre, vous souhaiterez peut-être donner un indice visuel, comme des rectangles en pointillés sous la forme des éléments source dans la zone cible.
Un pictogramme entre les zones source et cible comme une flèche, une main stylisée qui fait glisser quelque chose ou similaire peut impliquer l'action requise par l'utilisateur.
Vous donnez la liste entière sur le côté gauche. Une fois le premier élément sélectionné, affichez l'élément sélectionné dans la fenêtre supérieure droite.
Une fois que le deuxième élément est sélectionné, vous pouvez montrer la comparaison entre les deux.
Modifié
Liste des composants (collection de nœuds)
Case A (Pour Node A)
Case B (Pour Node B)
En passant la souris sur n'importe quel nœud, affichez l'option de sélectionner A ou B (peu importe que le nœud soit sélectionné ou non, le menu coulissant de droite demandera les deux options)
Cerise sur le gâteau, vous pouvez afficher un aperçu de l'arborescence dans la case correspondante dès que l'utilisateur survole A ou B.
Une fois le nœud sélectionné, affichez l'étiquette par rapport à l'élément.
Si vous voulez une sélection de deux éléments pour diffing, je pense que vous pouvez considérer WinMerge comme une bonne inspiration:
- Si vous êtes à l'intérieur de l'application et cliquez sur l'icône "Ouvrir", une boîte de dialogue avec deux zones de texte pour entrer les fichiers gauche et droit sera lancée:
WinMerge s'intègre également à l'Explorateur Windows et place une entrée "WinMerge" dans le menu contextuel contextuel du bouton droit de la souris:
Si vous sélectionnez zéro fichier et cliquez avec le bouton droit sur> WinMerge, il s'ouvrira avec cette boîte de dialogue ayant le champ "Gauche" avec le chemin du répertoire actuel, laissant le champ "Droite" vide, en espérant que vous y entrez un chemin de répertoire.
Si vous sélectionnez un seul fichier/dossier et cliquez avec le bouton droit sur> WinMerge, il s'ouvrira avec cette boîte de dialogue ayant le champ "Gauche" avec le chemin d'accès du fichier/dossier sélectionné, laissant le champ "Droite" vide, en espérant que vous entrez un chemin de fichier/dossier là-bas.
Si vous sélectionnez deux fichiers/dossiers et cliquez avec le bouton droit sur> WinMerge, la boîte de dialogue ne sera pas affichée, car elle n'est pas nécessaire, et les fichiers/dossiers gauche et droit sont chargés directement dans la fenêtre principale pour diffing.
Si vous sélectionnez plus de deux fichiers/dossiers et faites un clic droit, l'option WinMerge sera simplement désactivée car elle n'a aucun sens.
Pour votre cas spécifique, je pense que je le mettrais en œuvre comme ceci:
Un formulaire avec une liste et un bouton "Diff"
Si l'utilisateur sélectionne exactement deux entrées, le bouton est activé et exécute la différence.
Sinon, le bouton est désactivé et grisé, ne faisant absolument rien.
- Les outils de diff sont généralement alignés verticalement: élément 1 à gauche, élément 2 à droite.
- Qu'est-ce qu'un "comparer"? Quant à moi, c'est quelque chose comme "sélectionner le premier élément" puis le comparer avec les autres. Une fois que le nouvel élément est meilleur, je passe à lui et une autre itération commence.
- Je serai probablement intéressé à marquer certains articles que j'aime et à comparer uniquement ces articles.
- Lorsque l'écran est ouvert, l'élément 1 et l'élément 2 sont déjà sélectionnés
Cela peut donc ressembler à ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Sélecteur d'articles:
Je combinerais ici les deux réponses existantes.
Ils sont tout les deux très bien; mais la liste glisser-déposer :
- Le concept de deux éléments distincts est perdu car les éléments sont simplement ajoutés à un groupe amorphe de 2.
- La modification de la sélection nécessite la suppression explicite d'un élément existant. Ce serait un défi d'éliminer cette étape (par exemple, vous pouvez passer à un élément existant pour le modifier, bien que l'effet ne soit pas immédiatement évident la première fois que vous le faites, et vous devez décider si vous souhaitez traiter une sélection de un élément en tant que cas spécial - remplacez l'un des éléments lors de la suppression ou ajoutez toujours un second.)
La boîte de dialogue de style WinDiff :
- Nécessite l'étape triviale et familière, mais toujours existante, d'élargir une liste déroulante, probablement de hauteur limitée (par conséquent, un défilement peut être nécessaire), pour chaque élément.
Une simple combinaison des deux serait quelque chose comme (pardonnez mon mspaint), où vous faites glisser de la liste vers l'une des deux cases distinctes à droite:
Une modification pourrait être de permettre également à l'utilisateur de double-cliquer sur une sélection dans la liste pour la placer dans la première case libre à droite/la dernière case cliquée à droite (seul l'utilisateur peut finir par combattre ce système mais combiné avec le glisser, cela pourrait être un bon raccourci "utilisateur avancé", lorsque l'utilisateur est sûr de ce qu'il veut mettre dans les cases).
Une autre option, minimisant le nombre de clics, consiste à faire un clic gauche placer la sélection dans une case et un clic droit placer la sélection dans l'autre case. Cependant, vous aurez peut-être besoin d'instructions à l'écran pour cela, car l'utilisation du clic droit pour sélectionner n'est pas particulièrement intuitive (et pas conviviale pour l'écran tactile non plus). Edit: Mais conception de Dinesh est une bien meilleure variation de cela.
Je ferais quelque chose comme ce qui suit. Autorisez simplement l'utilisateur à choisir un élément dans la liste, puis cliquez sur la flèche dans la case dans laquelle vous souhaitez qu'il entre (si quelque chose est déjà là, il sera remplacé). De plus, mettre la liste au milieu et les détails de chaque côté lui donne une disposition beaucoup plus propre et plus simple à mon avis. Je l'ai fait dans de nombreux scénarios différents.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je resterais simple: deux listes déroulantes. Avoir 20 éléments dans une liste est de toute façon une bonne raison d'utiliser une liste déroulante.
Les listes pourraient désactiver les éléments déjà sélectionnés s'il n'est pas logique de comparer les éléments avec eux-mêmes.
Que diriez-vous quelque chose comme ça? Je pense que cela peut fonctionner assez bien pour le bureau et le mobile et qu'il utilise également moins d'espace d'écran. Cela s'adapte également bien à plus de deux options.
Aucun élément sélectionné. À côté de votre liste d'options, il y a une liste de "jetons" qui servent d'indicateur visuel du nombre d'options que vous devez sélectionner.
n seul élément sélectionné. Lorsqu'une des options est sélectionnée, son cercle est mis en surbrillance et l'un des jetons est supprimé. L'élément peut être désélectionné, auquel cas le jeton reviendrait à sa position initiale.
Les deux éléments sélectionnés. Tous les jetons sont utilisés et les deux options sélectionnées sont mises en surbrillance.
Une bonne chose à implémenter serait de permettre aux jetons qui sont déjà affectés à des éléments d'être cliqués et glissés vers un autre élément, pour permettre à la sélection d'être modifiée plus facilement.
Voici une démo en direct pour montrer à quel point c'est facile à utiliser.
Rester simple et convivial est probablement une bonne idée, donc j'utiliserais quelque chose comme ceci:
Il a des instructions concises mais faciles à comprendre en haut, et c'est assez évident ce que vous devez faire. Voici à quoi il ressemble lors de l'interaction avec lui:
Vous pouvez également désélectionner des éléments en cliquant à nouveau dessus. Pour voir à quel point cela est facile à utiliser, vous pouvez essayer la démo liée en haut de ce post.