sélectionner plusieurs éléments dans une courte liste et marquer l'un d'eux comme "leader"

Question

Plusieurs formulaires de notre application Web B2B permettent aux utilisateurs de choisir plusieurs éléments dans une courte liste d'éléments. Voici un exemple:

Maintenant, je dois trouver un modèle pour permettre aux utilisateurs de choisir un élément "leader" parmi les éléments sélectionnés, où le "leader" est un élément qui est spécial en quelque sorte. Par exemple, dans la liste des itinéraires et des chauffeurs ci-dessus, les utilisateurs doivent sélectionner le chauffeur qui sera "en service" pour déverrouiller l'entrepôt le matin.

Qu'est-ce qu'un bon UX pour permettre ce genre de sélection? Toute solution doit être compatible avec l'iPad, donc ne peut pas se fier entièrement au comportement de survol de la souris ou au glisser-déposer.

Sélection de plusieurs éléments, puis sélectionné un par défaut est un problème similaire, mais ces solutions seraient exagérées pour mon cas beaucoup plus simple car nos listes sont toujours plus courtes que 20 éléments, nous n'avons donc pas besoin de vous inquiétez de la pagination, du filtrage, de la recherche, etc.

J'ai essayé quelques options jusqu'à présent, dont aucune ne me satisfait:

• Ajout d'une liste déroulante au-dessus ou en dessous de la grille pour choisir l'élément "leader". Cela semble découvrable, mais semble inélégant de dupliquer deux fois la même liste. Cette option nécessite également l'ajout d'interface utilisateur dans la grille pour indiquer quelle ligne est la ligne "leader", ce qui oblige les utilisateurs à mapper conceptuellement entre les deux listes et à comprendre pourquoi l'une affecte l'autre. Semble complexe.
• Ajout d'une colonne de boutons radio. Il s'agit d'une utilisation techniquement précise des deux contrôles d'entrée, d'un bouton radio et d'une case à cocher dans la même ligne semble très déroutant. De plus, ça a l'air vraiment bizarre!
• Remplacement des cases à cocher par un curseur à 3 étapes. Ceci est également techniquement précis, mais les paramètres "inclus" et "leader" ne se sentent pas nécessairement comme un continuum pour certains des cas d'utilisation où nous utiliserons ce modèle.
• Remplacement des cases à cocher par des listes déroulantes (par exemple, choix de "hors service", "en service", "leader"). C'est découvrable, mais chaque changement prend 2 clics/taps. Il semble qu'une solution plus élégante devrait être possible.
• Une sorte de solution de tri ou de glisser-déposer où la première ligne est "spéciale" et l'utilisateur doit faire glisser ou réorganiser une ligne pour être le premier à en faire le leader. Cela semble être une mauvaise idée car cela implique que les autres lignes sont ordonnées, ce qui n'est pas le cas. De plus, je dois aider les utilisateurs à découvrir comment réorganiser les lignes, ce qui présente ses propres problèmes de découverte.

Vous avez une meilleure idée?

Answer 1

@ Michael Lairéponse était une bonne et elle nous a mis sur la bonne voie. Le flux de travail que nous avons finalement sélectionné était une interface utilisateur en deux phases comme il l'a suggéré, mais les tests des utilisateurs nous ont poussés à changer le flux de travail de sa suggestion. Les utilisateurs choisiront d'abord un leader, puis choisiront d'autres sélections (le leader étant déjà sélectionné et désactivé afin qu'il ne puisse pas être désélectionné).

Voici le design final avec lequel nous avons fini par aller.

Answer 2

Je suis d'accord avec votre deuxième solution proposée (le bouton radio étant techniquement la bonne entrée à utiliser ici).

Je peux également voir à quel point ceux-ci sembleraient confus ensemble, surtout parce que si je comprends bien, un élément doit être vérifié pour qu'il soit ensuite sélectionné en tant que leader, et les deux ensemble ne représentent pas bien cette dépendance en plus de la recherche. gênant.

Peut-être quelque chose comme ça?

Answer 3

Si vous vous limitez simplement aux modèles et contrôles de conception d'interface utilisateur actuels, je ne pense pas que vous aurez quelque chose qui va résoudre le problème comme vous le souhaitez. Mais d'un autre côté, si vous voulez essayer quelque chose de gauche, il y a aussi un risque que l'utilisateur ne l'obtienne pas.

En dissociant logiquement le problème, vous devez afficher deux couches d'informations sur l'état/l'état.

• Premier calque: sélectionné ou non sélectionné
• Deuxième couche: leader ou non leader

Si vous présentez les deux couches en même temps, cela va être déroutant pour l'utilisateur car il ne comprendra pas nécessairement la relation entre les deux, ce qui se produira si vous ajoutez une liste déroulante au tableau ou une colonne supplémentaire commencer avec. Ce que vous devez faire est d'afficher la première couche, puis de mener à la deuxième couche d'informations/interaction.

Cela signifie que si vous sélectionnez un élément, vous révélez l'option de faire de cet élément un leader. Une suggestion possible serait de révéler un bouton à bascule ou un bouton radio pour chaque ligne sélectionnée. Étant donné que chaque ligne sélectionnée est ensuite automatiquement ajoutée à la liste des groupes, vous pouvez alors contrôler le comportement du bouton bascule ou du bouton radio en conséquence.