【調査レポート】嫌われるポップアップの3要素とは？ ユーザーの「役に立つ」ポップアップのあり方を考える

こんにちは。カスタマーサクセスの八木です。

Sprocketは、企業のWebサイトのCRO（コンバージョン率最適化）を支援する手段のひとつとして、Webサイト内で表示するポップアップを表示させる施策を中心に支援をしております。

ポップアップは、ベースとなるWebサイトの上（手前）に表示させるレイヤー構造になっています。Webサイトのレイヤーの上に表示されるものは、ポップアップ以外にも存在しています。代表的な例では、広告やチャットツールを起動するためのアイコンの2つがあります。

ポップアップ、広告、チャットツール。それぞれ一般消費者の目にはどのように映っていて、どのような印象を与えているのでしょうか。この記事では、Sprocketが2022年2月に実施した定量調査の結果より考察を述べます。また、調査結果から見えてきた課題とその対策について、Sprocketの事例もご案内いたします。詳しい調査概要は記事末をご覧ください。

理想的なポップアップの振る舞い

Webサイトにポップアップが表示される場合、どのような要素が受け入れられ、どのような要素が受け入れられないのか。ポップアップが表示されることで考えられるユーザー心理を20項目ピックアップしました。調査した項目は以下のとおりです。

各項目を「とても良いと思う／とても好印象に思う」から「とても迷惑に思う／すごく邪魔に感じる」という尺度で5段階評価をしてもらいました。中間は「どちらともいえない」です。全回答者をベースとした集計結果でも、大枠の回答傾向自体が変わることなかったので、全体の回答傾向から考察を述べます。

まずはWebサイト上で表示するポップアップの一般消費者全体の「理想」について、ポジティブ（好印象）とネガティブ（悪印象）のふたつの側面から見ていきます。

許容できるポップアップの要素・挙動トップ3

20項目の中で「とても良いと思う／とても好印象に思う」、または「良いと思う／好印象に思う」のいずれかのポジティブな回答が得られた項目の中でも、ポジティブ率が高かった項目のトップ3を紹介します。

1位は「ポップアップを閉じるボタンの押しやすさ」でした。ポップアップから提供される情報の必要有無を自分自身で判断し、不要と感じたらすぐに消したいということでしょうか。バツ（×）ボタンの視認性や操作性は気を配る必要がありそうです。

2位は「利用しているWebサイトに関連する有益な情報の案内」となりました。裏を返すと利用しているWebサイト以外の情報となる広告は悪印象を与えかねません。利用しているWebサイト内の情報であっても、広告と誤認されるような表現は注意が必要といえそうです。

3位は「Webサイトの操作の妨げにならないポップアップ表示位置の配慮」です。表示される内容にも寄るのではないかと推察しておりますが、Webサイトの操作の妨げにならないように、表示位置もしっかりと考慮する必要がありそうです。

嫌がられるポップアップの要素・挙動トップ3

反対に、20項目の中で「とても迷惑に思う／すごく邪魔に感じる」、または「迷惑に思う／邪魔に感じる」のいずれかのネガティブな回答が得られた項目の中でも、ネガティブ率が高かった項目のトップ3を紹介します。

1位は「ポップアップを閉じるボタンが目立たない／位置がわかりづらい」でした。許容できる内容でも、自分自身の判断で不要と感じたら消せることが重視されており、ポップアップを閉じるボタンが目立たなかったり、位置がわかりづらかったりするのは言語道断といえそうです。

2位は「同一ページ内に複数のポップアップが表示される」でした。同一画面内に広告、チャットツール、ポップアップなど、Webサイトの上（手前）のレイヤーに複数の要素が表示されるケースも、嫌がられる要因といえそうです。

3位は「Webサイトに訪問する度に同じ内容のポップアップが表示される」でした。ポップアップの表示頻度や表示回数は配慮すべきといえそうです。ただ、本結果からは「何度同じ内容のポップアップが出たら迷惑か？」という点までは読み取れません。「どのような情報を、どれくらいの頻度で、何度表示するのが良いのかはケースバイケース」と推察しています。

理想的なポップアップのまとめ

ポジティブな評価項目、ネガティブな評価項目の両結果を踏まえると、「ポップアップを閉じるボタンがわかりやすく存在していること」が最も重要と言えそうです。ポップアップが何度も表示されることがあったとしても、不要ならば自分自身の意志でバツ（×）ボタンを押して閉じられることが求められていると考えて良さそうです。

ポップアップで提供される情報が、Webサイト利用者にとって有益な情報であれば許容できるという傾向がある一方で、訪問するたびに何度も同じ内容が表示されることは嫌がられる傾向も見られました。たとえ有益な情報であっても、表示頻度や表示回数は表示内容と照らし合わせてバランスをとることが肝要といえそうです。

そしてもうひとつ。同一ページ内に複数のポップアップ（広告・チャットツールを含む）が表示されたり、それ自体がWebサイトの操作の妨げになったりなど、Webサイトの利用者の快適なご利用を阻害してしまうような印象を与える表示方法は気を付ける必要がありそうです。

自分の意志で閉じる判断ができる「バツ（×）ボタン」の見え方や位置、ポップアップの「表示頻度や表示回数」は微調整で改善を図れる項目かと思います。では、利用者のWebサイトの操作を妨げてしまうポップアップはどういった対策が考えられるのでしょうか。少し整理してみたいと思います。

ユーザーの操作を妨げないために気を付けるべき3つの要素

理想のポップアップはどのようにあるべきか。どうであれば良いか、何が嫌がられるのか。こうした視点で、おぼろげながら理想の形が見えてきます。中でも今回は「利用者にとってWebサイトの操作の妨げ」にフォーカスしてポイントを解説します。

1. 余計な人には表示しない

日頃から各種施策を行う上で意識しなければいけないことですが、まず「誰（どんな条件の人）に対してポップアップを表示させるのか」をしっかり考える必要があります。ポップアップを表示したい対象者が明確で、Web上の行動履歴からフィルタをかけられるならば、可能な限り余計な人には表示をしない（必要な人にだけ表示する）ようにすることが望ましいでしょう。

これが実現できれば、ポップアップが邪魔と思われる可能性はぐっと低くなることでしょう。「お気に入り登録のボタンを押したことのないユーザーに絞って、お気に入り登録の方法をご案内する」など、表示すべき対象者を選別することが重要です。

2.表示位置やタイミングを考慮する

特に画面領域が狭いスマートフォンの場合、ポップアップを画面の上から表示すべきか、それとも下から表示すべきかなど、邪魔にならない表示位置やタイミングを吟味する必要があるでしょう。単に表示位置を調整するだけではなく「Webサイトのスクロール中に表示されたらどう感じるか？」といった視点でも検討が必要です。

今回の記事では触れていませんが、調査結果で【ポップアップで受けた悪い体験】という設問項目では「触るつもりもないのにポップアップに手が触れ、思ってもないページに移動させられた」体験をしたという回答率が45％以上を占めていました。

これは、スクロールしている最中にポップアップが表示されて、うっかりポップアップに手が触れてページを移動してしまう事象が発生しているのだと考えられます。

3.伝える情報を小分けにする

「伝えたいこと・お知らせしたいことが複数ある」「短い文章では収まらない」「イラストなどで簡単に表現しきれない」など、1つのポップアップ内ですべてを伝えようとすると、こうした課題にぶつかるケースもあるのではないでしょうか。

多くのことを一度に伝えようとすると、必然的にポップアップが大きくなります。画面に占めるポップアップの専有面積が広いと、余計に邪魔と感じられそうです。物理的に大きくなってしまいそうなポップアップは、どうにか工夫して小さくしたいところです。伝える情報量を削るなり、フォント数を下げるなり、ポップアップが邪魔と思われない工夫が必要になります。

また、多くの情報を1つのポップアップ内で伝えるには限界もありますし、そもそもWebサイトの利用者に一度に多くの情報を伝えたところで、どれだけの情報を正しく受け取ってもらえるかも怪しいところです。読むのが面倒でポップアップを閉じるケースも十分に考えられるでしょう。

Sprocketは、無理にひとつのポップアップで情報を伝えようとせず、ケースによっては情報を分割して、いくつかのポップアップに分けて伝える方法をおすすめします。そうすることで大きすぎて邪魔になる心配もないですし、小さく表示することで、間違って触れてしまうことの防止にもなります。

消費者1,000名を対象としたアンケート調査の結果から、UXを向上し、コンバージョンを改善するためのポップアップ活用法について解説した資料も公開中です。こちらもぜひご参照ください。

マルチステップで顧客体験に沿った情報を提供

ポップアップを小さく出し、Webサイトの利用者に邪魔と思われない。かつ便利だと思っていただくような複数のステップ（マルチステップ）で顧客体験を改善する例をご紹介します。

まずは、こちらのポップアップは対象のWebサイト内で初めて商品カテゴリーページに訪問したユーザーに表示を行います。すでに何度もWebサイトに訪問しているユーザーをなるべく除外し、「初めてWebサイトを使う方」を対象としています。余計な人には表示しないための対策です。

そして最初に表示するポップアップ（step_1）は、案内に参加するかどうか、利用者の意思確認の目的です。不要ならばバツ（×）ボタンを押してもらえばいいですし、必要ならば「案内に進む」ボタンを押して次のステップに進んでもらいます。

step_2以降は、順番にWebサイトの機能をご紹介していきます。この一連の流れを、1つのポップアップ内ですべて伝えるのは難しいでしょう。一方で、Webサイトの利用者は、1つずつステップの順に沿って説明を受けながら操作方法を理解できるのではないかと思います。一度に多くの情報量を与えられるより、Web上の操作と合わせて小分けにした情報が提供されるので、操作方法の習得にもつながりやすいと考えられます。

ちなみにこの施策を実施したWebサイトでは、スマートフォンでは非表示に比べ注文完了のCVRの改善率は104.1％、PCの同数値は105.8％と、注文向上にもつながっています。商品絞り込みエリアに触れたうえで注文に至っていることも分析結果から明らかになっております。

マルチステップはあくまで手段のひとつ

言わずもがなですが、マルチステップを用いたポップアップ施策は万能ではありません。今回の調査結果からユーザー心理を読み解くと、Webサイトの操作を妨げないように配慮し、誤操作を防ぐという観点からは有効な手段であろうと思い、事例を紹介いたしました。

しかし、シンプルに1つ（ワンステップ）のポップアップで伝えるべきことを伝えられるならば、それに越したことはありません。マルチステップを乱用すれば、それはまたポップアップが嫌がられる要因が1つ増えてしまうことにもつながりかねないと考えます。

状況に応じて使い分ける、ワンステップのパターンとマルチステップのパターンを同時に実施してA/Bテストとして評価してみるなど、当然ながら成果につながるのかどうか、施策の検証は必須です。

「嫌われず、役に立つ」ポップアップを実現する

Sprocketは創業以来、こうした複数のポップアップをつなげて連続性のある施策として検証を重ねてきた知見があります。今回紹介した事例は、順番に説明したい機能に追従する形でポップアップの表示位置が変わるような施策を紹介しました。

「多くの情報を1つのポップアップ内で伝えるには情報過多」というケースでは、ポップアップの表示位置は固定しながらも、ボタンを押すと次のポップアップに遷移する紙芝居のような使い方も可能です。

今回実施した調査により、Sprocketがこれまで実施してきた施策でも、マルチステップは「嫌がられないポップアップ」の解決策のひとつとなり得ると考えられます。

「これまでもポップアップ施策を試したけれど、成果につながらない……」というご経験をお持ちの方は、ぜひSprocketのコンサルタントにご相談ください。

【参考】調査概要