Fパターンを使用してコンバージョンを増やす方法

公開: 2017-01-26

クリック後のランディングページを作成して、クリック後のランディングページの重要な要素をすべて含めることは重要ですが、同様に重要なのは、それらの順序と場所、つまりクリック後のランディングページのレイアウトです。

クリック後のランディングページのレイアウトを設計するときは、訪問者がページを表示する可能性が最も高い方法を考慮することが重要です。 上から下に読む傾向があることを認めることは、訪問者にあなたがしたいことに集中してもらうための良いスタートです。 彼らの視線がどこに行く可能性があるかを知ることにより、視覚的な階層を作成し、CTAを彼らが変換するのに最適な場所に配置することができます。

視覚的な階層を作成し、訪問者がコンバージョンにつながる最適な場所にCTAを配置します。

クリックしてツイート

これをサポートするための広範な研究も行われています。 2006年、ニールセンノーマングループは、これまでで最も有用で最も引用されている視線追跡研究の1つを実施しました。 調査中、彼らは232人のユーザーが何千もの異なるWebページをどのように閲覧したかを調べました。 調査結果は、ユーザーの主な読書行動は、さまざまなサイトやタスク間で比較的一貫していると結論付けました。 ユーザーはFパターンレイアウトで読み取ります。

Fパターンとは何ですか？

Fパターンは、オンラインでコンテンツを読むときに目を動かす方法です。 ほんの数秒で、私たちの目はウェブサイトのコピーやその他の視覚要素を驚くほどの速度で移動し、次の順序でページをスキャンします。

  • まず、重要な見出しを読むためにページの上部を横切って
  • 次に、ページの左側を下に移動して、数字または箇条書きを表示します
  • 最後に、ページ全体で太字のテキストまたは小見出しを読みます

以下の3つのヒートマップは、3つの異なるWebサイトのユーザーの視線追跡調査から得られたものです。 カラーキーは次のとおりです。

  • 赤=最も表示され、最も固定されている
  • 黄色=一部のビューですが、固定が少ない
  • 青=視界が最も少なく、凝視がほとんどない
  • 灰色=ほとんどビューがなく、固定もありません

このヒートマップの写真は、人々がオンラインコンテンツを読む傾向があり、それに応じてクリック後のランディングページをデザインする方法をマーケターに示しています。

F-Readingパターンは、よりラフで一般化されたアウトラインであり、必ずしも正確なF形状であるとは限らないことに注意してください。 また、Fパターンの設計は、従来のFのように2つの水平ステムに限定されないことに注意してください。

ユーザーが1本の水平線だけを読んで、パターンが逆さまのLのように見える場合もあります。また、ページの3番目のセクションを読んで、デザインがFではなくEのように見える場合もあります。 、クリック後のランディングページが長い場合は、ユーザーがフォローする可能性が高い視覚的な階層を作成するために、3つ以上のステムを含める必要があります。

Fパターンがクリック後のランディングページにどのように適用されるか

意図的なフローでWebページをデザインすることが重要です。 視聴者の注意を引くために特別に配置されたものがなければ、視聴者の目はFパターンデザインのコンテンツの多いページを自然に横切って移動します。

F-Patternデザインは、ブログ投稿、検索結果ページ、長い販売ページなど、テキストが密集しているページに最適です。ただし、短い形式のクリック後のランディングページをデザインできないわけではありません。 Fパターンのレイアウト。

アイトラッキング調査の結果を使用して、クリック後のランディングページを戦略的に設計し、訪問者が最も重要な要素に焦点を当てる可能性が最も高い場所に配置することができます。

視聴者の目は、ほとんどの場合、ページの残りの部分をスキャンする前に、ページの左上隅から開始することに注意してください。 したがって、クリック後のランディングページが混雑していて、訪問者にオファーのカウントダウンなどの特定の要素にすぐに気付かせたい場合は、必ずこの左上のセクションに配置してください。 次に、クリック後のランディングページの残りの部分を、明確な視覚的階層と、視聴者をCTAに導くフローを使用して設計します。

Fパターンを無視するクリック後のランディングページ

Pest Exterminatorは、このクリック後のランディングページを作成しましたが、Fレイアウトには従いません。 視覚的な階層がありません。

この写真は、害虫駆除業者がFパターンのレイアウトを使用できず、変換にコストがかかる可能性があることをマーケターに示しています。

あなたの注意はどこに最初に行きますか？ 画像？ 割引？ ワンフォームフィールド？ 一番下の3つのオファー？

あなたの目は特定の場所に引き付けられません。 いくつかの異なる方向にあなたの注意を引くことにあまりにも多くのことが起こっています。 各要素は、可能な限り多くの注意を引くようにフォーマットされているため、すべての要素が互いに競合します。 したがって、訪問者がページの主な目的を特定することは困難であり、害虫駆除業者はコンバージョンの生成に苦労する可能性があります。

次に、F-Readingパターンに従ったクリック後のランディングページの例をいくつか見てみましょう。

クリック後のランディングページが短い場合は、ページ全体を表示していることに注意してください。 長いページの場合、折り目の上にのみ表示されます。 さらに、リストされているブランドの一部は、以下に表示されているものとは別のバージョンでページをA / Bテストしている可能性があります。

Fレイアウトに続くクリック後のランディングページ

ドビコ

この写真は、DovicoがF-Patternレイアウトを使用して、訪問者が無料のトライアル召喚に集中できるようにする方法をマーケターに示しています。

上記のDovicoのクリック後のランディングページでは、FパターンのWebデザインのベストプラクティスを採用しています。 このページを表示するときに訪問者が自然に見るFパターンルートに沿って、各重要なコンポーネントがどのように配置されているかに注目してください。

  1. 視聴者はまずページの左上隅を見て、会社のロゴを見つけます。
  2. 最初の水平の茎に沿って移動すると、女性の笑顔になります。 ここで特に興味深いのは、Fアングルが彼女の顔に向かって下向きに傾斜しており、電話番号に直接向かい合っていないことです。
  3. ページの左側を下に移動して次の水平ステムに移動すると、視聴者は見出しと小見出しに注意を向けます。
  4. 最後に、Fパターンを垂直ステムに沿って続け、クリック後のランディングページの主な目的であるCTAボタンに移動します。

このようにFレイアウトに沿って最も重要なクリック後のランディングページ要素を配置すると、Dovicoのページを最適化し、訪問者にオファーに対して行動を起こすように説得するのに役立ちます。

動的収量

この写真は、Dynamic YieldがFパターンを使用して、訪問者が製品デモの召喚に集中できるようにする方法をマーケターに示しています。

Dynamic Yieldのクリック後のランディングページもFパターンのレイアウトに従いますが、名前とロゴは折り目の上の最小のものであるため、視聴者の目は別の場所から始まる可能性があります。

  1. フォントが大きく、一部が太字であるため、最初にページの見出しに引き付けられる可能性があります。
  2. 次に、最初のステムに沿って右側の画像に移動し、最初の水平ステムが完成します。
  3. 垂直ステムを下にスキャンすると、視聴者は小見出しを読みます。
  4. 続けて、明るい青色のCTAボタンは、次に訪問者の注意を引く可能性があります。
  5. CTAボタンの後、顧客バッジは追加のステムとして機能し、ページは折り目の下で同様の方法で続行されます。

共同カイロプラクティック

この写真は、共同カイロプラクティックがFパターンを使用して、訪問者がコンバージョンに集中できるようにする方法をマーケターに示しています。

F-Patternのデザインは、必ずしも従来のF-Shapeに従う必要はないため、JointChiropracticのクリック後のランディングページにかなりの数の水平ステムがあることに注意してください。

  1. Dynamic Yieldと同様に、見出しはFパターンで始まります（そしてフォームとともに右側に続きます）。
  2. 第二に、ミッションステートメント（コピーの残りの部分よりも大きな活字で）は次の語幹に沿っています。
  3. 最後に、The Joint Chiropracticの図像と大胆な利点が、パターンの最終的な茎を構成しています。

ステムの数が多いにもかかわらず、ページはF-Pattern Webデザインのベストプラクティスを念頭に置いて作成されました。これにより、訪問者はクリック後のランディングページの最も重要な部分を簡単にたどって集中できます。

ボストングローブ

この写真は、ボストングローブがFパターンレイアウトを使用して訪問者をプロモーションに集中させる方法をマーケターに示しています。

Boston Globeのクリック後のランディングページは、通常のF字型に準拠していません。これは、最終的に、訪問者にプロモーションでコンバージョンを促すのに役立ちます。

  1. 左上隅から始めて、訪問者は最初に新聞のロゴを見つけます。
  2. ロゴのすぐ下には見出しがあり、その後に同じ水平方向のステムに沿った画像が続きます。
  3. 垂直のステムを続けて、訪問者は明るい緑色のCTAボタンに固執します。
  4. 垂直方向のステムをさらに下に進むことを選択した場合、無制限のアクセスにサインアップしたときに何が期待できるかを学習します。

Fパターンを使用する番です

必要なクリック後のランディングページ要素をすべて含めることはコンバージョンにとって重要ですが、それらのレイアウトも同様に重要です。

Fパターンのデザインは、訪問者が特定の要素に集中できるようにするための視覚的な階層と意図的なフローを確立するのに役立ちます。 あなたが彼らにあなたが望む道をたどらせることができれば、彼らは跳ね返る可能性が低くなり、代わりにあなたのページでより積極的に行動を起こすでしょう。

これらの例を念頭に置いて、F-Layoutを実行する番です。 Instapageを使用して独自のプロのクリック後のランディングページを作成し、今すぐエンタープライズデモをリクエストしてください。