「既存のレコードを選択するか、新しいレコードを作成する」パターンに関するレイアウトの質問
新しいデータを作成するためのウィザードを作成したい。
ステップの1つで、ユーザーは既存のレコードを選択するか、新しいレコードを作成することになっています。
もちろん、これを解決するにはさまざまな方法があります。
私はこの解決策に傾いています。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
左側には、追加のテキストを含むカードの形式でレコードを表示できます。 （通常、ユーザーが選択するレコードが多すぎないため、データグリッド/リストの代わりにカードを使用します）右側は単純なフォームです。とても簡単なので、ユーザーにコンテキストを切り替えてほしくないので、フォーム入力のいくつかをインラインで入力できるようにする必要があります。
レイアウトはさまざまな画面解像度で機能するはずです。右側のパーツの幅は固定されていると思います。左側のパーツには流動的なデザインを使用できます。ワイドスクリーンモニター/高解像度デバイスの場合、これで問題ないようです。ただし、解像度が小さい場合、このレイアウトが問題になることがあります。
別の解決策/レイアウトは、タブパネルを用意し、「既存のレコードを選択する」フォームまたは "Create new record"フォーム。ただし、ワイドスクリーンモニターでは、空白がたくさんあります。
タブパネルの使用についてのあなたの提案は良いです。ユーザーにすべてを一度に表示すると、混乱したり、困惑したりする可能性があります。必要最小限のデータのみを表示することは、段階的開示と呼ばれ、望ましいことです。
http://en.wikipedia.org/wiki/Progressive_disclosure
空きスペースについては、レイアウトを980px前後に固定します。全画面表示に拡大する流動的なレイアウトは役に立ちません。テキストが非常に長くなると、扱いにくいスペースや読みやすさの問題が発生します。
液体は、コンテンツが縮小されている場合にはるかに役立ちます。以下のサイトを見て、それらがモバイル（応答性）までどのように縮小されるかを確認してください設計）、しかし、それらは980のマークを中心に拡大を停止します（一部は980を超える場合がありますが、フルスクリーンに移行するものはありません）。
http://thenextweb.com/
http://www.time.com/time/
http://5dinstitute.org/
ルールの1つの例外は、サイトに最大の影響を与えるフルスクリーン画像がある場合ですが、それでもテキストは次のように固定幅で停止します。
私はあなたの解決策は良いものだと思います。私の懸念の1つは、行うべき主要な選択があること（つまり、既存のレコードを選択するか、新しいレコードを作成するか）が十分に明確であるかどうかです。
選択をより明確にするいくつかの方法は次のとおりです。
- 上部セクションにかすかな網掛けを適用して、2つの主要な選択肢を視覚的にリンクし、それらをサブ質問から分離します。または、より良い
- richard Tanが提案するようにして、実際に質問して、彼らがどの方向に行きたいかを決定してから、関連するサブ質問を表示します。
2番目のオプションの利点は、ユーザーが一度に1つのタスクに集中できることです（選択を行い、詳細を完成させます）。これにより、認知負荷が軽減されます。それはまた、彼が言うように、インターフェースを困難で混乱の少ないものにし、さまざまなウィンドウ幅で動作します。潜在的な欠点は、既存のレコードが適しているかどうかを判断するときに、ユーザーが選択するレコードを表示できないことです。それがこの場合に必要になる可能性が高いものかどうかはわかりません。
タブはお勧めしませんタブは通常、相互依存関係のないもの用です。しかし、あなたの場合、あなたが私の意味を知っているなら、一方のタブは他方のタブが適用されない場合にのみ適用されます。
お役に立てれば、
ジェシカ