質問: 分類階層管理uiパターン 概要開発中のカスタム軽量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 /モーダルウィンドウ別のオプションは、モーダルウィンドウと組み合わせて ツリーテーブルパターン を使用することです。 bmmlソースをダウンロード ソリューションbツリーテーブルの高忠実度バージョン:これはもう少し構造化され、雑然としています(選択と編集がより明確に分離されています)。私はこのアプローチに傾いています。どのオプションが優れていると思いますか(そしてその理由)、またはどの3番目のオプションが優れていると思いますか(そしてその理由)?
回答: これは、adobe illustratorなどのコントロールパネルパターンを使用するのに適した場所です。シェイプオブジェクトをクリックすると、コントロールパネルでそれを使用して実行できる操作が表示されます。コントロールパネルは、このeエリアです スクリーンショット :だからあなたができることはここにあります: ツールバーが長すぎることを除いて、最後のソリューションに問題はありません。そして、上記の回答の1つからよりきれいなアイコンを使用したソリューションにはアフォーダンスがありません。ツールバーを表示するためにアイテムを選択することを想定していることは誰にもわかりません。たぶん、それらを組み合わせることができます。つまり、ロールオーバーして、短いツールバーを表示します。