マスター/ディテールデザインは、アプリケーションに最適なアプローチですか？

Question

現在、大きな財務アプリケーションがあり、リスト/表示/編集ページで構成されています。ユーザーからは、レコードを閲覧、表示、編集するにはクリック数が多すぎるというフィードバックが寄せられています。リストページの閲覧中に、レコードを選択して表示し、別のレコードを選択できる方法を求めているため、基本的には、1つのレコードも表示しているときにリストを表示したいと考えています。。

私の最初の考えは、それがこの問題を解決するマスター/詳細設計を持っていることでした。私が見つけた最も一般的な2つの設計は、2つのペインの設計とトップダウンアプローチ（電子メールクライアントのような）です。

このアプリケーションはデータを集中的に使用するため、リストページには必要な列を多数含めることができるので、最初はリストを上に配置し、レコードを選択するとペインが開くデザインを作成するのが最善の方法だと思いました。下部には選択したレコードがあり、編集することができます。

だから私は私の質問だと思いますトップダウンアプローチは私たちの問題の最良の解決策ですか？？競合他社の1つは、左/右ペインのデザインを使用しており、左ペインに水平スクロールバーがあるだけなので、リストテーブルに必要な数の列を含めることができ、右ペインと競合しません。

トップダウンアプローチはメールクライアントでも機能するようです（ただし、左/右も使用できます）。ただし、下部ペインが単なるテキストではなく、モーダルが可能なフォームでもあるWebアプリケーションでうまく機能するかどうかはわかりません。ポップアップなど。

あなたの答えを楽しみにしています。

Hazzit · Answer

問題に対処する方法はいくつかあります。しかし、最初に、私は十分に与えることができないアドバイスをします：

最初に乱雑さを取り除きます。特に「データ集約型」環境で。

ここでの経験則は次のとおりです。約7列を超える列がある場合、それは間違っています。すべての列を見て、実際にそれが必要かどうかを確認し、同じ情報を伝える別の方法を考え出します。本質的に「ブラウザ内のExcel」のように見えるアプリケーションは悪いアプリケーションです。

そうは言っても、ブラウザー環境でタスクにアプローチする方法は次のとおりです。

Master/Detail「フレームのような」インターフェース、水平または垂直に配置されます。ユーザーはいつでも半分だけに焦点を合わせるので、これの欠点は画面上の乱雑さですが、両方は表示されたままです。リストがフォーカスされている/アイテムが選択されていない場合、詳細ペインを自動的に非表示にすることができます。水平方向に分割された電子メールアプリと垂直方向のメールアプリを視覚的に比較できるこのレビューを参照してください。 evil なので、実際にはフレームを使用しないでください。
Tooltips、あなたが mouseover 何かをすると、より多くの情報を表示します。これは、最初に非表示にすることにした小さな情報に適しています。ほとんどのユーザーは気にせず、星は数字よりも把握しやすいため、星のセットにカーソルを合わせて、評価が5のうち4.7かどうかを確認することは、多くの場合、優れたUIです。タッチデバイスの登場により、何かに「ホバリング」することが常に可能であるとは限らないことに注意してください。その情報を取得する（クリックするなど）追加の方法が必要になる場合があります。
新しいタブ/新しいウィンドウ要するに、しないでください。私たちはもう2000年ではありません-新しいウィンドウをユーザーの顔に投げ込むことは侵襲的であり、新しいタブはアプリケーションの流れを壊します。
ポップアップ/モーダルダイアログ（JavaScript/Ajax）最近のポップアップは、Web 2.0より前のバージョンよりも恐ろしさがはるかに少なくなっています。それらは同じように機能しますが、JavaScriptで同じことを行うと、ユーザーは同じページにとどまり、多くの詳細（おそらく独自のスクロールバーを使用しても）を確認し、リストに戻ることができます。ポップアップは images でよく使用されますが、 forms and text でも機能します。ポップアップをスタックする（ポップアップ内から別のポップアップを呼び出す）ことは、通常はお勧めできません。
プログレッシブ開示これは、ごく少数のUIデザイナーだけが実際に見ているものですが、違法です。この概念の古い例はツリービューおよび "more" ボタンで、同じコンテキストにとどまることができますが、より多くの情報を表示します。新しいバリアントは、多くの場合、より多くの情報が利用可能であることを示すために「キャレット」を備えていますが、同じアイデアの他のバリアントも存在します（主にデスクトップUIに焦点を当てていますが、 this は、さらに良い出発点ですリサーチ。アプリケーションでは、アイテムを現在の位置から移動せずに、最小のリストビューからフルサイズの詳細ビューに「拡張」できる場合があります。これにより、ユーザーは複数のアイテムの詳細を比較できる場合があります。実際に画面に収まります。

上記はあなたが利用できる主なオプションをカバーしていると思います。普遍的な「最善の」アプローチは存在しないと思いますが、アプリケーションに関して長所と短所を比較検討する必要があります。