概要
開発中のカスタム軽量Web CMSがあります。これには、ビジネスユーザーが階層的な分類法を定義し、ノードを追加/編集/削除し、兄弟ノードに相対的な並べ替え順序を変更し、分類法内で親ノードを変更できる機能があります。
分類法はnレベルの深さになる可能性がありますが(アプリケーションは制限を強制しません)、実際にはそれらの大多数は1〜3レベルの深さになります。
問題ステートメント
以前は管理UIで、ツリーはノード階層を表しており、階層内のノードを再配置するためのクライアント側のドラッグアンドドロップがありました。これは、ノードをドラッグして別のノードの隣または下に配置するために必要なマウスの器用さが原因で、ユーザーからはあまり受け入れられませんでした。これは、ユーザーを完全にドラッグアンドドロップすることをオフにする否定的なエクスペリエンスを作成しました。その結果、ノード階層を管理するために別のメカニズムを使用する必要があります。
要件
ユーザーは次のことができる必要があります。
研究
私は代替案を調査していて、ux.seでいくつかの良い質問を見つけましたが、それらは異なるユースケースであるか、提供された回答が私の特定の問題ステートメントに対応していません:
ユーザーが階層にデータを挿入できるようにする最もユーザーフレンドリーな方法は何ですか?
これは非常によく似た質問ですが、挿入だけを許可する必要はありません。編集、削除、並べ替えをサポートする必要があります。そのスレッドの最良の答えは、階層の各レベルに新しい列を追加するミラーテーブルの使用を提案しています。
このアプローチの問題は、CRUDのすべての要件に対処することであり、多くのボタンで発生する可能性があります。さらに、水平スクロールの可能性は、階層の深さが3〜4レベルを超えるEdgeケースに存在します。
大きな階層の場合-チェックボックスツリーまたは「ガイド付きツリー構造」
もう1つは似ていますが、まったく同じユースケースではありません。最良の答えは flattened list-builder pattern を示唆しています。このアプローチの問題は、ユーザーが階層の完全なビューを持っていないことです。単純な変更を行うと、画面全体をリロードする複数のポストバックが必要になり、かなり早く古くなる可能性があります。
ソリューションA:2つのパネルセレクター
私が検討した1つのアプローチは 2つのパネルセレクター パターンです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これは、階層の可視性を維持し、ユーザーが別のページに移動せずにアクションが実行された後すぐにフィードバックを提供する(pogo-stickingを減らす)ことを除いて、フラット化リストビルダーに似ています。
考えられる欠点は、各レベルに多くの兄弟を持つ浅い階層の場合です。これにより、スクロールが発生したり、右側のパネルを「固定」したりする必要があります。
ソリューションB:ツリーテーブルw /モーダルウィンドウ
別のオプションは、モーダルウィンドウと組み合わせて ツリーテーブルパターン を使用することです。
ソリューションBツリーテーブルの高忠実度バージョン:
これはもう少し構造化され、雑然としています(選択と編集がより明確に分離されています)。私はこのアプローチに傾いています。
どのオプションが優れていると思いますか(そしてその理由)、またはどの3番目のオプションが優れていると思いますか(そしてその理由)?
これは、Adobe Illustratorなどのコントロールパネルパターンを使用するのに適した場所です。シェイプオブジェクトをクリックすると、コントロールパネルでそれを使用して実行できる操作が表示されます。
コントロールパネルは、このEエリアです スクリーンショット :
だからあなたができることはここにあります:
ツールバーが長すぎることを除いて、最後のソリューションに問題はありません。そして、上記の回答の1つからよりきれいなアイコンを使用したソリューションにはアフォーダンスがありません。ツールバーを表示するためにアイテムを選択することを想定していることは誰にもわかりません。たぶん、それらを組み合わせることができます。つまり、ロールオーバーして、短いツールバーを表示します。
オプション1は、別のパネルの代わりにツールバーを使用することです。
オプション2は、コンテキストアクション、つまり選択された(フォーカスされた)行(またはおそらく複数の行)の近くに表示されるアクションを使用することです。
したがって、「子の追加」および「編集」オプションは、追加または変更する詳細を含むダイアログをポップアップします。
チャールズ、
次のアプローチをお勧めします。
アイコンはリストボックスの下にあり、デザインをシンプルに保ち、できれば実装もシンプルにします(選択が変更されるたびにアイコンを表示/非表示にする必要はありません)。編集アイコンがないことに注意してください。ほとんどの人は、ダブルクリックして編集することに慣れています。ただし、それを追加するか、次のアイコンを使用できます。
歯車メニューには、
「Citrix」を編集
「Citrix」を削除
歯車メニューを使用して、[子を追加]などの他のオプションを提供し、リスト項目のアイコン(ソリューションB)が不可能な方法または追加のオプションを必要としない方法で将来のオプションをいくつでも追加できます。実装への大幅な変更(ソリューションA)。
難しい問題です。そのようなテーブルに編集コマンドを配置するのは非常に慣例的ではないので、#2は好きではありません。
オプション#1は少し型破りではないように見えますが、物事を再構築する方法を発見するには、少し調べてみる必要があると思います(編集->親の変更)。おそらく、編集パネルを最初のサイドパネルに組み合わせると、すべての操作を示すサイドパネルが1つだけになります。