web-dev-qa-db-ja.com

2レベルの動的な中程度のサイズのツリーから複雑なノードのセットを選択するためのUX？

ユーザーが2レベルの動的な中規模のツリーから複雑なノードのセットを選択できるようにするための優れたUX設計とは何ですか？ （私は2レベルのツリーと言いますが、より正確に言うと、暗黙のルートは3番目の非表示レベルと見なすことができます。ルートはユーザーには表示されません）。ブランチのすべての葉は、ブランチ自体（ブランチの選択は、追加された葉を将来含めることを意味しますが、現在のすべての葉を選択することは意味しないため）。

この問題に対する優れた既存の設計はありますか？

細部

ツリーには少なくとも1つのブランチノードがあり、すべてのブランチノードには少なくとも1つのリーフノードがあります。元のツリーと選択の両方が動的です。つまり、ツリーのメンバーシップは将来変更される可能性があり（ブランチとリーフを追加および削除できます）、ユーザーの選択も変更できます（ユーザーがアプリに再度アクセスした場合）。

結果の選択は、ブランチノードとリーフノードのセットで構成されます。ブランチが選択されると、暗黙的にすべてのリーフ（現在および将来）も効果的に選択されます（そして、何とかしてユーザーに明らかにする必要があります）。したがって、ブランチが選択された場合、そのリーフのいずれかを選択することは冗長です（実際、これはUXデザインで防止できます）。ただし、将来、ブランチの葉のメンバーシップが変更される可能性があるため、ブランチではなくブランチのすべてのリーフを選択すること（およびブランチを選択しないままにすること）は有効です-後でリーフに追加の葉が追加された場合変更されていないため、ユーザーが将来の選択で明示的に変更しない限り、そのような葉は暗黙的に選択されません。

スケールは中程度です。およそ最大10ブランチ、最大ブランチあたり50葉。すべてを一度に読み込むのに十分なほど小さい（遅延読み込みや無限スクロールは不可）。スクロールが必要となるほど十分な大きさであり、検索は役に立ちますが重要ではありません。結果として得られる選択は比較的小さい可能性があります。これは、一般的に、葉が5個以上ある場合は個別に選択されないためです（その場合、通常は代わりにブランチが選択されます）。ほとんどの場合、選択は25以下のノードで表すことができます。

元の木の例

から選択される構造は、次のように表すことができます。

branch1
 ∟ leaf1-1
branch2
 ∟ leaf2-1
 ∟ leaf2-2
branch3
 ∟ leaf3-1
...

そして、最小の構造は：

branch1
 ∟ leaf1-1

設計の可能性

選択されていない（最初の列/ソース列）と選択された（2番目の列/宛先列）を示す2列のビューを考えていますが、それは問題ではありません。

また、メンバーを1つのセットから別のセットに移動するために、ドラッグアンドドロップまたは追加/削除操作（またはその両方）を検討しています。ノードの事前移動複数選択（たとえば、Ctrlキーを押しながら複数のノードをクリックしてから、ノードを追加または削除する）も検討できますが、厳密には必須ではありません。

ノードの検索/フィルタリングを検討することもできますが、この機能はこの設計にとって2番目に重要です。

挑戦

デザインの課題の1つは、すべてではなく一部の葉が選択されているブランチを描写するかどうか、またどのように描写するかです。 2列のデザイン（上記の「デザインの可能性」を参照）を使用する場合、ブランチを両方の列に表示する必要があります。その場合、部分的に選択されていることを視覚的に示す必要がありますか？

設計のもう1つの課題は、ブランチ自体が選択されているがそのリーフが明示的に選択されていないブランチの葉を描くことです。葉は明示的に選択されたかのように表示されますか、それとも選択が暗黙的であることを示すいくつかの第3の状態で表示されますか？

別の課題は、選択にブランチが追加された場合、（どのように）その葉の1つを選択から削除できるかということです。ユーザーが最初にブランチを削除する必要がありますか、それとも選択したブランチからリーフを削除する方法はありますか？後者の場合、ブランチは選択から削除されますが、残りのリーフは選択に追加されますか？

最後の課題は、最終的な選択を元のツリーと同じ方法で表すかどうかです。最終的な選択をよりコンパクトな表現で視覚化する方が簡単な場合があります。

この問題に対する優れたUX設計ソリューションは、明確で直感的な方法で上記の課題に対処します。

別の質問

この質問は、単一のパス（ブランチごとに1つのノード）を選択することを扱います： ツリーから要素を選択するためのコントロールを設計しますか？

この質問は非常に似ていますが、ブランチのすべての葉を選択することとブランチを選択することの間の重要な違い（私の質問では個別の選択です）には対応していません： 大きな階層の場合-チェックボックスツリーまたは「ガイド付きツリー構築」

この質問は似ていますが詳細ではなく、基本的なユーザビリティではなく大規模に結び付けられています： 大きくて浅いツリーの代替UIパターン

gui-designmulti-selectiontree
3
Will Cain

ここで木が正しいパターンかどうかはわかりません。ユーザーにとっては、要素を持つグループのみです。私の答えは視覚的なプレゼンテーションではなく、行動に関するものです。

アイテムまたはグループ（葉または枝）が選択されているかどうかが明確に示されているデザインが必要になります。チェックボックスは私には問題ないようです。チェックボックスは、グループの部分的に選択された状態を表示することもできます。

例を参照してください：ブランチ1 =部分的に選択（一部の葉、すべての場合もあります）ブランチ2 =何も選択されていませんブランチ3 =ブランチが選択されています（リーブの非アクティブなチェックボックスに注意してください）

enter image description here

行動に移る：

ユーザーがブランチを選択した場合、すべてのリーフを選択する必要があります。チェックボックスを非アクティブ状態で表示することで、これは「すべてのリーフが選択され、選択を解除することはできない」ことを意味します enter image description here

ユーザーが枝をクリックして選択を解除すると、枝は「部分的に選択された」状態になり、すべての葉を選択する必要があります。したがって、ユーザーは必要に応じて休暇を選択解除できます。： enter image description here

「部分的に選択された」ブランチのクリックをクリックすると、ブランチとすべての葉が選択解除されます。これで、ユーザーはブランチ全体を再度選択するか、目的のリーフを選択できます。 enter image description here

ユーザーが休暇のグループを変更した場合にどうなるか。これは、移動した休暇の現在の状態とターゲットのグループの状態によって異なります。

  • ソース：休暇がチェックされている/ターゲット：グループがチェックされていないか、部分的にチェックされている->休暇はtargetgroupでチェックする必要があります。
  • ソース：休暇がチェックされている/ターゲット：グループがチェックされている->休暇がチェックされているが、非アクティブなチェックボックスが表示されている
  • ソース：休暇がチェックされていない/ターゲット：グループがチェックされていないか、部分的にチェックされている->休暇はチェックされていない
  • ソース：休暇はチェックされていません/ターゲット：グループがチェックされています->休暇は非アクティブなチェックボックスでチェックされるべきです
2
BrunoH