web-dev-qa-db-ja.com

分類階層管理UIパターン

概要

開発中のカスタム軽量Web CMSがあります。これには、ビジネスユーザーが階層的な分類法を定義し、ノードを追加/編集/削除し、兄弟ノードに相対的な並べ替え順序を変更し、分類法内で親ノードを変更できる機能があります。

分類法はnレベルの深さになる可能性がありますが(アプリケーションは制限を強制しません)、実際にはそれらの大多数は1〜3レベルの深さになります。

問題ステートメント

以前は管理UIで、ツリーはノード階層を表しており、階層内のノードを再配置するためのクライアント側のドラッグアンドドロップがありました。これは、ノードをドラッグして別のノードの隣または下に配置するために必要なマウスの器用さが原因で、ユーザーからはあまり受け入れられませんでした。これは、ユーザーを完全にドラッグアンドドロップすることをオフにする否定的なエクスペリエンスを作成しました。その結果、ノード階層を管理するために別のメカニズムを使用する必要があります。

要件

ユーザーは次のことができる必要があります。

  • 階層に新しいノードを追加する(タイトルと説明を作成する)
  • 既存ノードの編集(タイトルと説明を更新)
  • ノードの並べ替え(兄弟ノードに対する並べ替え順序の変更または親ノードの変更)
  • ノードを削除する

研究

私は代替案を調査していて、ux.seでいくつかの良い質問を見つけましたが、それらは異なるユースケースであるか、提供された回答が私の特定の問題ステートメントに対応していません:

ソリューションA:2つのパネルセレクター

私が検討した1つのアプローチは 2つのパネルセレクター パターンです。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

これは、階層の可視性を維持し、ユーザーが別のページに移動せずにアクションが実行された後すぐにフィードバックを提供する(pogo-stickingを減らす)ことを除いて、フラット化リストビルダーに似ています。

考えられる欠点は、各レベルに多くの兄弟を持つ浅い階層の場合です。これにより、スクロールが発生したり、右側のパネルを「固定」したりする必要があります。

ソリューションB:ツリーテーブルw /モーダルウィンドウ

別のオプションは、モーダルウィンドウと組み合わせて ツリーテーブルパターン を使用することです。

mockup

bmmlソースをダウンロード

ソリューションBツリーテーブルの高忠実度バージョン:

Solution B Hi Fidelity

これはもう少し構造化され、雑然としています(選択と編集がより明確に分離されています)。私はこのアプローチに傾いています。

どのオプションが優れていると思いますか(そしてその理由)、またはどの3番目のオプションが優れていると思いますか(そしてその理由)?

21
Charles Wesley

これは、Adobe Illustratorなどのコントロールパネルパターンを使用するのに適した場所です。シェイプオブジェクトをクリックすると、コントロールパネルでそれを使用して実行できる操作が表示されます。

コントロールパネルは、このEエリアです スクリーンショット

enter image description here

だからあなたができることはここにあります: enter image description here

ツールバーが長すぎることを除いて、最後のソリューションに問題はありません。そして、上記の回答の1つからよりきれいなアイコンを使用したソリューションにはアフォーダンスがありません。ツールバーを表示するためにアイテムを選択することを想定していることは誰にもわかりません。たぶん、それらを組み合わせることができます。つまり、ロールオーバーして、短いツールバーを表示します。

3
Andy

オプション1は、別のパネルの代わりにツールバーを使用することです。

オプション2は、コンテキストアクション、つまり選択された(フォーカスされた)行(またはおそらく複数の行)の近くに表示されるアクションを使用することです。

enter image description here

したがって、「子の追加」および「編集」オプションは、追加または変更する詳細を含むダイアログをポップアップします。

3
alexeypegov

チャールズ、

次のアプローチをお勧めします。

enter image description here

アイコンはリストボックスの下にあり、デザインをシンプルに保ち、できれば実装もシンプルにします(選択が変更されるたびにアイコンを表示/非表示にする必要はありません)。編集アイコンがないことに注意してください。ほとんどの人は、ダブルクリックして編集することに慣れています。ただし、それを追加するか、次のアイコンを使用できます。

enter image description here

歯車メニューには、

  • 「Citrix」を編集

  • 「Citrix」を削除

歯車メニューを使用して、[子を追加]などの他のオプションを提供し、リスト項目のアイコン(ソリューションB)が不可能な方法または追加のオプションを必要としない方法で将来のオプションをいくつでも追加できます。実装への大幅な変更(ソリューションA)。

3
Hisham

難しい問題です。そのようなテーブルに編集コマンドを配置するのは非常に慣例的ではないので、#2は好きではありません。

オプション#1は少し型破りではないように見えますが、物事を再構築する方法を発見するには、少し調べてみる必要があると思います(編集->親の変更)。おそらく、編集パネルを最初のサイドパネルに組み合わせると、すべての操作を示すサイドパネルが1つだけになります。

0
obelia