web-dev-qa-db-ja.com

ナビゲーション用の画像の下または上のキャプション?

レイアウトの目的で、画像やビデオがWebページに表示される通常の キャプションはおそらくグラフィックの下に配置するのが最適 —主に慣例により、ここですでに説明しました。

これらの考慮事項をナビゲーションに取り入れたいと思います。カテゴリのWebページにアクセスしたとします。その唯一の目的は、それぞれの内容を通知して適切なサブカテゴリに移動することです。

画像がない場合、次のようになります。

Without images

次に、ナビゲーションを容易にするために関連する写真があれば、各サブカテゴリがおそらくより明確になると考えてください。しかし、どこに配置する必要がありますか?

取り組む最初のタスクは、ユーザーがどこに移動するかを決定するための主要な手掛かりとして使用されるのが画像かテキストかを決定することです。それはウェブサイトに依存するかもしれません。しかし、それが行われた場合でも、両方の考慮事項について、画像またはテキストを最初に表示する必要がありますか?どちらが意味するのですか?または多かれ少なかれ同等ですか?

以下の例。



最初にテキスト:

enter image description here



最初の画像:

enter image description here


各ブロック(画像とテキストの組み合わせ)が対応するサブカテゴリへのナビゲーションリンクを形成していることを最もよく表しているのはどれですか。

10
Baumr

短い答え:下のキャプション、上のタイトル

画像の理解を深めるために何かを説明している場合は、それをキャプション(単なるWordであっても)と考えて、下に配置できます。

画像が意味をなすために必要なものである場合は、タイトルと考えて上に配置します。

全体的なコンセプトはユーザーを混乱させるようなものを導入しないでくださいなので、何らかの説明がないと画像がはっきりしない場合は、必ず画像の前に付けてください。

編集:タイトルとキャプションの両方を含めることが理にかなっている場合は、/または質問にしないでください。

7
JohnGB

JohnGBが言うように-この種のシナリオでは上記のタイトル。

しかし、タイトルまたは画像をクリックできることを示唆するために、画像にタイトルoverlayを試してみたくなります。はい、カーソルの変更も手掛かりになるはずですが、少なくともマウス駆動のデバイスでは、画像にカーソルを合わせてさらにヒントを与えるときに、タイトルの背景を少し暗く/明るくすることができます。

小さな画面やモバイルデバイスでは、画像の下部(特に横向き)が画面から外れる可能性があるため、通常は最初にタイトルも必要です。

enter image description here

不透明度がサポートされていない可能性のあるモバイルデバイスでは、タイトルの周りにマージンを残すことができます。たとえば、以下のモックアップのように-コンテンツがインターフェースであることを確認することを目的としています

enter image description here

10
Roger Attrill