2つのツリービューを1つにマージするより良い方法

Question

データ階層を表示する2つのツリービューコンポーネントを持つUIデザインに取り組んでいます。

各ツリーは同じデータを示しますが、2つの異なる機能があります。そういうふうに見せると、ユーザーが戸惑う気がしました。

ここにサンプル画像を添付しました。両方のツリーは、ユーザー管理機能の同じ画面にあります。

• ツリーA：これは、ユーザーが視聴できるカテゴリと映画のリストを選択するために使用されます。
• ツリーB：これはツリーAのサブセットです。ツリーAで選択されたアイテムから、ユーザーのデフォルト/お気に入りの映画を選択します。

私はそれを単一のツリーに保持し、両方の機能を実現したいと考えています。

これについて、より良いユーザーエクスペリエンスを見つけるのに役立つ人がいますか？

注：各言語の下には、アクション、コメディなどのサブカテゴリもあります。

Answer 1

上記の質問 に対応して、リストで、チェックボックスをオンにすると、紙のアイコンを空の星に変更することができます。次に、空の星の上にマウスを置くと金色の星に変わり、クリックすると金色の星が残ります（Gmailでお気に入りに追加したのと同じ方法です）。英語にスターを付けると、以下のすべてにスターが付けられます。

• [...]  映画
  • [✓]  英語
    • [✓]  ロード・オブ・ザ・リング
    • [✓]  剣闘士
  • [...]  ヒンディー語
    • [...]  デブダス
    • [...]  モハバテイン

もちろん、Gmailはチェックボックスとゴールドスターを私より優れています。

Answer 2

ここであなたは間違った道を進んでいます。

問題は、異なるツリーでattributesを表示しようとすることです。

treeにはcontentを含める必要があります。属性は各ノードにas attributesとして表示されます。

これは、属性の重要性に応じてさまざまな方法で実行できます。

列として：

...または：
-ポップアップダイアログとして
-コンテキストメニューに直接属性を表示する
-新しい画面にスライドする（モバイルデバイス）

Answer 3

手始めに、それはあなたが得た簡単な仕事ではありません。

単に ツリーグラフ 映画ではありません。

ツリー表現に問題があります

• 映画に属性や機能を追加する場合は、アイテムを開いて編集できるようにする必要がある場合があります。後でその方法を検討できます。ただし、必要な場合、openアクションはexpandアクションと混同されます。
• 同じ映画が異なるノードで見つかる可能性があります。ジャンルなどのサブカテゴリを追加すると、さらにそうなります。

タグを付けて検索

自発的に、代わりにタグと検索システムを提案します。

IMDBでは、 Gladiatorはドラマに属していませんhasドラマ。言語、ディレクター、その他の属性もタグで分類できます。

ここのすべてのリンクは、潜在的なツリーブランチになります。

検索ボックスで終了ノードを見つけることができます。 StackExchangeでは、タグを参照してエンドノードを見つけることもできます。

ツリーをドリルダウンする代わりに、タグを検索して、特定のタグを持つすべてのアイテムを表示できます。

最後に、映画を一度に異なるカテゴリまたはサブツリーに表示できることを考慮して、属性の設定を処理する必要があります。ユーザーが英語の映画を見てもドラマを表示しない場合、そのユーザーは剣闘士を見ることができますか？

Answer 4

属性を指定するチェックボックスを持つノードで1つのツリーを使用するのはどうですか？

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

「[]」はチェックボックスを表します。行には任意の数の属性または状態を含めることができます。タイポグラフィと色を使用すると、メイン階層とノード属性を区別するのに役立ちます。