方向性の手がかり：訪問者に行動を起こさせる設計のヒント
公開: 2017-02-17次のクリック後のランディングページのデザインが完了しました。 あなたはキラーな見出しと小見出しを作り、非常に説得力のあるコピーを書き、フォームを完成させ、史上最高のCTAを作成し、ページ階層は的確です。 すべての要素は、訪問者に変換するように説得するのに最適な場所にあります。
これで、クリック後のランディングページを公開する準備ができましたね。 完全ではありません。
チームが作成に何時間も費やしたビデオを訪問者が確実に視聴できるようにするにはどうすればよいですか？ または、訪問者がその完璧なCTAボタンをクリックしますか？
これらすべてを偶然に任せないでください。 訪問者を行きたい場所に正確に誘導します。 最も重要なクリック後のランディングページ要素に焦点を合わせて（そしてアクションを起こして）ほしい場所を見てもらいます。
FパターンおよびZパターンのレイアウトと同様に、方向性のある手がかり（視覚的な手がかり）を使用すると、訪問者が意図的にページをナビゲートするように影響を与える可能性があります。 これら3つのクリック後のランディングページデザインコンポーネントはすべて、心理学を使用してユーザーの行動に影響を与え、行動を起こさせるのに役立ちます。
これがどのように機能するかを詳しく見てみましょう。
方向性の手がかりとは何ですか？
方向性の手がかりは、矢印やモデルの視線などの視覚的な補助であり、クリック後のランディングページの最も重要な要素、たとえばリードキャプチャフォーム、CTA、ビデオ、証言、または折り目の下の情報を指し示します。
方向性キューには、暗黙的および明示的な方向性キューの2つの基本的なタイプがあります。
これらの両方が訪問者の注意を意図的に集中させる方法を検討する前に、これらの視覚補助の背後にある心理学を見てみましょう。
視覚的手がかりの背後にある心理学
視覚的な手がかりは信号または雰囲気と考えることができ、無意識のうちにあなたの脳はそのような信号を識別できます。 たとえば、最初のデートでは、相手が興味を持っているかどうかを示すボディランゲージ、アイコンタクト、顔の表情など、相手が送っている雰囲気によって、デートについて多くのことを学ぶことができます。 気づかないうちに、みんなからこれらの雰囲気を拾います。
クリックしてツイート
あなたはデジタルマーケティングの文脈でそしてクリック後のランディングページで同じ雰囲気を伝えそして受け取ることができます。 クリック後のランディングページの視覚的な手がかりは、訪問者に微妙なメッセージ、雰囲気、感覚を与えます。
クリック後のランディングページでは、これらの雰囲気や手がかりをどのように翻訳するかを決定するものは何ですか？ 通常、私たちの認識に影響を与える傾向があるのは、私たちの過去の経験と蓄積された知識です。 また、以下に示すように、訪問者がページにアクセスして行動を起こすのに役立つさまざまなシグナルがあります。
クリック後のランディングページでの暗黙の方向性の手がかり
暗黙の方向性の手がかりは微妙で、訪問者に気付かれることはよくありません。 最も一般的なタイプには、空白、色のコントラスト、およびカプセル化が含まれます。 それぞれを見てみましょう。
ホワイトスペース
空白は、クリック後のランディングページのネガティブスペースまたは空の領域であり、特定の要素に注意を引くのに役立ちます。 空白を追加すると、ページを簡素化し、ユーザーエクスペリエンスを向上させ、オファーの全体的な理解を深めることができます。 それは、焦点を当てる要素が少なくなると、訪問者はあなたが望むものを見ることを余儀なくされるからです。
これは、見出し、小見出し、およびリードキャプチャフォームを囲む実質的な空白を使用するPercolateのクリック後のランディングページです。
色のコントラスト
対照的な色は、はっきりとした色の違いによって訪問者がその領域に注意を向けるようになるため、方向性の手がかりとして機能します。
実例として、Marketoはこのクリック後のランディングページでソーシャルメディアマーケティングガイドを提供していますが、色のコントラストが存在しないため、CTAは失われます。
ただし、このCodify Academyのクリック後のランディングページでは、赤が他のすべての色と対照的であるため、CTAボタンがページからジャンプします。
カプセル化
カプセル化、または要素のフレーミングは、フォーカスの囲まれたウィンドウを作成することにより、ページ上で重要なものを強調するもう1つの方法です。 デザイナーは、ページの乱雑さを減らし、特定の要素に注意を引くために、ボックス、アウトライン、および/または対照的な色を使用してこれを行うことがよくあります。
ベルビュー大学は、この手法を以下のページのヘッダー画像とフォームで2回使用しています。 ただし、フォームは、クリック後のランディングページの訪問者が情報を送信できるように、対照的な紫色のボックスで設計されているため、さらにカプセル化されています。
クリック後のランディングページでの明確な方向性の手がかり
明示的な手がかりは、暗黙的な手がかりと比較して人間の目には明白であるため、通常はすぐに見つけることができます。 このグループは、視線、ポインティングまたはジェスチャ、戦略的なオブジェクトの配置、矢印、および線のすべてで構成されます。 それぞれのタイプを詳しく見てみましょう。
視線
方向の手がかりとして人間の視線を使用することは、クリック後のランディングページで特に効果的です。 人々は他の人が見ているものを見る傾向があるので、画面上の誰かがフォームを見ると、訪問者もフォームに気付く可能性が高くなります。 このテクニックは、無意識のうちに訪問者にあなたが望む場所を見るように影響を与え、個人的な魅力も追加します。 ドナルド・トランプとヒラリー・クリントンはどちらもこのテクニックの価値を理解していました—キャンペーンシーズン中に寄付ページでそれを使用しました。
これは、カペラ大学のクリック後のランディングページで、見出し、小見出し、フォームの方向を見ている笑顔の学生が登場します。 気づかないうちに、訪問者はここでも注意を向ける可能性があります。
「WhenIWork」のページにあるように、社会的証明（例：お客様の声）も視線を利用できます。
ポインティングまたはジェスチャー
視線と同様に、重要な要素に向けてモデルポイントまたはジェスチャーを使用すると、訪問者はその領域に集中できます。 このテクニックは視線ほど微妙ではないので、 ジェスチャーが安っぽく不自然に見える可能性があります。 したがって、さまざまなジェスチャを使用してページをA / Bテストし、最良の結果が得られるものを確認してください。
オブジェクトの配置
特定のフォーカスエリアに向けられるように画像を配置すると、見込み客の注意を引き、その特定の要素をより目立たせることができます。
U-Packは、クリック後のランディングページフォームがすべての訪問者に目立つようにしました。 彼らはそれを黒い境界線でカプセル化しただけでなく、訪問者が注意を払わずにはいられないように、フォームに面して移動するトラックを配置しました。
矢印
移動中か静止中かを問わず、矢印はシンプルで簡単に理解できるため、最も一般的に使用される明示的な方向の手がかりの1つです。
Loud Rumorは、2段階のオプトインフォームで静止した手描きの矢印を使用して、CTAボタンのクリックに影響を与えます。
Webユーザーはスクロールに慣れていますが、通常、訪問者がスクロールしなければ見えない位置に移動できるように矢印が配置されています。 単純な囲まれた矢印を使用して、ConstantContactがこれをどのように行うかを確認してください。
これはBoardvantageからの別のものです—矢印がハイパーリンクされています。 クリックすると、ページが折り目の下にスクロールし、3つの異なるユースケースが表示されます。
線
線はあまり目立たない手がかりの1つですが、人間は自然に経路をたどる傾向があるため、クリック後のランディングページで非常に役立ちます。 これは、線形の方向性の手がかりが、訪問者をページのさまざまな部分に誘導したり、見込み客がページの特定のセクションに集中し続けるのに役立つためです。
たとえば、Datoramaは上向きのグラフ線を使用して、[今すぐ試す] CTAボタンを強調表示します。 訪問者がボタンをクリックすると、ページの下部にあるリードキャプチャフォームに送信され、そこで無料のDatoramaトライアルにサインアップできます。
訪問者に方向性のある手がかりで変換するように影響を与える
最初に要約した、ほぼ完璧なクリック後のランディングページについてもう一度説明しましょう。
見出し、コピー、フォーム、CTAは、コンバージョンを促進するために最も重要です。 これらの要素は、訪問者のクリック後のランディングページエクスペリエンスの一部にすぎません。 見込み客がコンバージョン目標にとって最も重要なことに注意を向けられるように、暗黙的および明示的な方向性の手がかりをいくつか追加します。
次のクリック後のランディングページにどのキューを追加しますか？ 何を決定しても、Instapageを使用して完全に最適化されたクリック後のランディングページを数分で作成できます。 今すぐInstapageEnterpriseデモにサインアップしてください。