Meilleure façon de fusionner deux arborescences en une seule

Question

Je travaille sur une conception d'interface utilisateur qui a deux composants d'arborescence pour afficher la hiérarchie des données.

Chaque arbre affiche les mêmes données mais possède deux fonctionnalités différentes. Je sentais que les montrer de cette manière dérouterait l'utilisateur.

Ici, j'ai joint un exemple d'image. Les deux arborescences sont dans le même écran sous la fonctionnalité d'administration utilisateur.

• Arbre A: Il est utilisé pour sélectionner la liste des catégories et films que l'utilisateur est autorisé à regarder.
• Tree B: Ceci est un sous-ensemble de Tree A. Il sélectionnera le film par défaut/préféré pour l'utilisateur parmi les éléments sélectionnés dans Tree A.

Je veux le garder dans une seule arborescence et atteindre les deux fonctionnalités.

Quelqu'un peut-il m'aider à trouver une meilleure expérience utilisateur pour cela?

Remarque: Il existe également des sous-catégories comme Action, Comédie, etc. dans chaque langue.

Answer 1

En réponse à la question ci-dessus , dans votre liste, vous pourriez faire changer l'icône papier en étoile vide lorsque vous cochez la case. Ensuite, s'ils survolent l'étoile vide, elle se transforme en étoile dorée et s'ils la cliquent, l'étoile dorée reste (de la même manière que vous préférez quelque chose dans Gmail). Si vous jouez en anglais, cela mettra en vedette tous ceux ci-dessous.

• [...]  Films
  • [✓]  Anglais
    • [✓]  le Seigneur des Anneaux
    • [✓]  Gladiateur
  • [...]  Hindi
    • [...]  Devdas
    • [...]  Mohabbatein

De toute évidence, Gmail fait les cases à cocher et les étoiles d'or mieux que moi:

Answer 2

Vous êtes sur le mauvais chemin, ici.

Le problème est que vous essayez d'afficher les attributs dans différentes arborescences.

L'arbre doit contenir le contenu . Les attributs doivent être affichés en tant qu'attributs à chaque nœud.

Cela peut être fait de différentes manières selon l'importance de l'attribut.

En colonne:

...ou:
- Dans une boîte de dialogue contextuelle
- En affichant les attributs directement dans le menu contextuel
- Glissement sur un nouvel écran (appareils mobiles)

Answer 3

Pour commencer, ce n'est pas une tâche facile que vous avez obtenue.

On ne fait pas simplement graphe arborescent films.

La représentation de l'arbre est problématique

• Si vous ajoutez plus d'attributs ou de fonctionnalités à un film, vous devrez peut-être pouvoir ouvrir les éléments pour les modifier. Vous pourriez envisager comment procéder plus tard. Mais si vous devez le faire, l'action ouvrir sera confondue avec l'action développer.
• Le même film peut être trouvé dans différents nœuds. Encore plus si vous ajoutez des sous-catégories comme Genre.

Tag et recherche

Spontanément, je suggère plutôt un système de balises et de recherche.

Sur IMDB, Gladiator n'appartient pas à Drame, autant qu'il has Drame. Les langues, le directeur et d'autres attributs peuvent également être classés par balises.

Chaque lien ici serait une branche d'arbre potentielle:

Une boîte de recherche peut trouver les nœuds finaux. Sur StackExchange, vous pouvez également trouver des nœuds d'extrémité en parcourant les balises.

Au lieu d'explorer un arbre, les balises peuvent être recherchées et afficher tous les éléments avec certaines balises:

Enfin, vous devrez gérer la définition des attributs, étant donné qu'un film peut apparaître dans différentes catégories ou sous-arbres à la fois. Si un utilisateur peut voir des films en anglais, mais pas des drames, est-il autorisé à voir Gladiator?

Answer 4

Qu'en est-il de l'utilisation d'une arborescence avec les nœuds ayant des cases à cocher pour spécifier les attributs:

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Les "[]" représentent les cases à cocher. Vous pouvez avoir un nombre quelconque d'attributs ou d'états sur une ligne. L'utilisation de la typographie et des couleurs pourrait aider à faire la distinction entre la hiérarchie principale et les attributs de nœud.