web-dev-qa-db-ja.com

ページのコンテンツが固定領域で十分に満たされていない場合はどうしますか?

アプリケーションのサイズは固定されています(800x600ピクセルなど)。しかし、私がよく遭遇する問題は、ページのコンテンツが十分でないことです。 これは、大きな領域にあるコンテンツが少なすぎることを示しています。

以下のモックアップを検討してください。「ボックス」は固定サイズです。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

この例は重要なステップであり、おそらく別のステップとマージすべきではありません。 UIが乱雑になるだけなので、不要なコンテンツを追加するつもりもありません。固定領域のサイズを変更することも、少なくとも十分ではありません(おそらくまったく不可能です)。

この問題に遭遇するのは私だけではないはずですが、自分がその問題に遭遇したときはどうしますか?モックアップは一例にすぎませんが、解決策を示すためにモックアップを自由に再利用してください。

31
Zar

この問題に取り組むための4つの広範な手法を考えることができます。

第一に、UIコンポーネントとコピーのサイズを増やすことでおそらく問題を回避できると思います。とにかく読みやすくするためには、テキストは実際に14px以上である必要があります。そのため、見た目だけでなく、これを行うことには実際的な利点があります。

次に、ページが「孤立している」と思われ、フォームが別のページの他のテーブルまたは要素のグループに関連するアクションである場合、フォームをライトボックスとして表示することで問題が発生する可能性があります。見栄えが良いという理由だけでUI要素を選択することは良い習慣ではありませんが、UXの観点から適切である場合は、注目する必要があります。

enter image description here

3番目に、活動の促進に役立つ場合、またはヘルプやアドバイスを提供する場合は、ページに2次コンテンツを追加できます。これはTwitterがログインページ(下記)で行うことですが、フォーム自体から注意を逸らさないように注意してください。 Twitterの場合、明るい白いUI要素とそれらの周りの微妙な強調表示により、フォームが注目の的となっています。

enter image description here

最後に、空白をもっと面白くすることができます。ログインページと「ゲートウェイ」ページでの一般的な手法は、次の例のように、ぼかしたストックフォトの背景を表示することです。

enter image description here

ただし、Webに精通しているユーザー(つまり、他のデザイナー)にとっては、これは少しぎこちないかもしれません。別の手法は、背景の単純な色またはグラデーションです。ページボディよりも暗いものを使用すると、フォームに目を引くことができます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

25

空白は設計要素です。一緒に詰め込もうとするのではなく、空白をうまく使い、コンテンツを最も読みやすく使いやすいものに広げる必要があります。テキストを大きくすることもできます。ほとんどのサイトでは、特にフォームの場合、テキストが小さすぎます。

全体として、それが顧客にとって使用可能であれば、残りは審美的なデザインの決定であり、使用可能性を低下させない限り、見た目をより楽しくすることができます。

5
JohnGB

モックでは、エラーメッセージ、ラベル、送信ボタンの配置先についても考慮する必要があります。これらの要素を含めると、余白がはるかに少なくなると思います。

また、モックをスケーリングすると、フィールドが非常に小さくなります。200pxはテキスト領域とフィールドの狭い側にあります。私はこれらを最小で300px-400px幅にすることをお勧めします。

3
stringtheory