web-dev-qa-db-ja.com

このヒーロー画像のメッセージをより明確にするにはどうすればよいですか?

あなたは、他の多くの人と同じように、このヒーローショットの意味が理解できない場合があります。

Hero Image

実際のランディングページ をチェックして、同じ画像が大画面でどのように表示されるかを確認することもできます。

聴衆の突然の高いエンゲージメント結果に驚いたユーザーを表現することを意図しました。

  • 私が働いている会社はすべて視聴者のエンゲージメントを追跡して改善することなので、このヒーローショットを使用して、私たちの製品を使用することによるすばらしい前向きな結果を伝えることが目的でした。

多くの人はメッセージを理解していませんが、面白い感情的な反応を描くため、ヒーローショットの写真が好きです。

このショットのメッセージをより明確にするにはどうすればよいですか?

1
analog-nico

あなたのレイアウトはユーザーに多くの方法を考えさせています

表面的には、レイアウトは目のための古典的な Z-pattern に従います。

enter image description here

Zパターンは一般的に使用されており、効果的です。ただし、1つのメッセージを伝えるにはレイアウトは説明に従う必要があります


ここで問題が発生し始めます...

(上記のスクリーンショットの数字と一緒に続きます)

  1. Zパターンは、異なるフォントで直角になっている単語から始まります。これは、ユーザーが読むのに不必要に複雑です。

    • その上、単語は認知的に不協和音です(morningfameは並置されていることは言うまでもなく、同じ文に一緒に表示されません)。
    • その上、ハイコントラストの黄色い黒のパレットは、言葉をさらに驚くほど混乱させます。
    • さらに、Word famefa.meに分割され、認知機能がさらに複雑になります。
    • したがって、ページ全体のエントリポイントのすぐ近くでは、ユーザーはすでに気分が良くないかもしれません。
  2. その後、目が顔に移動する可能性があります。 逮捕式が好き ...注目を集める。しかし、明確な説明がなければ、顔の表情は無意味です。 ビジュアルパスの次のステップで顔を説明することが重要です

    • エンゲージメントチャートの配置は、ユーザーが保持している携帯電話とマグカップを覆い隠し、写真の物語を破壊することに注意してください。 ヒーロー画像を隠すことはできません物語の一部である場合!レイアウトにはヒーロー画像のすべての重要な要素:顔、携帯電話、カップを含める必要があります。
  3. これでユーザーは左下に移動します。右揃えのテキストはレイアウトのアイデアのように思えるかもしれませんが、読みにくいです。1つ目は大文字で、2つ目は右揃えで、英語の読者が通常期待するものとは異なります。

    • さらに重要なのは、ヒーローショットのそれは表情を説明しないです。したがって、ユーザーはまだ混乱しています。
  4. 最後に、Word ENGAGEMENTが1つあるグラフを表示します。このグラフも明確なストーリーを伝えていないため、理解が困難です...バーは時間の経過とともにまっすぐ上がらず、混乱して上下し、最後にスパイクが続きます。黄色以外に、スパイクの実際の意味を示すものはありません。


より良い方法...

ストーリーを伝えるために視覚的なフローを使用することです。このレイアウト例では、明確な視覚的フロー、より一貫したレイアウトと配置、およびキュー(楕円、引出線)と間隔を使用して、ストーリーをより明確に伝えています。

enter image description here

  • リーダーは左上から入ります
  • 彼女は紹介文を読みますbefore画像を見て、表現が何であるかを理解します(驚き)。
  • 画像に移動し、面白い表現を楽しんでいます。
  • 次に、電話の下または結果の右側に移動します。どちらの場合も、三角形の顔の電話と棒グラフのレイアウトにより、ユーザーが読んだばかりのメッセージが補強されるため、価値提案は明確です。
7
tohster

正直なところ、絵を伝えている感情少なくとも私は、途方もなくショックを受けた怒っている人の感情です。これは、別の質問で私が話し合ったものです。感情を使用する場合は、それらが間違いなく理解できることを確認してください。

上記のように言われると、目は怒った顔に直接行きます、そして、なぜその人はそんなにイライラするのか、まったく説明がありません。左下のテキストは完全に二次的であり、フローから外れています。バー付きのボックスはかなり疑問符です。なぜそこにあるのか、それがコンテキストで何を表しているのか、私にはわかりません。

最後に、サイトの名前。あなたのサイトがfa.me(そうではないようです)でない限り、その要素をそのような優れた方法と位置で使用することについては、私は非常に慎重になるでしょう。

さて、あなたの質問に:あなたがその画像を使うことに夢中になっているなら、「エンゲージメントボックス」を削除し、少なくとも画像の説明があるように画像の上にメインスローガンを置きます。このようにして、スローガンによって補強された疑わしい感情を得るでしょう。ユーザーは「別の画像を使用した」と思うかもしれませんが、少なくとも解釈の余地は少なくなります。

それ以外に、ランディングページにはCTAがありません。ユーザーとして、私はあなたのページをどうするべきですか?あなたの意図は何ですか?

つまり、私は正直に言って、すぐにそのイメージを取り除き、コピー、スローガン、コンテンツ、ユーザーの操作に集中し、「ああそうです!」式(もちろん、単なるアイデア)。

そして、私が過酷に聞こえた場合は申し訳ありませんが、私の意図ではなく、ただあなたのサイトについて前向きにしています

編集:私が表現することを意味したのは次のようなものです enter image description here、それより「退屈」で退屈なものだけです。常に画像を使ってストーリーを伝え、個人的なものにし、ユーザーをサイトとサービスにつなげることを忘れないでください(ストック画像は一般的すぎるため、それを達成するのは恐ろしい傾向があります)。また、モデルからユーザーへ、またはモデルからスローガン/ CTAへのアイコンタクトを提供するようにしてください

2
Devin

聴衆の突然の高い関与に驚いたユーザーを表現するつもりでした。

あなたが使うイメージは、この感情を表現している誰かを描写していますか?あなたはその人にそれについて前向きに幸せになってほしくないのですか?

言語と視覚的スタイルはそのメッセージを補強しますか?それがより大胆な(そして/または明るい)視覚的手がかりを伴う肯定的なトーンである必要があります

メッセージをより明確にする方法はありますか?

多くの戦略がありますが、オーディエンスを定義し、それがメッセージが正確に認識されているかどうかをテストして確認できることを確認する必要があります。

メッセージをより明確にする最も一般的な方法は、キャッチーで覚えやすいフレーズまたは視覚的ステートメント(またはその両方)を作成し、明確でシンプルな行動を促すフレーズを導くことです。

1
Michael Lai