Meilleure façon de sélectionner un sous-ensemble d'éléments dans une longue liste
Un de nos clients souhaite que nous construisions une application web pour partager des informations sur les magazines qu'il publie. Chaque édition d'un magazine contient un nombre variable d'annonceurs. Ces annonceurs proviennent d'un pool central d'annonceurs. Ce pool contient (actuellement) environ 150 annonceurs. Chaque édition d'un magazine contient un sous-ensemble (environ 70 à 80) de ces annonceurs.
Notre client veut que nous trouvions un moyen pour lui d'ajouter 70 à 80 annonceurs de cette liste de 150 à une édition d'un magazine. Il doit être aussi rapide que possible, aussi simple que possible et aussi intuitif que possible.
Quelle serait la solution idéale ici? Je pensais à quelque chose dans les lignes de l'image ci-dessous.
- Liste des annonceurs disponibles.
- Liste des annonceurs sélectionnés. Les annonceurs disposent d'un bouton Supprimer.
- Zone de texte avec suggestion automatique pour les annonceurs dans la liste de gauche. <Entrée> supprime l'annonceur de la liste de gauche et l'ajoute à la droite. La zone de texte est effacée et reste concentrée.
Mes collègues ont suggéré le glisser-déposer ou une seule liste avec une case à cocher pour chaque annonceur, mais ces approches obligent l'utilisateur à faire beaucoup de recherches et de clics. Avec mon approche, l'utilisateur peut simplement continuer à taper.
D'autres suggestions pour cette situation?
Votre design Kristof est déjà assez bon. Vous avez cloué des choses très importantes telles que l'arrêt de la quatrième et dernière action de la souris et du clavier - cela va ruiner l'expérience. Et je suis avec vous sur le glisser-déposer - yuk!
Je viens d'affiner un peu ton idée:
- De toute évidence, les clics de souris sur les éléments de gauche les ajouteront à droite.
- Vous souhaitez que le filtre de texte soit de style Google, c'est-à-dire. multi-Word, correspondance partielle. Comme dans l'entrée de recherche, "rce bm" correspondrait au troisième élément indiqué dans le diagramme. C'est facile à faire et donne à l'utilisateur un moyen puissant et intuitif de rechercher des noms. Le filtrage de second ordre (comme le début de chaîne) ne fera que frustrer les utilisateurs et les dissuader de les réutiliser. Étant donné que le filtrage est si critique pour l'interface, il vaut mieux qu'il fonctionne bien.
- Une autre façon de gagner du temps pour l'utilisateur (comme quelqu'un l'a suggéré) serait d'avoir une liste partiellement remplie du côté "annonceurs sélectionnés". Si vous pensiez qu'il y avait de fortes chances que les "10 premiers annonceurs les plus utilisés" obtiennent un hit de 70% ou plus, alors pourriez-vous aussi les vider dans la liste de droite lors du chargement, n'est-ce pas? Dans le pire des cas, l'utilisateur doit supprimer un ou deux (1 clic de souris chacun) des 10 premiers et les 7 éléments restants qu'ils veulent les ont sauvés en les recherchant. Ajustez les chiffres de cette idée pour soulager l'utilisateur de plus de travail.
Rappelez-vous: plus de travail vous peut faire pour l'utilisateur; pour réduire leur nombre de clics, de recherche et de recherche, plus votre interface sera rapide, facile et agréable.
Je travaille pour une entreprise qui publie des magazines, donc je connais un peu votre domaine.
J'imagine que la liste des annonceurs ne change pas grand-chose d'un problème à l'autre, je voudrais donc que les annonceurs du numéro précédent soient sélectionnés par défaut.
Comme vous n'avez que 150 annonceurs et qu'environ la moitié d'entre eux seront sélectionnés, je ne m'embêterais pas avec une recherche. Je voudrais commencer par une simple liste de cases à cocher et voir comment cela fonctionne. Assurez-vous que les éléments sélectionnés sont visuellement distincts (par exemple, mettez-les en gras) afin de faciliter la numérisation.
Mon premier post, alors soyez gentil et je ferai de même :-)
Bien qu'il y ait de bonnes idées ici, je ne pense pas qu'elles répondent tout à fait aux exigences de l'affiche originale:
"Notre client veut que nous trouvions un moyen pour lui d'ajouter 70-80 annonceurs de cette liste de 150" - Kristof Claes .
Je suis certainement d'accord avec de nombreuses idées astucieuses dans lesquelles les utilisateurs seraient en mesure de filtrer les résultats et de les ajouter à la liste Annonceurs sélectionnés , nous avons encore besoin d'un moyen à ajouter en masse environ 70 annonceurs à la sélection. Bien que les idées de filtrage soient assez bonnes, elles conduiraient simplement à une application semblable à n'importe quelle application de messagerie électronique dans laquelle l'utilisateur spécifie les destinataires dans le champ "à". Imaginez devoir ajouter 70 destinataires à la main!
Idéalement, nous ne souhaiterions pas le workflow suivant:
- Type de phrase à rechercher
- (Les résultats apparaissent)
- Utilisez soit appuyez sur Entrée pour l'élément complété automatiquement, soit sélectionnez un ou plusieurs éléments dans la liste qui apparaît.
- Répétez les étapes 1 à 3 jusqu'à ce qu'environ 70 annonceurs aient été ajoutés
Je vois ici de bons articles de nombreuses personnes qui connaissent vraiment leur métier, mais je pense que certains sont peut-être allés hors sujet et se concentrent quelque peu sur les technologies de mise en œuvre plutôt que sur la psychologie d'une bonne "conception d'interface utilisateur".
Ma dernière pensée à ce sujet est - peut-être une sorte de mécanisme pour ajouter des "groupes" à la sélection car cela réduirait certainement la répétition du même flux de travail 70 fois. Certains logiciels que j'ai vus sélectionneront des annonceurs dans une approche "round robin". Cela pourrait certainement aider une partie de la sélection; en outre, vous pourriez avoir des groupes prédéfinis que vous voudrez peut-être toujours ajouter, peut-être une liste de vos meilleurs annonceurs payants ou des publicités pour des produits qui sont "nouveaux".
Et maintenant, quelque chose de légèrement hors sujet ...
Matty, je vois que vous avez mentionné Apple et en particulier l'iPhone -
... nous pouvons apprendre de l'iPhone ... la clé est de faire des hypothèses raisonnables qui se produisent dans les décisions prises pour l'utilisateur ...
Je ne sais pas trop ce que vous entendez par là après notre conversation de l'autre jour. Non seulement les appareils tactiles sont peut-être moins utilisables, mais Apple a généralement un historique de création de logiciels qui vous fait vous demander ce qu'ils pensent vraiment de leur base d'utilisateurs. Un excellent exemple - si vous souhaitez renommer votre appareil iPad, vous devez d'abord le connecter à un ordinateur qui dispose en plus du logiciel iTunes. Pourquoi diable, je ne peux pas simplement entrer dans les paramètres généraux de l'iPad, c'est à deviner.
Les meilleures interfaces utilisateur sont du style - "conception d'interface utilisateur inductive", par opposition à - "conception d'interface utilisateur déductive" ou en d'autres termes - "essais et erreurs". Les appareils tactiles appartiennent à cette dernière catégorie. Laisse-moi expliquer:
Si quelque chose touche les appareils rendus populaires par Apple comme dans le iTouch, iPhone, et maintenant le iPad ont si quelque chose est lancé la convivialité du logiciel dans l'âge de pierre des "interfaces utilisateur déductives". Comme un glyphe très mal conçu sur un bouton, laissant penser à l'utilisateur - " mon Dieu, qu'est-ce que cela signifie?", en regardant l'écran d'un appareil tactile, ce n'est pas immédiatement apparent qu'en utilisant deux doigts, l'utilisateur peut effectuer un zoom avant ou arrière; ou mon préféré - le fait de maintenir votre doigt vers le bas et une icône pendant environ deux secondes met l'appareil en "mode de suppression".
De la même manière qu'une icône mal conçue tombe dans la catégorie - " Je ne sais pas ce que cela signifie, mais après l'avoir utilisé pour la première fois, je me souviendrai généralement de ce qu'il fait ", de nombreux appareils tactiles entrent dans la catégorie des interfaces utilisateur déductives car l'utilisateur doit déduire ce que le programme peut réellement faire en" jouant avec lui "réduisant ainsi sa convivialité immédiate.
Continue le bon travail!
La liste entière des annonceurs devrait avoir un filtrage au-dessus ( essentiellement mettre votre "3" au-dessus de votre "1" et avoir "3" dynamiquement le contenu de "1" ):
- Recherche (à la volée rétrécit la liste)
- Groupes ("Dernière utilisation", "Mode", "Electronique", etc.)
Remarque - si votre recherche est suffisamment puissante, vous ne pouvez utiliser qu'un seul contrôle. Par conséquent, la recherche de "mode" renvoie tous les annonceurs qui ont "mode" dans leur nom ou qui ont été marqués comme appartenant à la catégorie "mode".
La "Dernière utilisation" peut être une case à cocher.
Principal avantage:
Réduire la liste à la volée vous permet de sélectionner tous les éléments pertinents ensemble et de les déplacer.
Exemple: vous tapez "électronique", obtenez une liste de tous les annonceurs liés à l'électronique, vous les sélectionnez tous (avec la souris, ctrl + A ou toute autre méthode) et les déplacez immédiatement vers la bonne liste.
J'ai cette interface utilisateur qui pourrait être pertinente.
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
Cela pourrait être utile si les annonceurs étaient organisés d'une manière ou d'une autre en catégories, et si l'utilisateur savait dans quelle catégorie se trouvait chacune.
Il s'agit d'une interface utilisateur uniquement pour la souris, nécessitant un seul clic par annonceur.
Il peut être utilisé avec le clavier, mais le menu se ferme et doit être à nouveau développé pour chaque sélection. Cela peut être résolu en ne fermant pas le menu en entrant.
Je dois être d'accord avec Micky Duncan : Je pense que la recherche/le regroupement/le filtrage ne conviennent pas du tout à cette tâche.
Vous ne voulez pas rechercher et sélectionner quelques éléments dans une grande liste. Vous souhaitez sélectionner environ la moitié de tous les éléments de la liste. Si l'utilisateur doit sélectionner la moitié des éléments, l'utilisateur voudra s'assurer qu'il a sélectionné tous les candidats et qu'il n'a manqué personne. Le flux de travail ressemble donc davantage à ce qui suit:
Imaginez que vous ayez la liste des 150 annonceurs sur papier. Vous parcourez la liste de haut en bas et décidez pour chacun "est-ce que je veux cet annonceur?" Et puis cochez ou grève -à travers et à la fin, vous êtes sûr que vous les avez tous évalués.
Le design devrait donc être comme ceci:
L'accent est mis sur l'élément supérieur de la liste du milieu et l'utilisateur peut utiliser les touches fléchées gauche et droite pour supprimer l'élément ou le placer dans la liste sélectionnée. Ainsi, il peut rapidement parcourir toute la liste en appuyant sur la gauche ou la droite selon l'annonceur et est sûr qu'il a réfléchi à chacun et n'en a raté aucune.
On dirait que votre solution est plutôt bonne. Je supprimerais la liste de gauche car elle n'ajoute pas vraiment d'informations (c'est juste une longue liste, et il va être difficile de dire que quelque chose s'est évaporé après avoir appuyé sur Entrée) et propose simplement un champ de recherche avec saisie semi-automatique ( bien qu'il devrait y avoir une liste déroulante dans ce champ pour que les utilisateurs puissent toujours voir quelles options sont disponibles) et ajouter un gros bouton "Ajouter un annonceur à la liste" au cas où vos utilisateurs ne sauraient pas appuyer sur Entrée.
Obtenez cela au stade de prototype fonctionnel dès que possible (en utilisant des données fictives), puis faites-en la démonstration avec votre client et faites-le exécuter. Il est essentiel d'obtenir leurs commentaires dès que possible, car ce seront eux qui les utiliseront fréquemment et ils doivent donc se sentir à l'aise avec.
Je suis d'accord avec les points soulevés par MickyD et Patrick . Tout dépend de la façon dont la sélection des annonceurs est effectuée. Le client utilisera-t-il l'interface utilisateur pour sélectionner les annonceurs qui devraient être dans un problème spécifique ou le client a-t-il déjà une liste avec les annonceurs dans le problème spécifique. Je ne pense pas que le filtrage soit la meilleure solution dans les deux cas.
Si le client utilise l'interface utilisateur pour sélectionner les annonceurs, cela devrait fonctionner beaucoup mieux pour simplement présenter une liste avec un état coché/décoché. Comme Patrick l'a écrit, c'est une bonne idée de faire ressortir l'état sélectionné. Il est également possible de rendre plus clair l'état non sélectionné plutôt que de simplement mettre en gras l'état sélectionné. Le client se déplace dans la liste en utilisant la touche haut/bas et en cochant/décochant en utilisant l'espace (ou une clé similaire).
Si le client a une liste avec les annonceurs apparaissant dans le problème spécifique, la première approche devrait être de vérifier si cette liste pourrait être reçue sous forme numérique et automatiquement importée. Si cela n'est pas possible, la liste est peut-être triée d'une certaine manière, puis l'interface utilisateur doit trier les annonceurs de la même manière.
La troisième option est que le client examine le problème à la recherche d'annonceurs ou qu'il dispose d'une liste non triée. Dans ce cas, il est logique d'avoir une fonction de filtre.
Le fait est que sans connaître l'objectif et les circonstances entourant la tâche, il peut être très difficile de fournir une bonne solution.
J'utiliserais deux listes et deux boutons. L'utilisateur peut marquer des éléments simples dans la liste de gauche avec un clic de souris, un double clic déplacera l'élément vers la liste de droite.
Il peut cliquer-déplacer, cliquer sur marquer une plage, et avec le bouton [>] transférer tous les éléments marqués vers la droite. Avec Ctrl, un seul élément peut passer de l'état marqué à l'état non marqué et inversement.
Ctrl-a marquerait tous les éléments. Tout est connu des autres interfaces du programme.
Les éléments triés par ordre alphabétique faciliteraient la recherche d'une entrée, le premier caractère pourrait être utilisé comme raccourci pour accéder à cette entrée, si le défilement est nécessaire.
> afoo ifoo
bfoo jfoo
cfoo kfoo
> dfoo lfoo
> efoo mfoo
> ffoo
gfoo
hfoo
[ < ] [ > ]
{a, d, e, f} foo est maintenant marqué sur la gauche. Avec [>], l'utilisateur les déplace vers la droite.
Ces interfaces sont assez rapides, faciles à utiliser et faciles à comprendre. Vous pouvez peut-être ajouter une info-bulle ou nommer les boutons "déplacer vers la liste des éléments sélectionnés" et "supprimer de la liste des éléments sélectionnés".
Après être passé à une autre liste, cette liste doit être utilisée.