ホームペー  /  すべて  / モバイル デバイスでポップアップを見栄えよくする 5 つの方法 (レスポンシブ Web サイト用)

モバイルデバイスでポップアップを見栄え良くする 5 つの方法 (レスポンシブ…

モバイルポップアップ

私たちの世界は正式にモバイルになりました。 米国のユーザーがさまざまなデバイスで費やしたデジタル時間の割合を分析すると、スマートフォンが最も多くを占めました。 62パーセント 次いでデスクトップが 29 パーセント、タブレットが 9 パーセントのシェアとなっています。

モバイル時代への動きを推進する Google は、1 年 2019 月 XNUMX 日からすべての Web サイトのデフォルトとしてモバイル ファースト インデックスを展開すると発表しました。これらすべての要因により、Web サイトや Web アプリを開発する際にはレスポンシブ デザインの実践を組み込むことが必須となっています。全て。

ユーザーがモバイルに最適化された Web サイトにアクセスしたときに発生する大量のモバイル トラフィックの流入を利用するには、ポップアップ戦略を賢く作成する必要があります。 ユーザーに変換して入力を強制するもの 販売パイプライン ユーザー エクスペリエンスやさらに悪いことに、Google での SEO ランキングに悪影響を与えることはありません。

モバイル ポップアップを実装する前の重要な考慮事項

Google はシームレスなユーザー エクスペリエンスを最も重視しており、そのため、 ポップアップ モバイル Web サイトで。 インタースティシャル広告の形式のポップアップは、モバイルでの閲覧中の全体的なユーザー エクスペリエンスにとって煩わしくて邪魔であると考えられます。

したがって、モバイル検索エクスペリエンスを向上させるための厳しい基準を概説しました。 これらには、ランディング ページ (ユーザーが Google 検索結果をクリックした後にたどり着くページ) に邪魔なポップアップを表示する Web ページを罰することが含まれます。

 

Web サイトの検索ランキングがポップアップの影響を受けないようにするために、ポップアップをデザインする際に確認する必要があることは次のとおりです。

  • ユーザーが閲覧している間、ポップアップは Web ページのメイン コンテンツを覆ってはなりません。
  • ポップアップは、ユーザーがメイン コンテンツにアクセスするために閉じる必要があるスタンドアロンのインタースティシャルの形式である必要があります。
  • ページ レイアウトのスクロールせずに見える部分は、ユーザーがコンテンツにアクセスするために下にスクロールするポップアップのみで構成されるべきではありません。

ポップアップを使用してモバイルコンバージョンを促進する

Google はモバイル ポップアップを好んでおらず、ポップアップに関するユーザーの意見は否定的であるという事実にもかかわらず、ポップアップの重要性とその能力は、 ウェブサイトのコンバージョンを促進する あなたのビジネスは否定できないからです。

正しく実行されれば、ポップアップはユーザーのサインアップを促進し、有利な収益を生み出す可能性があります。 e コマース Web サイトや B2B SaaS Web サイト、ユーザーにクリックを強制するような効果的なポップアップをデザインすることは、ビジネスの観点から非常に重要です。

ここでは、検索ランキングに悪影響を与えることなく、レスポンシブ Web サイトのポップアップをモバイル デバイス上で見栄え良く表示させる 5 つの方法を紹介します。

1. モバイル用のポップアップをデザインする

レスポンシブ デザインは、デスクトップに表示される同じポップアップがモバイル デバイスでも機能することを意味するものではありません。 携帯電話の場合、利用可能な画面スペースの量は大幅に少ないため、同じポップアップのセットがあると、ユーザー インターフェイスが常に乱雑になり、ユーザー エクスペリエンスが低下します。

また、デスクトップ Web サイトで表示されるポップアップは Google ペナルティの対象ではないため、コンテンツをカバーする全ページのポップアップを表示しても、Web ページのランキングに影響を与えることはありません。 モバイルでも同様の戦略がレスポンシブデザインを保証することになります。

Web サイトの Web バージョンとモバイル バージョンで異なるポップアップをデザインすると、デザインで優位性が得られ、Google のガイドラインに従う余地が生まれます。

2. タッチ対象に注意する

Web とモバイルのポップアップのデザインは、どちらの場合も画面サイズとユーザー インタラクションの種類が異なるため、根本的に異なります。 Web の場合、入力フィールドはマウスのクリックに対応できるように小さくできますが、タッチ ターゲットを組み込むのに十分な大きさである必要があります。

タッチ対象が小さいと、「ファットフィンガー症候群」が発生します。 モバイルデバイス上で希望するアクションを完了できない場合、ユーザーはコンバージョンに至るのではなく、Web サイトを放棄することになる可能性があります。

経験則として、モバイル Web サイト上のクリック可能なボタンはすべて、最小 44 × 30 ピクセルである必要があります。 モバイル デバイスは、ユーザーが好む入力媒体ではありません。 電子メールのサインアップを求める場合は、入力フィールドがユーザーが指でタップするだけでクリックできる十分な大きさであること、および入力フォームのフローがユーザーの負担を最小限に抑えていることを確認してください。

3. ポップアップのサイズを制限しておきます

Web ページのメイン コンテンツをカバーしない画面下部のバナー ポップアップは、ランディング ページにポップアップを組み込む一般的な戦略です。 スクロールしないと見えない部分にある主要な Web サイトのコンテンツはカバーされないため、Google の仕様には違反しません。

また、全ページのモーダル ポップアップよりもユーザーにとって邪魔になりません。 このポップアップ戦略を組み込む際の唯一の課題は、顧客がコンバージョンするのに十分な価値を提供するために利用できるスペースが限られていることです。

ポップアップは小さいため、ユーザーの注意をそらす可能性があります。 さらに、入力フィールドが小さいと、リストの購読を希望するユーザーにとって困難になる可能性があります。

4. ユーザーにポップアップを大量に表示しないでください。

ユーザーが Web ページにアクセスするとすぐに表示されるポップアップは、即座にオフになります。 ユーザーが最初にコンテンツを消費する機会があった後、ユーザーのブラウジング中に後で起動するような方法でこれらを組み込んでください。 訪問者が到着した直後や数秒以内にポップアップを表示させないでください。

もう XNUMX つの実行可能な戦略は、ユーザーが訪問する XNUMX ページ目にポップアップを表示することです。 この方法では、Google のガイドラインに違反することはなく、ユーザーは価値のあるコンテンツを消費するのに十分な時間を確保できるため、コンバージョンの可能性も高くなります。

5. 意図を理解し、価値を提供する

価値を提供するポップアップは、ユーザーが自発的にクリックする結果となります。 このようなポップアップは、モバイル Web サイトのユーザー ジャーニーに組み込まれ、シームレスなユーザー エクスペリエンスももたらします。

ユーザーの心理を理解し、ユーザーが Web ページにアクセスする意図を解読すると、説得力のある価値提案を作成するために必要な手がかりが得られます。 その後、行動喚起ボタンがポップアップの代わりにランディング ページに組み込まれます。 CTA をクリックすると、ポップアップが表示されます。

ユーザーがイライラして(閉じるために)クリックしたり、配置のせいで誤ってクリックしたりする他の種類のポップアップとは異なり、CTA ポップアップはより適切に統合されています。 ユーザーは自発的にクリックするため、ユーザー エクスペリエンスの向上が保証されます。

どのような戦略を選択する場合でも、ポップアップとモバイル Web サイト全体のデザインは、全体的なユーザー エクスペリエンスを念頭に置いて行う必要があります。 訪問者の心理を理解し、ニーズに応えることが、ビジネスの成功とコンバージョン増加の鍵となります。

ラーフル・ヴァルシュネヤは、の共同創設者兼社長です。 アルケネア。 ラーフル氏は、ブルームバーグ TV、フォーブス、ハフポストなどの多数のメディア チャンネルでテクノロジーの思想的リーダーとして取り上げられています。