絶対確実なリンクとCTAを設計する方法
公開: 2021-07-19あなたはあなたのウェブサイトの統計を見て、「なぜ人々は私が望むところに行かないのですか?」と思ったことがありますか?
なぜ彼らはあなたの製品ページにアクセスしないのですか? なぜ彼らは何も購入しないのですか?
この投稿では、訪問者がWebサイトをどのように進行するかを制御するのに役立ついくつかの専門家のヒントを共有します。
問題を特定する
まず、問題が何であるかを特定する必要があります。 Google Analyticsなどの便利なツールを使用すると、サイトに関する多くの統計情報を得ることができますが、Crazy Egg、Heatmap.com、Inspectletなどの視覚的なツールを使用すると、問題の場所を正確に特定するのに役立ちます。サイト嘘。
ヒートマップのような視覚的な参照フレームがあると、視聴者の注意を引いているものを即座に示すことができます。 スクロールマップと組み合わせると特に便利です。スクロールマップを使用すると、ページの訪問者がどれだけ下を見ているかを知ることができます。 問題をすばやく簡単に修正できる場合もありますが、それほど明確でない場合もあります。 うまくいけば、これらのヒントがあなたのサイトを改善し、あなたの目標のより多くを達成するのに役立つでしょう。
ソリューション
明快さ
気が遠くなるように聞こえますが、問題は、クライアントがリンクとして何が構成されているのか、何がリンクとして構成されていないのかが一目でわからないほど単純な場合があります。 これはあなた自身や他の人には明白に思えるかもしれませんが、私たちは皆が異なって動作し、あなたがそれを見る方法とは異なってあなたのウェブサイトを見るかもしれないことを覚えておく必要があります。
たとえば、サイトのプロモーション画像により、訪問者がクリックするはずの場所を特定することが困難になる場合があります。 これは、downloads.cnetやfilehippo.comなどのWebサイトで非常に一般的な問題です。


Download.cnet.comは、この点でfilehippoと同じくらい悪いです。 ダウンロードリンク、またはページの上部にある大きな明るいオレンジとブルーのバナーを最初に見ましたか? この場合、それはあなたを会社のウェブサイトに導くだけですが、別のものはあなたをどこにでも導くことができます。
彼らはこれをどのように修正できますか? 明確にするだけで、この問題はすぐに解決します。 彼らは人々を誤解させようとしている広告から彼らのリンクを切り離す必要があります。 1つの方法は、タイトルとそれに続くダウンロードリンクの周りに大きな露骨な境界線を追加するか、タイトルとダウンロードリンクをさらに強調するために完全な背景色と間隔を追加することです。 ダウンロードリンクを指す矢印のような単純なものでも、驚異的に機能します。 リンクを他のリンクからすばやく目立たせて、「クリックの失敗」を減らすためのあらゆるもの。
スタイル
もう1つの問題は、リンクとCTAのスタイル設定方法である可能性があります。 さて、スタイリングに関しては正しいことも悪いこともありません。 それはすべて、あなたのデザインとウェブサイトで何がうまくいくか、あなたが最もよく見えるもの、そしてあなたの聴衆にとって何が最もうまくいくかによって異なります。
そうは言っても、ここ数年、「空白」の広大な海で大きくて明るいボタンが急増していることに気づいたかもしれません。 この傾向には非常に正当な理由があります。 調査と統計によると、訪問者はこれらの種類のリンクを利用する可能性が高く、おそらく他の亜種よりもそうです。

しかし、これはなぜですか? ユーザーとして、探索するための多くの手段とリンクがあるWebサイトではなく、対話する要素が非常に少ないサイトに惹かれるのはなぜですか?
シンプルです。これにより、煩雑さが解消されるだけでなく、スタイリングにより、クリックできるものとできないものが非常にわかりやすくわかりやすくなります。 CTAとサインアップ/ログインボタンは私たちの注意を引き、それらをクリックするように私たちを招待します。
しかし、これはすべてのリンクが大きく明るいボタンでなければならないことを意味しますか?
どういたしまして。 「行動を促すフレーズ」、つまり訪問者に働きかけてもらいたいリンクだけを強調したいと思います。プロモーション販売ページや最新ニュースなど、何らかの形で訪問者と私たちに利益をもたらすものだと思います。物語。

PayPalの例に戻ると、何かへのリンクが非常に明確である限り、より標準的なリンクや重要性の低いリンクにプレーンテキストのリンクを使用しても問題ありません。 昔はこれは常に下線付きのテキストで示されていましたが、下線付きのリンクは現代のデザインにはほとんど場所がないと感じる人もいますが、デザインに適合する限り、今日でもこれを使用できます。
たとえば、PayPalの「詳細」リンクの下にある「PayPalの顧客ではありませんか?」というテキストを見てください。 始めましょう。 最後の2つの単語を単に太字にすることで、訪問者の注意が引き付けられ、微妙に対話するように促されます。 「このテキストは異なります」と彼らは考えます。 「そこに何かありますか? なぜそのビットは太字で、残りは太字ではないのですか?」 これにより、ユーザーはその上にカーソルを合わせて、それがリンクであることを発見できます。
これは単純な違いですが、ユーザーの注意を1秒ごとに戦わなければならない世界では、クリックスルーが発生する可能性のある違いであり、実装が非常に簡単です。 あなたのウェブサイトとあなたの顧客にとって何が最も効果的かを見てください。
画面上の場所
ユーザーはリンクを探すためにサイトを精査するのに費やす時間がほとんどなく、無駄な時間が増えると、より多くの人がサイトを離れることになります。 では、どうすればこれを回避できますか? ここでも、ユーザーがリンクをできるだけ簡単に識別できるようにするだけです。
ここでは、スクロールマップが非常に役立ちます。 私の経験から、ページへのほとんどすべての訪問者はページの一番上を見るでしょう、それでも20%未満の人々が一番下までスクロールします-長いページの場合はさらに低くなります。 しかし、80%以上が、ページの最初の50%を表示します。
画面サイズは、画面解像度やデバイスサイズとともに、これに大きな役割を果たします。 ただし、これは、ディスプレイの下部より下にあるものが訪問者に見えなくなる可能性があることを意味します。 したがって、理想的には、貴重なCTAがページの上位に配置されるようにします。 問題は解決しましたよね?
これは経験則として考慮するのに適したものであり、単一の製品やプロモーションに特に適しています。 しかし、たとえば製品の検索結果を比較する場合はどうでしょうか。 あなたは訪問者の注意を引くために戦う多くの物を持っているでしょう。
ここで、デザインで3つの要素(明瞭さ、スタイル、場所)を組み合わせる必要があります。 覚えておくべき重要なことは、画面に情報が多すぎると、ユーザーはすぐに興味を失ってしまうということです。 表示する商品がたくさんある場合は、提供できる最小限の情報(理想的にはタイトル、価格、「詳細情報/今すぐ購入」CTA)を提供する必要があります。
他に何を含めるかを決めるのはあなた次第です。 しかし、デザインの良い例については、テスコのような大きなスーパーマーケットのサイトを見てください。

「パン」を検索するだけで何百もの異なる商品が見つかりますが、テスコはすべての商品に十分な余裕を持たせ、ショッピングプロセスを「数量?」に簡素化しました。 および「追加」。
また、ボタンがすべてのルールに従っていることに気付くかもしれません。ボタンは明確で、魅力的な間隔とスタイルが設定されており、製品とその説明の下のグリッド上に論理的に表示されます。
他の例を検索して、複数のCTAを提示する場合に、大きなeコマースサイトが何をするかを確認してください。見つけたものに驚かれるかもしれません。
概要
うまくいけば、このブログはあなたのウェブサイトの成功を本当に後押しするのを助けることができる一種の簡単なトリックへの洞察をあなたに与えたでしょう。 要約すると、リンクとCTAを作成するときに覚えておく必要があるのは次のとおりです。
- 明快さ。 特に混乱を引き起こす可能性のある他のリンクやボタンがある場合は、CTAがページ上の他のどの部分よりも目立つようにしてください。 あなたは即座に本物と偽物を区別することができるはずです。
- スタイル。 人々は大きな明るいボタンに魅了され、私たちは注目を集める大きなテキストフィールドに惹かれます。 ユーザーがリンクまたはボタンを識別するために必要な労力が少ないほど、ユーザーはそれらをクリックする可能性が高くなります。 これは、小さくて重要性の低いリンクに適用されます。テキストや画像のリンクを失いたくないので、リンクとCTAの設計方法について厳格なガイドラインを設定してください。 太字のフォント、さまざまな色、またはその他のものを使用して、クリック可能なものとクリックできないものを強調表示して区別します。 それらが一貫して使用されていることを確認してください。 同様に、本当に正当な理由がない限り、どの画像にもこれらの要素が組み込まれていないことを確認してください。
- 場所、場所、場所。 リンクとCTAを配置する場所が重要です。 非常に価値があり重要な「今すぐ購入」リンクが誰かのスクロールしなければ見えない位置に表示されない場合、ユーザーの50%未満がここまでスクロールダウンするため、クライアントがクリックする可能性は50%未満です。
このアドバイスがお役に立てば幸いです。 常に周りを検索して、この問題を解決するために他の人が何をしているのかを確認し、自分のサイトを自分のサイトと比較して、どこでどのように自分のサイトをさらに改善できるかを確認することを忘れないでください。
