これまで、ウェブサイトには、派手で醜いカラースキームでいっぱいのページ、小さなスペースに詰まったテキストが多すぎる、ポップアップして訪問者を苛立たせるなど、不要な要素がたくさんありました。

しかし、デザイナーは当時はそれ以上のことを知りませんでした。むしろ、彼らは自分たちが知っている唯一のデザイントレンドとベストプラクティスを使って作業しました。

それ以来、時代は大きく変わりました。

Web 開発者や Web デザイナーは、テクノロジーや手法による制限を受けなくなりました。つまり、デザインが貧弱であることの言い訳はもうありません。 これは、ホームページのヘッダー画像から フォーム 連絡先だけでなく、タイポグラフィからポップアップまで。 ユーザー エクスペリエンスをデザインするときは、すべてが重要です。

今日は、ポップアップを効果的にするものに焦点を当てたいと思います。これは、変換プロセスの重要な部分であると私は考えています。 具体的には、効果的なWordPressポップアップの構造と、このエキサイティングな要素がどのようにコンバージョン率を高めることができるかを見てみたいと思います。

WordPressでポップアップを使用するための議論

ポップアップは興味深いデザイン要素です。 それらは一時的にユーザーエクスペリエンスを中断しますが(通常はあまり評価されません)、正しく実行されたものは、訪問者が失うことを気にしないほど魅力的またはエキサイティングなものを提供します注意を払う分。

もちろん、この場合は、サブスクライバーを収集するのに役立つコンバージョン生成ポップアップについて話しています ニュースレター または訪問者に購入を促します。 ただし、ポップアップはさまざまな目的に使用できます。 たとえば、Cookie やプライバシー ポリシーを共有したり、訪問者がカートに何かを追加した後に関連するアイテムを推奨したり、簡単な調査を依頼したりすることもできます。

ポップアップ解剖 - ターゲット推奨事項のポップアップ

ほとんどの場合、ポップアップウィンドウを使用している場合は、訪問者にアクションを実行してもらいたいと思うでしょう。 結局のところ、妨害が彼らの時間の有用な使用ではないのに、なぜ彼らの経験を中断するのですか? ほぼ3,09億のポップアップの調査によると、これらのタイプのポップアップの平均コンバージョン率はXNUMX%であることがわかりました。

さて、それは疑問を投げかけます:ポップアップはまだ関連性があり効果的ですか? 市場が出口ポップアップ、ハローバー、フルページオーバーレイなどで非常に飽和している場合、これはWordPressサイトで使用する価値のある変換ジェネレータツールですか?

もちろん!!!

ポップアップが考慮に入れる多くの優れたWebデザインプラクティスがあります。 例えば:

  • ポップアップは、サイトのページから不要な混乱を取り除きます。
  • それらは通常、きれいなビジュアルと最小限のテキストで構成されています。
  • 行動の呼びかけはうまく設計されており、言葉遣いの観点から単純に提供されています。
  • ほとんどの人はポップアップに精通しており、ポップアップの操作方法を知っているため、訪問者には小さな学習曲線があります。
  • ポップアップは、アニメーション、ビデオ、またはソーシャルプルーフをサイトに注入する楽しい機会を提供します。
  • で簡単に作成できます WordPressのプラグイン ハッスルのような高品質または OptinMonster.

解剖ポップアップ - 社会的証拠HubSpot

一般に、適切に設計されたポップアップは、最も必要なときに訪問者の注意を引くのに最適です。 それらを使用して、タイムリーな通知または要求を送信できます。 また、訪問者データを使用して、購入を促すこともできます。

効果的なWordPressポップアップの構造

明らかに、WordPress サイトのポップアップの成功は、完璧に設計され、訪問者が対話せずにはいられない魅力的なオファーを備えているかどうかにかかっています。 それでは、効果的なポップアップの勝利の方程式がどのようなものか見てみましょう。

1。 スタイル

さまざまなタイプのポップアップは、訪問者をサブスクライバーに変換する際により効率的である傾向があります。

  • 電子メールサブスクリプションポップアップのコンバージョン率は2,9%です。
  • ウェルカムポップアップ(エントリ時にページ全体を埋めるポップアップ)は2,6%で変換されます。
  • スクロールトリガーのポップアップは1,9%を変換します。
  • SmartまたはHelloポップアップには、0,5%の変換が表示されます。

これは、従来の電子メールサブスクリプションポップアップを常に使用する必要があるという意味ではありません。 これはNeilPatelのサイトからの例です。

ポップアップ解剖学 -  Neil Patel's Bar Hello

これは、単純に設計されており、邪魔にならないため、よくできています。 et 最小限のフットプリントが見過ごされた場合に備えて、楽しいアニメーションを使用して注目を集めます。 スタイルの選択は、最も人気のあるスタイルや、コンバージョン率が高いことで最もよく知られているスタイルを使用することではないことに注意してください。 それはあなたのサイト、あなたの訪問者のために働き、そしてそれがその間の経験を補完するように設計されているスタイルを見つけることについてです。

2。 カラー

もちろん、色は常にウェブサイトのデザインにおいて主要な役割を果たします。 選択した色の背後にある心理学を理解することにより、変換するより効果的なポップアップを作成できます。 もちろん、ブランドの確立されたカラースキームも忘れることはできません。そのため、サイトで見栄えのするポップアップウィンドウをデザインすることと、そのバランスを見つけることがすべてです。また、訪問者に行動を起こさせます。

3。 構図

一歩下がって、ポップアップ全体を確認することが重要です。 ポップアップの各可動部分のデザインは重要ですが、ポップアップの全体的な構成も重要です。

ポップアップウィンドウは次のようにする必要があります。

  • シンプルでわかりやすいものにします。
  • きれいなラインで設計され、バランスが取れています。
  • 関連性のある高解像度の画像を含めます。 理想的には、オファーの主題を要約した単一の画像。
  • あなたのサイトの拡張であり、明らかにカスタマイズオプションが制限されたポップアップから作成されたものではないようです。
  • 大きくて読みやすいタイポグラフィを使用します。

4。 テキスト

次に、ポップアップメッセージが表示されます。 これらのことを行う言語を開発している最中ではありませんが、ポップアップをテキストで埋める際に知っておく必要のあるベストプラクティスがいくつかあります。

次の点に注意してください。

  • 常に見出し、短いメッセージ(XNUMX文で十分です)、および行動を促すフレーズを含めてください。
  • 訪問者の感情に訴える強い言葉を使用します。
  • 簡潔にしてください。 30語以内で書けない場合、このメッセージはポップアップウィンドウに属していません。
  • サイトで使用しているのと同じトーンと個性を使用してください。
  • 訪問者がサイトの他の場所で見つけられないような貴重なものを提供してください。
  • 可能であれば緊急を使用してください。 あなたが言葉でそれをすることができないならば、色でそれをしてください。

解剖学ポップアップ-ウィッシュポンド画面オーバーレイ

5。 CTA

最近、ウェブサイトが訪問者にXNUMXつの行動を促すオプションを提供しているという奇妙な成長傾向があります。 この傾向が高まっている理由は理解できますが、多くのWebサイトでこの傾向が誤って適用されているのを見て、この傾向がやがてなくなることを願っています。

あなたはおそらくこの悪いアプリケーションを自分で見たことがあるでしょう:

  1. ポジティブオプション :これは、「ああ、ありがとう、ありがとう! 私はこの申し出が私の人生をより良く変えようとしていることを知っています! 「」 
  2. 否定的なオプション :これは「私は悪い人生の選択をするのが好きです、そしてあなたが私の顔をこすってくれてありがとう」と言います。 このひどい決定をしたいかどうかをもう一度尋ねる別のウィンドウを受け取るためだけに、この自動非推奨オプションをクリックさせてください。 「」 

これは、XNUMXつのCTAオプションを備えたすべてのポップアップが不十分に設計されている、または訪問者を恥じることを意図しているということではありません。 Tim Ferrisは、よくできたデュアルオプションCTAの良い例を示しています。

ポップアップ解剖学-ティムフェリスポジティブネガティブ

ただし、全体として、訪問者を皮肉っぽくしたり、訪問者の決定を脅かしたりしようとしている場合は、サイトから出てTwitterに掲載してください。 あなたのウェブサイトはそのための場所ではなく、Twitterはうまくいけばそれを完全に飲み込むでしょう。

そのペットのぞき見とは別に、私は行動への呼びかけを単純に保つことも提案します。 訪問者がメールを入力したりボタンをクリックしたりすると何が得られるかを明確にする簡単な言葉を使用してください。 また、ジョブを最小限に抑えます。入力するフィールドはXNUMXつ以下(つまり、電子メールと名前など)、ボタンをXNUMXつクリックするだけです。

このチュートリアルは以上です。アクションボタンの呼び出しを適切に設計できることを願っています。