何も選択されていない場合のマスター/詳細ビューの空白の状態/詳細ビュー
次のビュー/フォームがあります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
基本的には、新しいレコードの情報を入力できるフォームです。
ユーザーがComboBoxからCategoryを選択すると、右側にアイテムのリストを表示し、左側のPieChart。しかし、最初は何も選択されていないので、どういうわけか空白スペースを埋めて空白状態にそれぞれ対処する必要があります。
2つの解決策が考えられます。
PieChartとListの代わりに、「情報を表示するカテゴリを選択してください」のようなテキストオーバーレイでスペースを表示します。- 空の
PieChartとListのいくつかのサンプルエントリを作成し、その上に灰色のオーバーレイを配置し、その上に上記のテキストを配置できます（モックアップを参照）。
ソリューション1は実装が簡単ですが、余白がたくさんあります。ソリューション2は実装が困難ですが、どのような情報が表示されるかをユーザーに知らせます。
もちろん、カテゴリーを事前に選択して、最初は空白を埋めることもできますが、ユーザーにカテゴリーについて意識的な決定をしてほしいので、空のままにしておくことをお勧めします。
この問題の別の解決策はありますか？実際の例をいくつか検索してみましたが、良い例は見つかりませんでした。おそらく誰かが、特にデザイン/ UI /スタイリングの観点（タイポグラフィ、オーバーレイの色など）からインスピレーションを与えるいくつかの例を持っているかもしれません。
あなたの質問は理解できたと思いますが、私が間違っている場合は説明してください。これは、ユーザーに退屈なややる気を与えずに、白紙の状態をどうするかと関係があると思いますか？これは恐怖に対するあなたの目標/目的に帰着すると思います。私はソリューション1に進みます。私の意見では、直接的な指示ではなく視覚的にユーザーを導くことは、プッシュを減らし、プルを増やします。主催者が回答を選択する前に参加者に賞品を提示する場合、ゲームショーでも同じ手法が使用されます。これは緩やかな例ですが、解決策1に同意します。達成しようとしていることや、ユーザーの達成を支援することによっては、いくつかの方法があります。
これについてのすばらしい記事を以下に示します。 http://ui-patterns.com/patterns/BlankSlate
コンテンツまたはサンプルコンテンツを表示したくない場合は、結果として得られる各領域のシンボルグラフィックを使用し、結果として得られる各領域の境界の代わりに薄い破線を表示します。これはAxureで一緒に投げたサンプルです。テキストは少し明るいかもしれませんが、クリエイティブになり、カラーアイコンと矢印を使用できますが、どちらの方法でもユーザーは視覚的に誘導されます。
その他の提案：
1）両方の場所にコンテンツを完全に入力し、データを完全にぼかしますが、ユーザーにその構成を明確に理解させるぼかしを配置します。
2）最初にすべてのカテゴリを含むか表示するデフォルトのカテゴリをドロップダウンに追加し、カテゴリフィールドをカテゴリリストの結果（例：リストコンテナの上）の近くに明確なラベルを付けて配置します（例：「フィルタするカテゴリを選択してください"）または（例："フィルターカテゴリ "）。言語のオプションは無制限であり、定義されたユーザーに基づく必要があります。
設計プロセスへの一般的なアプローチとして、最も単純なものから始めて、ユーザー調査によって示された場合にのみ複雑さを追加します。
何もない場合は何も表示しない
大きな空白スペースは通常、何も表示せず、テキストボックスが空のフォームのように入力が必要であることを示すかなり良い手がかりです。空白スペースがカテゴリドロップダウンと視覚的に関連付けられている限り（たとえば、フレームは両方を構成します）、カテゴリドロップダウンラベルはユーザーが得るものを十分に伝えます（たとえば、「製品カテゴリのパフォーマンス：_“）の場合、他のプロンプトは必要ありません。
単純な空白スペースは、ユーザーが行う必要がある読み取りと思考（オプション1）の量を減らし、ユーザーが実際の偽のリストデータを混乱させることを回避します（オプション2、後半）。ユーザーは、グレーやその他のフェージングが「例」または「偽物」を意味することを必ずしも知っているとは限りません。彼らはそれが「無効」を意味するだけだと考えているかもしれません（つまり、値は実際ですが編集できません）。あるいは、灰色の灰色がWebサイトやユーザーの最近のファッションであるため、静的なグラフィックデザインだと考えるかもしれません。実際のデータがあれば、そのエリアを見たことがないかもしれません。
空白スペースが「正しくない」とユーザーがバランスをとろうとするので、空白スペースが大きいと、ユーザーにカテゴリを正確に選択させる可能性さえあります。空白の領域が何を表示するかをより明確に示す必要があり、この目的のためにデフォルトのカテゴリ値を表示できない場合（下記を参照）、空白のグラフとフィールドを表示します。つまり、グラフの軸とタイトルを表示しますが、データはゼロ（たとえば、提案したような円グラフの白い円）を表示し、リストには列または行のラベルを表示しますが、リストアイテムは空白にします。
何も持たないようにする-デフォルトを選択
ただし、ユーザビリティテストでユーザーが[カテゴリ]ドロップダウンを無視することが示されている場合を除いて、ユーザーがそうすることを想定せず、説明した問題や、コメントに記載した問題など、新しい問題のみを発生させる標準以下のUIを構築してください。
デフォルトではデフォルトでない場合よりも多くのエラーが発生するというWebアプリの設計には、この神話があるようです。非常に特殊な状況（たとえば、世論調査のリッカートラジオボタン）を除いて、その証拠はないと思います。デフォルト値に直面したユーザーが強制的にその値を選択するよりも、その値を制御するユーザーのほうが多くなるというのは事実ですが、必ずしもユーザーがエラーを犯しているわけではありません。ユーザーがそれがどんな価値であるかをあまり気にしないことを意味するだけかもしれません。
テストでユーザーがカテゴリを誤って無視していることが示された場合でも、ユーザーの労力、エラー、および混乱の原因となるソリューションを選択する前に、問題の他のソリューションを探してください。その治療法は病気よりも悪い場合があります。たとえば、カテゴリと詳細領域の間のグラフィック接続を改善する必要があるかもしれません（ワイヤーフレームではかなり弱いです）。または、カテゴリのオプションにもっと適切な名前を付けて、ユーザーが何を意味し、何を望んでいるかをユーザーが理解できるようにする必要があるかもしれません。
だからあなたの解決策は＃3かもしれません。 [カテゴリ]ドロップダウンをリストの最初の項目に設定します。これは、おそらく最も頻繁に、重要で、または説明的な選択になるはずです（他の項目より少しだけ多い場合でも）。
ところで、GmailのソリューションがGmailにとっても良いものであるとは思いません。多くの大企業はあなたが知っている方がいいと思うだろう。