画像上にオーバーレイされたテキストの読みやすさ

Question

最近の画像のテキストは非常に人気があるようですが、見栄えがいいです。ただし、テキストの読みやすさを制御するのは難しい場合があります。背景を暗くし、テキストの影を追加しましたが、今では問題なく見えますが、他の人はまだ読みにくいと言っています。

上記のデザインスタイルについて、UXのコンセンサスは何ですか？訪問者はそれを読むことをより強いられますか？

tohster · Answer

読みやすさを正しく理解するのは難しい

すばらしい質問です。スタイルが機能を破壊する時点を問うのは常に良いことです。

スクリム形式の例 enter image description here

私はスクリムベースの画像キャプション（画像と対照的なテキストに部分的または完全な半透明のオーバーレイがある場合）でユーザーテストをかなり行いました。

これが私が見つけたもので、順不同です：

オーバーレイを正しく表示するのは難しい-オーバーレイを正しく表示するには、オーバーレイの色と透明度をテキストの色、フォント、テキストの相対サイズとバランスさせます画像。それはたくさんの変数です。
画像が事前にわからない場合はさらに難しくなります-ニュースサイトやソーシャルサイト（FB、Pinterest）の場合、サイトはどのような種類の画像を認識していないか投稿されるので、テキストオーバーレイの一般的なソリューションを作成することは非常に困難です。人気のある暗いスクリムと明るいテキストを使用すると、コントラストが低く明るい画像ではテキストが読みやすくなり、コントラストが高い暗い画像ではテキストが見えにくくなります。そのため、一部のテキストは他のテキストより読みやすく表示され、混乱を招いたり、レイアウトが奇妙に見える可能性があります。
オーバーレイテキストは、重量のあるフォントと短い1行のキャプションで最適に機能します。ヘビーフォントは、可変背景に対してテキストを読みやすくするのに十分な視覚的質量を備えています。キャプションが長すぎて1行に収まらない場合は、フォントサイズを小さくするよりも、折り返す方がよい（BBCニュースアプリなどを参照）と考えています。
- 6〜8語より長いテキストにはオーバーレイテキストを使用しません。ユーザーは、長いテキストを読むことに本当にイライラしていると報告しました...オーバーレイされたテキストは、さまざまな背景のために本当に脳に負担をかけているので、読むタスクはすぐにイライラします。
Googleのマテリアルデザインには、スクリムの使用に関するいくつかの役立つヒントがあります。マテリアルデザインでは、画像の下にオーバーレイされたキャプションとキャプションの両方の例が示されていることに注意してください。これは、スクリムキャプションを扱うのが非常に難しいことの認識です。

私の結論は、次の場合にテキストオーバーレイを使用しても問題ないということです。

画像がまばらです
ヘビーウェイトフォントが使用できます
キャプションは小さく、理想的には1行
画像は既知/静的です
テキストは絶対に重要ではありません（たとえば、写真のタイトルはニュース記事のタイトルほど重要ではないことがよくあります）。

アプリがこれらの条件の1つに失敗しても、まだ使用できる場合があります。 2つ以上の条件が満たされない場合は、オーバーレイテキストの使用について2度考えます。

DaveAlger · Answer

白い背景に黒いテキストよりも読みやすい情報を提供することは困難ですが、すべてが白黒であるとは限らないため、例を見てみましょう...

1.画像は感情を与える

白地に黒または黒地に白のハイコントラストパターン以外を選択すると、テキスト情報の利用が難しくなります。これが望ましい場合もあります。たとえば、絵文字をテキストにインラインで配置すると、プレーンテキストだけの場合よりも気持ちを伝えるのに適しています。

メディアは、人々が自分のストーリーをオンラインで共有できるツールです。リリース時に、読みやすさよりも感情的なつながりを優先することを選択しました（両方を行うことに成功しました）

出典： medium.com

2.テキストは情報を提供します

皮肉なことに、Mediumは最近、ウェルカム画面の大きな画像を読みやすく、より簡単で応答性の高いコンテンツのリストに置き換えました。ページの読み込みが速くなり、どのデバイスでも読みやすくなりますが、トーンの違いに気づきます。もっとフォーマルで、遠く、少し寒く感じませんか？

Mediumを長年に渡って読んでいる人たちは、最高のコンテンツに簡単にアクセスできること、そしてサイトがどのデバイスでも反応しやすいことを高く評価していますが、コストがかかります。

new medium

3.両方の長所

どちらを選択してもどちらも優れているわけではありませんが、画像の上にテキストを配置することを選択するときに注意すべき点がいくつかあります。

サイトを悩ませている巨大な画像ファイルを使用しないでください。使用している画像がページの読み込み速度を遅くする場合、希望する感情的な反応ではなく、まったく反応がない可能性が高くなります。デバイスが小さいほど、読み込みが速くなる小さいファイルを使用する必要があります。
画像が適切なコンテキストを提供していることを確認してください。たとえば、THIS IS CRITICALピエロの上にあるテキストは、間違った感情的な反応を引き出す可能性があります（コメディアンでない限り）
誰も気が散る画像の上にある段落を読みたくないので、テキストは短くしてください。
ユーザーは、画像のテキストを読み取らずに何をすべきかを理解する必要があります（テキストがほとんどオプションである例については、以下を参照してください）。テキストが重要で読む必要がある場合は、その下に画像を配置しないでください。