オーバーレイやポップアップ表示、その注意点と有効性を考察

オーバーレイやポップアップ表示、その注意点と有効性を考察
  • X
  • Facebook
  • note
  • hatena
  • Pocket

 デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回は「オーバーレイやポップアップ表示」についてです。

 こんにちは!株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。今回フォーカスするのは、日々PCやスマートフォンで目にするサイトに表示されるオーバーレイやポップアップ。

 1990年代ごろから多くは登場してきたようですが、ポップアップはウェブサイト上でときにランダムかつ一貫性なく、無数に表示されます。なかには詐欺のような内容を表示するサイトもあり、ユーザーに不快な思いをさせる「嫌われ者」として認知されてきました。そんなポップアップの問題点はなにか。そして、どのような点が有効なのでしょうか。

ユーザーは日々ポップアップと戦っている!?

 ウェブサイトやアプリケーションを閲覧するとき、実行中のタスクとは無関係な大量のポップアップに悩まれているユーザーも多いかと思います。

 とくにスマートフォンでサイトを閲覧しているときに表示されるポップアップは、表示領域の少ない画面に現れる形となるため、ストレスに感じたことがあると思います。しかしUIUXデザイナーとしては、ユーザーのその感情は可能な限り阻止しなければなりません。

主流のモーダルオーバーレイ

 主流のポップアップ表現は、画面全体を覆いコンテンツや広告を表示するオーバーレイです。

著者によるSHEINのキャプチャ
参考:著者によるSHEINの画面キャプチャ

 オーバーレイの中でもっとも嫌われることが多いのは、「モーダルオーバーレイ」ではないでしょうか。これにより、ユーザーがオーバーレイされた情報に対してアクションするまで、閲覧していたページ上のコンテンツが無効となってしまったり、ポップアップ内でのアクションを強制され閲覧や何かしらのタスクを遮断されたりするためです。とくに、キャンペーンやセール告知、メールマガジンへの登録などに多く使用されていることから、ECサイトなどではとくにモーダルオーバーレイを見かけます。(参考:モーダルオーバーレイに関する本連載記事

※この続きは、会員の方のみお読みいただけます(登録無料)。