マウスオーバーで拡大する広告はもうちょい挙動を改善してほしい

Pocket

マウスカーソルを3秒〜5秒バナーに乗せると、画面いっぱいにババーンと動画が広がり、せっかく楽しんでいたコンテンツを覆い隠す……という広告を去年あたりから見かけるようになった。エキスパンド広告という名前がついているらしい。
タブレットやスマートフォンなどのタッチスクリーン端末には影響がないのだが、普通のパソコンだと、「カーソルをそのへんに置いたまま画面をスクロールしていたらいつの間にかバナーに乗っかっていて動画がでかでかと表示されてしまった!」という事故がよく起こる。

先日Twitterでこんなことを書いたところ、物凄い勢いでRTされ、「あれは本当に滅びてほしい」「あれはウザすぎる」と同意の声が聞こえてきた。

maripo_tweet_mouseover

 

なぜ鬱陶しいのか?

このタイプの広告は、次のような考えに基づいて作られている。

  1. 「見たい」という積極的な意思表示をした人だけに対して動画を見せたい
  2. バナーにカーソルを合わせるのはユーザの積極的な意思表示である

ここから、「マウスオーバーをユーザの積極的な意思表示とみなし、動画を再生する」という仕様が出てくるわけだ。

「1. 見たいという積極的な意思表示をした人だけに対して動画を見せたい」というところまでは良い。本当に見たい人が相手ならば、音を出そうと、画面いっぱいに表示しようと構わない。また、「広告をクリックして新しいページを開く」というのにはけっこう心理的な抵抗がある人に、「クリック未満」の意思表示でプレビューを見せるというアイディアも良い。

だが、「2. バナーにカーソルを合わせるのはユーザの積極的な意思表示である」……ここが間違っているのだ。
キーボードショートカットやマウスホイール、トラックパッドのジェスチャーなどでスクロールを行っているときに、意図せずカーソルが乗ってしまう。「カーソルを乗せた」というよりも「カーソルの下にたまたまバナーが来た」といったほうがむしろ正しい。そんなことで音が出たり、閲覧中のコンテンツが隠されたりしたら、それはもう憎悪しか生まない。

改善はできないのか?

そういった事故を防ぎながら「積極的な意思表示をしたユーザのみに対してアクションを起こす」というのは実現する方法もあるはずだ。

こちらのサンプルをご覧いただきたい。

  • マウスオーバーした瞬間に何が何でもカウントダウンを開始する (従来タイプ)
  • マウスオーバー後、カーソル座標のX, Yともに変化があった場合のみカウントダウンを開始 (改善タイプ)

の2パターンを並べてあるので、わざとカーソルを乗せたり、カーソルが停止した状態で画面をスクロールしたりと、色々試してみてほしい。違いがわかる。

マウスオーバー広告の挙動を少しマシにしてみるテスト (PCで見ないとおそらく何のことだかわからない)

http://blog.maripo.org/wp-content/uploads/2014/01/expand_ad.html

これですべての「事故的なマウスオーバー」を判別できるわけではないし、もっと他の方法での実装もあるかとは思うが、だいぶマシになった。
少なくとも「カーソルをバナーに乗せた」のでなく、「バナーがカーソルの下に来た」ことによる意図せぬ再生を止めることはできる。

Pocket