ランディングページの裏側：コンバージョンを促進するユーザーエクスペリエンスの原則

公開: 2017-06-01

昨日、マーケティングキャンペーンは私のマウスをほとんど壊しました。

どのように？

私を苛立たせて、部屋の向こう側に投げつけようとしていました。

ようやく落ち着いた後、怒りから学ぶべき貴重なマーケティングの教訓があることに気づきました。そして、これがそれが何であるかです…

クリック後のランディングページでは、使いやすさを最優先する必要があります

これが起こったことです。土壇場のホテルが必要だったので、Googleの検索バーに「hoteltonightBoston」と入力しました。

最終的に、有料検索広告をクリックした後、HotelTonightから場所固有のクリック後のランディングページに到達しました。折り目の上は次のようになりました。

その上で、私の目は、視覚的階層の中で最も注目を集める要素、つまり「ボストンでの直前のホテル取引」と書かれたページ上の最大のテキストにすぐに惹かれました。

その下をちらっと見て、いくつかの価格を見ました。次に、下にスクロールしてさらにリストを探しました。これが私が見たものです：

ホテルはありましたが、価格や空室状況の指標はありませんでした。そのため、詳細を取得するには1つを選択する必要があると思いました。贅沢なことは何も必要ないので、「ミッドタウンホテル」のリストのタイトルをクリックして詳細を確認しました。

…しかし何も起こらなかった。

「これをもう一度試してみましょう」と思ったのですが、その下のサブタイトルをクリックして「飾り気のないバックベイベース」と読みました。

…それでも…何もありません。

「「基本」ラベルをクリックするとどうなりますか？」

何もない。

「たぶん、このリストは壊れています。ウィンダムボストンビーコンヒルをクリックするとどうなりますか？」

繰り返しますが、何もありません。

その時点で私はイライラし、必死にページ全体をクリックしました。私の次の考えは、私は大声でぼんやりしました：「私はただダムリストを見ることができますか？！」

このページがとても使いづらかったのはなぜですか？

クリック後のランディングページでは、使いやすさを最優先する必要があります。

クリックしてツイート

ユーザーエクスペリエンスのために設計することの重要性

審美的には、このページには明白な問題はありませんでした。それは私をフォールドブラウジングリストの下に置くのに十分信頼できるように見えました。

しかし、Webデザインには、見栄えを良くするだけではありません。ページの「ユーザビリティ」は、ユーザーの観点からその機能を実行する上でどれほど効果的であるかを表します。 Do n't Make MeThinkの著者であるSteveKrugによると：

[ユーザビリティ]とは、実際には、何かがうまく機能することを確認することを意味します。平均的な能力と経験を持つ人が、ウェブサイト、トースター、回転ドアなど、目的に合わせて、絶望的にイライラすることなく使用できることを意味します。

残念ながら、オンライン（HotelTonightのクリック後のランディングページ）とオフラインの両方の多くのデザインは、ユーザー向けに最適化されていません。「プッシュ」ドアを引いたことがある場合は、UXデザインが悪いことを経験したことがあります。

自分を馬鹿だと考える代わりに、なぜデザイナーが「プッシュ」ドアに「プル」ハンドルを取り付けることを選んだのか不思議に思うはずです。

それはあなたではありません。それはデザインです。

使い勝手が悪い例は他にもたくさんあります。それぞれに触れるのではなく、オーディエンスを念頭に置いてユーザーインターフェイスを作成しないと、ユーザーエクスペリエンスが低下する可能性があると言っても過言ではありません。

オンラインでは、その貧弱な経験はあなたのウェブサイトに悲惨な結果をもたらす可能性があります。 Webユーザビリティの父であるJakobNielsenから：

ウェブサイトが使いにくい場合、人々は去ります。 ホームページに会社が提供するものとユーザーがサイトで何ができるかが明確に記載されていない場合、人々は去ります。 ユーザーがウェブサイトで迷子になった場合、彼らは去ります。 ウェブサイトの情報が読みにくい場合やユーザーの重要な質問に答えられない場合、彼らは去ります。 ここでパターンに注意してください。 ユーザーがウェブサイトのマニュアルを読んだり、インターフェースを理解しようとして多くの時間を費やしたりするようなことはありません。 他にもたくさんのウェブサイトがあります。 ユーザーが困難に直面したとき、立ち去ることは最初の防衛線です。

設計プロセス中に、クリック後のランディングページの作成者は、自分のスキルを披露することが目標ではないことを忘れがちです。代わりに、それは別の人間が目的を達成するのを助けることです。

大まかに言って、その目的は、クリック後のランディングページでオファーを評価し、場合によっては主張することです。具体的には、設計を開始する前に、次の質問を自問する必要があります。

このクリック後のランディングページの目的は何ですか（ドライブのサインアップ、ダウンロード、購入など）？
彼らがそれに着陸した後の私の聴衆の特定の目的は何ですか？
彼らは私の申し出をできるだけ簡単に評価するために何が必要ですか？
彼らが私の申し出を簡単に主張できるようにするにはどうすればよいですか？

それらに答えるには、ターゲットオーディエンスに関する包括的な知識、クリック後のランディングページのユーザビリティのベストプラクティスのアイデア、説得力のあるクリック後のランディングページを作成するための洞察の3つが必要です。

1つ目は、ここで開発する方法を学ぶことができます。 2つ目は、このブログ投稿にあります。 3つ目は、新しいInstapageリソースで見つけることができます。説得力のあるクリック後のランディングページを構築するための究極のガイド：

クリック後のランディングページのユーザビリティの原則

すべてのビジネスはユニークであり、すべてのオファーは異なりますが、優れたユーザーエクスペリエンスを提供するための基本は同じです。最適なユーザーエクスペリエンスのためにクリック後のランディングページを設計するときは、次の5つのCに留意してください。

一貫性

クリック後のランディングページを作成している間、競合他社の中で目立つことを目的として、デザインの慣習から逸脱したくなるでしょう。これがあなたがすべきではない理由です…

ウェブを再発明しようとしないでください

インターネットの初期の頃、デザイナーが風変わりなレイアウトや要素を試してみるのは珍しいことではありませんでした。これらの宝石を見てください：

当時、ウェブがどのように使われるかは完全には明確ではありませんでした。そのため、横向きの「FAQ」ボタンとスペースの背景は、クリエイティブなアイデアのように見えました。

ただし、今日では、このようなWebページは表示されなくなります。これは、私たちが学んだ設計規則に違反しているため、ユーザーエクスペリエンスが低下する可能性があるためです。スペースの背景は気が散り、横向きのテキストは不必要に読みにくくなります。

そのため、Webのルックアンドフィールを再発明しようとするのではなく、明確なUSPで目立つことに集中する必要があります。ボタンは、星や一時停止の標識ではなく、ボタンのように見える必要があります。ロゴは、右下ではなく、ページの左上隅に配置する必要があります。

一貫性は、使いやすさの最大の要因の1つです。訪問者がページ上の要素を認識して理解できるようにするには、訪問者に馴染みのある要素、つまりWeb上の他の場所で見られる要素を使用する必要があります。

HotelTonightのクリック後のランディングページでの苛立たしい経験に戻りましょう。特定のリストをクリックすると、ほとんどすべてのホテルのクリック後のランディングページが機能するため、より多くの情報を得ることができると思いました。あなたはそれについてもっと学ぶためにリストをクリックします。

しかし、これはそのようには機能しませんでした。ホテルのクリック後のランディングページがどのように機能するかという私の期待に応えられず、その結果、ユーザーエクスペリエンスが苛立たしくなりました。

ここでのレッスンは？

訪問者がそれらを見ることを期待する場所に要素を配置します。見込み客が期待するように設計します。かわいくならないで。一貫性を保つ。

メッセージの一致は絶対に存在する必要があります

クリック後のランディングページのデザイナーが忘れがちなもう1つのことは、クリック後のランディングページは、訪問者のブランドに対する第一印象ではなく、リファラーです。そのため、クリック後のランディングページでは、広告、メール、または有料検索結果の約束を果たす必要があります。 SmashingMagazineの共同創設者であるVitalyFriedmanによると、そうでない場合は次のようになります。

ほとんどのユーザーは、興味深く（または便利な）クリック可能なものを検索します。 いくつかの有望な候補が見つかるとすぐに、ユーザーはクリックします。 新しいページがユーザーの期待に合わない場合は、[戻る]ボタンをクリックして、検索プロセスを続行します。

メッセージを完全に一致させるには、クリック後のランディングページの単語、ロゴ、さらには色でさえ、リファラーと一致している必要があります。このデザインのベストプラクティスを無視すると、ページがすぐに破棄されます。

明快さ

明快さと一貫性は関連しています。人々がデザイン要素を認識するとき、彼らはそれがどのように機能するかについての考えを持っています。そのデザイン要素も明確であれば、その目的に疑問の余地はありません。訪問者がページ上のすべてを簡単に理解して使用できるようにする方法は次のとおりです。

理解のためにコピーを書く必要があります

言葉は難しい—それを書く人にとっても読む人にとっても。コピーライターは、オファーについてのすべてをすでに知っているときに、オファーを明確に説明しようとするという課題に直面しています。そして、読者は、現在それについて何も知らないのに、オファーを理解しようとするのと同じくらい難しい立場に置かれます。包括的なコピーを作成するためのヒント：

高度な技術知識を持つ聴衆のために書いているのでない限り、すべての専門用語を削除し、見込み客が6年生のレベルで読んでいると想定してください。
あなたの申し出の利点を強調してください。「doodads」や「thingamawhats」などの製品機能には、説得力がありません。代わりに、それらの機能によって何ができるかを人々に知らせてください。
あいまいな単語を置き換えます。一部の人々にとって「品質」という言葉は「高品質」を意味します。他の人にとっては、それは「満足」を意味します。より適切な記述子を使用して、オファーの価値を伝えます。

彼らがなぜ彼らが回心しなければならないのか理解できないなら、あなたの見込み客がそうする可能性はありません。

CTAボタンは、クリックが何をするかを訪問者に知らせる必要があります

認識可能なボタンを作成した場合は、すでに半分の戦いに勝っています。残りの半分は、訪問者がボタンをクリックするとどうなるかを訪問者に知らせることです。このために、あなたの申し出を考慮してください。

訪問者からの支払いを必要としない場合は、次のように自問して、説得力のあるCTAを選択します。

クリック後のランディングページのデザインに関する電子書籍の場合は、「Send my ebook」を行動の呼びかけとして使用するか、「Make me adesignpro」などのより具体的なものを使用することを検討してください。 AmyPorterfieldの例を次に示します。

一方、クレジットカード番号が必要な場合は、上記のような説明的なタイトルを使用せず、代わりに「購入」や「寄付」などの露骨に基本的なタイトルを使用することをお勧めします。最後に必要なのは、「Make me a design pro」ボタンを押したときにカードに請求されることを知らなかった、熊手を振るう顧客の群れです。

フォームのラベルとフィードバックは説明的である必要があります

あなたのフォームに記入するために、訪問者はあなたが彼らに何を望んでいるかを正確に知る必要があります。これらのヒントは常識のように思えるかもしれませんが、それでも従わないフォームはたくさんあります。

消えるプレースホルダーテキストをラベルとして使用しないでください。見込み客を混乱させ、彼らの記憶に挑戦することが示されています。代わりに、ラベルは対応するフィールドの上に配置する必要があります。
ラベルは、対応するフォームフィールドの最も近くに配置する必要があります。あいまいな白い間隔、または別のフィールドから等距離の間隔があると、見込み客はどの情報を送信する必要があるのか疑問に思う可能性があります。
エントリは特殊文字を含む8文字である必要がありますか？フォームはアスタリスクを処理できませんか？フィールドに特定の入力が必要な場合、ラベルは訪問者に通知する必要があります。
エラーメッセージは、注意を引き、説明的なものにする必要があります。赤だけでなく、太字のテキストや間違ったフィールドの周りのアウトラインなど、入力の問題を示す多くの信号を使用してください。彼らが2回目にそれを修正できるように、彼らが犯した間違いを知っていることを確認してください。
オプションフィールドと必須フィールドを明確に区別します。

あなたの申し出は理解しやすいはずです

なぜ人々はクレジットカードにもっとお金を使うのですか？現金を使うのがよりリアルに感じるからです。

カードをスワイプしても、お金は両手を交換しません。料金は後日まで銀行の明細書に表示されません。アカウントの残高を確認しないと、購入がまったく行われなかったかのようになります。

INGの従業員を対象とした金融教育セッション中に実施された調査実験について考えてみます。参加者の2つのグループが尋ねられました：

彼らが401kプランに登録する場合。
彼らが定期的にどれだけ節約したか。

最初のグループには、これらの質問だけが提示されました。しかし、2番目のグループには追加の指示が与えられました。もっと節約した場合に起こるであろうあなたの人生のすべての前向きなことを想像してみてください。

その結果、グループ2の登録数が20％増加し、人々が節約できる金額が4％増加しました。

これは、クリック後のランディングページのオファーにとってどのような意味がありますか？

人々にその価値を理解してもらいたいのであれば、その利点を明確に説明する方法でそれを提示する必要があります。そして多くの場合、それはテキストの代わりに視覚補助を使用することを意味します。

一部のオファーでは、インフォグラフィックが最適です。他の人にとっては、解説動画やヒーローショットがうまくいくでしょう。

どちらを選択するかは、視聴者とオファーによって異なります。伝えるのではなく表示し、商品やサービスを最もよく売っている商品が見つかるまでテストします。

簡潔さ

あなたのページをデザインするときに覚えておくべき最も重要なことは、最も一般的に無視されるかもしれません：あなたはほとんど時間と注意のない人々のためにデザインしています。

誰もあなたのクリック後のランディングページを楽しみのために閲覧していません。彼らは電子メールの広告またはリンクをクリックし、あなたの申し出が主張する価値があるかどうかをできるだけ早く知りたいと思っています。つまり…

テキストはスキミング用に最適化する必要があります

「各ページの単語の半分を取り除き、次に残っている単語の半分を取り除きます」と、Krugは彼の本の中で述べています。クリック後のランディングページのコピーを50％カットしたら、残りの部分をスキミング可能にすることが重要です。人々は読むのが好きではないからです。

ふわふわの副詞やストックフレーズを削除して、冗長性を最小限に抑えます。箇条書きと小見出しを使用して、威圧的なテキストのブロックを分割します。重要な単語を目立たせるために、太字や斜体などの効果を追加します。

視覚的な階層は重要性を伝える必要があります

ページコンテンツの配置と操作の方法は、訪問者が見るものと見逃すものに大きく関係しています。 HotelTonightのクリック後のランディングページで、召喚状を見逃しましたが、「ボストンでの直前のホテルの取引」という見出しに気づきました。

どうして？

そのサイズは、折り目の上の最も注目を集める要素になるためです。ユーザーの時間がほとんどない場合（常にそうです）、配置、色、サイズなどの視覚的な手がかりを使用して、ページで何が重要かを判断します。方法のいくつかの例：

より大きく=より重要
より高い配置=より重要
より大きなコントラスト=より重要

ビジュアル階層を使用して訪問者をCTAボタンに誘導する方法について詳しくは、こちらをご覧ください。

フォームはできるだけ短く、簡単に記入できるようにする必要があります

名前やメールアドレスから役割や予算まで、クリック後のランディングページフォームにあらゆる種類の見込み客情報をキャプチャしたくなるでしょう。しかし、そのすべての情報が絶対に必要でない場合は、それを求めるべきではありません。

最高のリード生成は、見込み客を認定するために必要な最低限のことを知っているマーケティングチームによって達成されます。一部の人にとっては、それは3つのフィールドに相当する情報になります。他の人にとっては、10になります。

フォームの長さに関係なく、記入するのに苦労しないようにする必要があります。訪問者がワンクリックのソーシャルオートフィルを使用して情報を送信できるようにし、同じ入力で一般的に回答されるフィールドに事前入力します（たとえば、「国」をキャプチャし、見込み客のほとんどが米国からのものであることがわかっている場合は、事前入力します「米国」は良い習慣です）。

さらに、関連するフィールド（市、州、郵便番号など）でない限り、訪問者の下向きの勢いを乱さないように、フィールドを1列のレイアウトで表示します。次に、それらを並べて配置すると、訪問者が概念的に役立つだけでなく、フォームの知覚される長さを短くすることができます。

気を散らすものを排除する必要があります

オファーを簡潔に提示することの一部は、コンバージョン率を損なう可能性のある他のすべてのものを排除することです。それは…を取り除くことを意味します

ナビゲーションメニュー
ロゴ内のホームページへのリンク
他のオファーを宣伝する競合する召喚状
フッターのアウトバウンドリンク

Webページをクリックするためのオプションが多すぎる場合、Hick'sLawとして知られる原則が機能します。 Miles Soegaardは、Interaction DesignFoundationのブログでそれをわかりやすく説明しています。

ヒックの法則は、ユーザーに提示する選択肢が多いほど、ユーザーが決定に達するまでに時間がかかるという単純な考えです。

しかし、研究者のシーナ・アイエンガーは、選択の過負荷が意思決定にかかる時間を増やすだけではないことを発見しました。

具体的には、ある実験では、彼女と同僚のMark Lepperが食料品店に陳列台を設置し、それをサンプリングした人にジャムの瓶を1ドル引きました。初日、彼らは買い物客に24種類のスプレッドを提供しました。 2日目は6つしか提供しませんでした。

実験の終わりに、彼らは大きなディスプレイがより多くの注目を集めていることを発見しましたが、それは10分の1の売り上げを生み出しました。

さらに、人々がより多くのオプションを提供されると、彼女は彼らが以下を行う可能性が高いことに気づきました。

自分の利害に反する場合でも選択を遅らせる
より悪い選択をする
客観的にパフォーマンスが向上した場合でも、満足度が低くなるものを選択してください

TEDトークで、彼女はこれを具体的に述べています。

実際、私たちがますます目にしているのは、削減する意思があるかどうか、つまり、これらの無関係で冗長なオプションを取り除くことです。そうですね、売り上げは増加しています。 コストの削減があります。 選択エクスペリエンスの改善があります。

選択の最適化に関連する他の目を見張るようなポイントについては、以下のすべてをご覧ください。

信頼性

信頼性は、平均的なWebページよりも、クリック後のランディングページでさらに大きな役割を果たします。クリック後のランディングページは、訪問者が個人情報、場合によってはお金を手放すように特別に設計されています。それはあなたが彼らにあなたを信頼させる必要があることを意味します。方法は次のとおりです。

あなたの権威はデザインを通して伝えられるべきです

誰かの権威を評価するとき、心理学者のロバート・チャルディーニは、具体的に3つのことを探すことを提案します。

役職– Dr.、Prof.、Ph.D。、社長、創設者、CEO、業界の専門家
服装：ユニフォーム、スーツ、衣装（軍服、高価なスーツ、白衣）
トラッピング：特定の役割が付属するアクセサリ（警察のバッジ、宗教、ロザリオ、素敵な車など）

しかし、オンラインでは、ビジネスを運営している人々の写真や知識がなければ、見込み客はそれらのものを探すことができません。代わりに、彼らはあなたのデザインを評価します。

あなたのページが2002年にウェブデザインを行うインターンによって作成されたように見える場合、あなたは権威あるものとして出くわすことはありません。たとえば、これはハンガーゲームのベストセラー作家であるスーザンコリンズのウェブサイトのように見えますか？

ありえないですよね？

それは可能です、そしてそれは本当にそうです。

調査によると、オンラインでは、第一印象の94％が主にデザインに関連しており、ウェブサイトの実際のコンテンツに関連しているのはわずか4％です。 Webページがユーザーの期待どおりに表示されていることを確認してください。

信頼性バッジは目立つように表示する必要があります

権威はその部分を見ることですが、信頼性はあなたが能力があることを証明します。可能であれば、次のことをできるだけ多く紹介してください。

あなたが獲得した賞
あなたが出演した著名な出版物やプログラム
あなたが持っている経験
信頼できる企業とのパートナーシップ
幸せな顧客からのレビュー

これがHomeBayの素晴らしい例です。

信頼性指標を使用することは、あなたがあなたが言っているのと同じくらい資格があることを証明する簡単な方法です。人々に伝えるために、あなたは彼らが何を彼らを説得しません表示せずに最高です。

快適

ユーザーがアクセスしやすいページを期待し、検索トラフィックの主要なソースがそうでないページにペナルティを課す世界では、適応するか失敗するかという1つの選択肢しかありません。

便宜上、ページがこれらのルールに従わない場合、バウンス率は急上昇します。

ページがすぐに読み込まれるはずです

Googleのデータによると、読み込みに3秒以上かかると、53％の人がページを放棄します。そしてそこから、バウンスの確率はさらに高くなります。

22秒での平均的なモバイルのクリック後のランディングページの読み込みを考えると、それらのデータには問題があります。次のヒントを参考にして、訪問者の大多数を失うことを避けてください。

ページ要素を最小化します。 Googleによると、テストしたページの70％は1MBを超え、36％は2MBを超え、12％は4MBを超えていました。高速3G接続を介して、1.49MBのロードには約7秒かかります。原因は、ページ要素（画像、見出し、ボタンなど）が多すぎることです。
パフォーマンス予算を作成します。ページの読み込み速度、つまり「予算」を決定します。その予算から、それを満たすためにページに含めることができる要素を決定します。
画像を削減します。ファビコン、ロゴ、および製品画像は、ページのサイズの2/3に簡単に貢献できます。コンバージョン率の高いページには、38％少ない画像が含まれています。
JavaScriptの使用量を減らします。 JSは、HTMLコードの解析を停止します。これにより、クリック後のランディングページを訪問者に表示できる速度が遅くなります。 AMPや広告用AMPなどのプログラムは、JavaScriptを使用せずにページを作成するためのフレームワークを開発者に提供し、ほぼ瞬時にページをロードできるようにします。

クリック後のランディングページを高速化するためのヒントについては、この投稿をお読みください。

アクセシビリティの範囲を優先する必要があります

言うまでもありませんが、とにかく思い出させてください。ユーザーが選択したデバイスでページにアクセスできない場合、ユーザーはそのページをまったく使用しません。ピンチしてズームしたり、召喚ボタンをいじったりすることはありません。

ページは応答性の高いデザインにする必要があります。つまり、あらゆるデバイスの画面に合わせて調整する必要があります。そして、そのすべての要素は使いやすいはずです。

フィールドが小さすぎると、親指でフォームに入力するのが面倒です。 CTAボタンの面積が指パッドほど大きくない場合、CTAボタンをタップするのは困難です。デスクトップはもはやインターネットの最大のトラフィックソースではないため、モバイル向けにページをまだ最適化していない場合は、昨日です。

ユーザーエクスペリエンスはページごとに異なります

色や形から単語やレイアウトまで、無数のクリック後のランディングページのデザイン要素が、クリック後のランディングページのエクスペリエンスに影響を与えます。

コンバージョン率への影響を判断する最良の方法は、ユーザーがページ上でどのように行動するかをテストすることです。そして覚えておいてください：訪問者が今日あなたのページを使う方法は、彼らが明日それを使う方法ではないかもしれません。したがって、テストを停止しないでください。

クリック後のランディングページのユーザーエクスペリエンスのテストと最適化を簡単に開始するには、今すぐInstapageEnterpriseデモにサインアップしてください。