マスター/詳細インターフェースの設計を改善する
はじめに、関連情報
契約に関するデータをデータベースに書き込むプログラミングアプリケーションです。それは銀行ソフトウェアに似ています。
契約は非常に複雑なデータなので、その構造について説明しましょう。
基本的なコントロールのセット（ボタン、チェックボックス、テキストボックスなど）で表される基本情報があります。
契約は、附属書を考慮して、それを説明する追加の複雑なデータがある場合とない場合があります。
契約は、特別なレポートを考慮して、それを説明する追加の複雑なデータがある場合とない場合があります。
AnnexとReportは、元の契約とまったく同じ特性を持っています。ボタン、テキストボックスなどは同じです。契約とこれら2つののみの違いは、契約に2つの追加のテキストボックスがあること、そしてもちろん、AnnexとReportが契約の一部であることです。
以前にここで助けを求め、オンラインで調査した後、スペースを節約するために master-detail interface を使用することにしました。そうすれば、ユーザーは新しいデータを追加することも、既存のデータを編集/削除/検索/印刷などすることもできます。
これを解決するための私の努力
このような大量のデータを表示するために、タブコントロールを使用することにしました。このソリューションにより、占有スペースが半分になりました。
既存のデータを表示するために、私は次の理由からツリービューコントロールを使用することにしました。
- ルートノードとしてコントラクトを提示できます。
- 契約に付属書またはレポート、あるいはその両方がある場合は、子ノードとして表示できます。
以下は、ユーザーがコントラクト/アネックス/レポートを入力するときのタブコントロールのスケッチです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
2番目のタブには、契約/付録/レポートの同じコントロールがあります。最初のタブには、契約用に追加の2つのコントロールがありますが、AnnexとReportの両方で同じです。モックアップでは、この投稿の読者に参照ポイントを提供するために、コントラクトの最初のタブを示しました。
以下は、以下の場合のツリービューのスケッチです。
- 契約書には付属書や報告書はありません。
- 契約には2つの附属書があります。
- 契約には2つのレポートがあります。
- 契約書には付属書と報告書があります。
以下は、私がこれまでに「考え出した」ことのスケッチです。
新規入力/既存データ編集のメカニズム：
前述のように、ツリービューはデータベース内の既存のデータを表します。
ユーザーがコントラクト/アネックス/レポートを編集する場合は、目的のノードを確認して<ボタンを押します。これにより、選択したノードがタブコントロールに読み込まれます。編集が終了したら、ユーザーは>ボタンを押して編集を保存し、変更を保存します。
ユーザーが契約に新しい附属書/レポートを追加する場合は、タブコントロールに既存の契約をロードし（<ボタンを押して）、_New AnnexまたはNew Reportボタン（これらのボタンは、コントラクトがタブコントロールに読み込まれるとすぐに有効になります）。別館/レポートのデータの入力が完了したら、ユーザーはsaveボタンを押して新しいエントリを追加する必要があります。
New Contractボタンを押すと、新しいコントラクトが追加されます->タブコントロールがリセットおよびクリアされます。ユーザーがデータの入力を終了したら、saveボタンを押して契約をデータベースに追加する必要があります。契約はツリービューコントロールに表示されます。
ユーザーはcancelボタンを押して編集/新規エントリを中止できます。
ユーザーが契約/付属書/レポートを削除/印刷したい場合は、目的のノードをチェックして対応するボタンを押すことで実行できます。
検索オプションについては、そのボタンを押すと、ユーザーが検索条件を構成するダイアログボックスが起動します。ツリービューに検索結果が再入力されます。
[〜＃〜]問題[〜＃〜]
私の一般的な考え方は良いと思います->データの入力にはタブコントロールを使用し、既存のエントリの表示にはツリービューを使用します。 <および>ボタンを使用して契約/付属書/レポートを編集するためのソリューションにも満足しています。私の意見では、印刷、削除、検索機能も適切に実装されています。
ただし、新しいエントリを追加することは、その契約/附属書/レポートであっても、私の意見では非効率的です。ユーザーが既存のコントラクトをタブコントロールにロードし、新しいアネックス/レポートを追加しようとした場合も同様です。
私のデザインは非常に「不器用」で非効率的だと思います。これは私の経験不足の結果です。
[〜＃〜]質問[〜＃〜]
- 新しい/既存の契約に新しい附属書/レポートを追加するための「仕組み」をどのように改善できますか？
- 新しいコントラクトの入力を実装するための特別なボタンを追加するよりも良い方法はありますか（この目的のために
+のような特別なタブをタブコントロールに追加することができます）？ - このタイプのマスター/詳細インターフェースを実装するためのより良いソリューションがある場合は、それも検討します。
さらに情報が必要な場合はコメントを残してください。関連情報で投稿を更新します。
一般的に本能は適切ですが、実装は少し不安定です。あなたが持っているインターフェースは、1）右から左に移動します（最初に右から何かを選択してから、左側に情報を入力します）、2）厳密に必要ではないロード/アンロード手順が必要です。
ここで私はあなたのインターフェースをやり直す方法：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
左側をクリックすると、要求された情報が右側のペインにロードされます。編集し、[保存]をクリックして完了します。
このデザインの「新規」ボタンは、状況に応じて適切な場所に配置されています。新しい契約はトップレベルの追加なので、マスターリストに存在します。 New ReportとNew Annexは個々の契約に固有なので、その契約の見解の範囲内にあります。
ここに反映されていない1つのUXパスは、保存されていない契約の場合です。ユーザーが契約に変更を加えてから、別の契約または別館をクリックするとどうなりますか？その場合、「契約＃1への変更が保存されていません。変更を保存しますか？[はい] [いいえ]」というポップアップを表示します。