web-dev-qa-db-fra.com

Marquer les éléments éloignés les uns des autres comme groupés (connectés)

J'ai une structure arborescente avec des éléments provenant d'arbres différents que je dois "grouper" (ou vraiment, marquer comme groupés).

Ainsi:

enter image description here

Il est obligatoire pour l'utilisateur de sélectionner quelques-uns de ces éléments pour passer à l'étape suivante. Certains éléments sont obligatoires, comme l'élément 1 dans le groupe 1, l'élément 3 dans le groupe 2 et les éléments 4 et 8 dans le groupe 3. Et puis il y a des éléments que l'utilisateur peut choisir entre, mais l'un d'eux est toujours obligatoire. Comme le peut choisir l'élément 3 du groupe 1 OR l'élément 2 du groupe trois doit être sélectionné et l'élément 1 du groupe 2 OR l'élément 3 du groupe 3).

Comment rendre cela visuellement clair pour l'utilisateur?

4
efrethe

Assistant étape par étape avec des choix clairs et séparés. Lorsque l'utilisateur passe à l'étape suivante, chargez ensuite les choix liés.

enter image description here

1

Ne montrez pas les groupes, montrez les étapes. Étape 1 (ou 2) remplissez les éléments requis.

Étape 2 (ou 1) choisissez entre les sélections OR.

Étape 3, sélectionnez les éléments facultatifs.

0
PixelSnader

Une option que vous pouvez essayer est la suivante:

  • Utiliser les cases à cocher désactivées sélectionnées pour les éléments obligatoires
  • Pour chaque groupe d'articles, au moins un d'entre eux doit être sélectionné, utilisez une forme géométrique sacrée (cercle, triangle, carré, etc.). Utilisez des couleurs différentes pour chaque forme.
  • Placez la forme à côté de chaque élément en conséquence
  • Initialement, tous les éléments ne sont pas sélectionnés (sauf ceux obligatoires)
  • Lorsqu'un élément appartenant à un groupe d'éléments dont au moins l'un d'entre eux doit être sélectionné, changez la forme de saint en remplissant tous les éléments du groupe.
  • Vous devez donner des instructions détaillées aux utilisateurs sur la façon dont cela fonctionne.

Dans l'exemple ci-dessous: Les éléments obligatoires sont: Groupe 1, élément 3, Groupe 2, élément 1, Groupe 3, élément 7

au moins un groupe est: groupe triangle, groupe carré, groupe cercle

enter image description here

0
DesignerAnalyst