web-dev-qa-db-fra.com

Indiquer la sélection dans une liste avec des sous-niveaux pas toujours visibles

Supposons que nous effectuions une recherche sur un nom d'objet et obtenions cette liste de résultats:

enter image description here

Dans cette liste, un seul élément peut être sélectionné pour effectuer une action sur cet élément. Un élément peut être soit:

  • Un objet lui-même
  • OU un élément connecté à un objet
  • OU une pièce connectée à un objet

Un objet peut avoir zéro ou plusieurs éléments et zéro ou plusieurs pièces. Les éléments (dont il peut y en avoir plusieurs) sont répertoriés dans une boîte de dialogue distincte. Des pièces (dont il n'y en a souvent que quelques-unes) pourraient être répertoriées lors de l'expansion en ligne. L'image suivante montre cette configuration:

enter image description here

Ma question est la suivante:

  • Comment indiquer au mieux un élément sélectionné si la liste dans laquelle il apparaît n'est pas toujours visible?

Je sais qu'une solution générale pour afficher une sélection dans une liste serait une liste déroulante/combobox. Cependant, je pense que ce type de contrôle gonfle l'interface utilisateur dans ce cas et a une possibilité plus semblable à "obligatoire" qu'à "facultative". De plus, ce n'est pas très bon en termes d'interaction en cas de longues listes (avec beaucoup de défilement).

Mon meilleur pari pour le moment serait d'utiliser la couleur si l'un des articles ou l'une des pièces est sélectionné. Pour les pièces, cela ressemblerait à ceci:

enter image description here

Cependant, c'est une solution inconcise et pas si élégante. Avez-vous de meilleures suggestions?

2
agib

Quoi que vous fassiez, vous devez montrer l'entité spécifique afin que les utilisateurs sachent sur quoi ils effectuent l'action. C’est assez important pour valoir le ballonnement que cela crée, surtout si les effets de l’action sont affichés sur l’entité sur la même page. Voici quelques options:

  • Soutenez l'action sur toutes les pages d'exploration . Si l'utilisateur souhaite effectuer l'action sur l'élément d'un objet, il doit le faire à partir de la page répertoriant les éléments liés à l'objet choisi. Bien sûr, cela ne fonctionnera pas si vous devez autoriser l'action à être exécutée simultanément sur des éléments d'un mélange d'objets. Cela fonctionne mieux si l'utilisateur exécute généralement l'action sur une seule entité - pourquoi inciter les utilisateurs à sélectionner un élément, puis revenir à la page parent avant de pouvoir effectuer l'action?

  • Ne conserve la sélection que lorsqu'un expandeur est ouvert . Si l'utilisateur ferme un expandeur de pièce, la pièce sélectionnée est désélectionnée. Vous pourriez penser que cela dérouterait l'utilisateur, mais c'est une pratique courante dans les interfaces graphiques (par exemple, MS Windows Explorer). Il est en fait utile si le contexte autour de l'entité (par exemple, les parties surround) est important pour vérifier que l'on a sélectionné la bonne entité. Cette approche ne fonctionnera pas si les utilisateurs ouvrent généralement autant d'extensions pour sélectionner plusieurs parties que la numérisation et le défilement deviennent difficiles à manier. Celui-ci fonctionne également mieux si les utilisateurs effectuent généralement l'action sur une seule entité - ils sélectionneront naturellement une partie, puis effectueront l'action, pas sélectionner une partie, fermer l'expandeur, puis effectuer l'action.

  • Identité d'écho dans l'image de l'objet . Afficher l'élément ou la pièce sélectionné à côté des contrôles pour afficher l'ensemble du lot. En effet, vos expandeurs sont maintenant un peu comme des zones de liste déroulante, mais sans les implications "doit en sélectionner une" - et la sélection s'efface automatiquement si l'utilisateur sélectionne une entité différente de l'objet. Ressemble à ceci:

enter image description here

  • Liste de sélection . Liste toutes les entités sélectionnées en bas à côté du bouton Effectuer une action. Autrement dit, vous disposez essentiellement d'un panier d'achat sur un site de commerce électronique ou d'une liste à partir d'une application de messagerie. Répertoriez le chemin d'accès complet de chaque entité (nom d'objet - nom d'élément/de pièce) pour fournir un contexte et indiquer à l'utilisateur que la sélection d'une entité différente pour un objet donné remplace une entité de la liste. Cela fournit aux utilisateurs un endroit pratique unique pour vérifier leurs sélections avant d'effectuer l'action (bien qu'il en perde un peu le contexte), ce qui est particulièrement utile s'il y a beaucoup d'objets dans les résultats de la recherche.
2
Michael Zuschlag

"Pour l'instant, mon meilleur pari serait d'utiliser la couleur si l'un des articles ou l'une des pièces est sélectionné (e). Cependant, c'est une solution inconcise et moins élégante"

Je ne comprends pas car il me semble trop concis. Nous devrions au moins voir l'élément actuellement sélectionné.

Le problème sous-jacent est que trois niveaux de sélection sont confondus.

  • L'ensemble de résultats (Alpha, Beta, Gamma ou Delta)
  • Le type (objet, article ou pièce)
  • L'article ou la pièce spécifique (si l'article ou la pièce a été sélectionné)

La solution "prête à l'emploi" consiste à avoir un arbre, ou plutôt un arbre, car vous avez des informations supplémentaires (les méta-informations) que vous souhaitez afficher. Que diriez-vous de cela comme point de départ pour une solution personnalisée:

enter image description here

Le fait est qu'il est clair que la partie Beta-> Part-> A-vraiment-vraiment-vraiment-très-longue a été sélectionnée pour l'action.

1
James Crook

La seule chose qui me vient à l'esprit sur les solutions existantes, c'est l'installateur de bureau et les listes de contrôle/listes de contrôle hiérarchiques:

enter image description here
enter image description here

Pour plus d'inspiration:
- Google "tâches hiérarchiques"
- Google "liste de contrôle hiérarchique"
- Google "installateur de bureau"

0