2007年11月26日

Flashでの画像切り替えの盲点

ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

顔写真
マネージャー
磐前 豪

トップページを中心に、Flashを用いて複数の画像を同一エリア内で切り替えるパターンのものが増えてきています。スペースを増やすことなく、複数のプロモーションを掲示できるメリットが大きいとの判断からでしょう。

こうしたものは、時間で切り替わるものや、該当箇所(サムネイルなど)をマウスオーバすると切り替わるもの、また流入元や検索キーワードなどで出し分けるものもあります。
今回はそのうち、該当箇所をマウスオーバするとグラフィックが切り替わるものの注意点について、取り上げます。

図1のように、プロモーションエリアの一部を使用して、他のプロモーション情報を表示している場合、ユーザが意図せず切り替え、混乱を招いてしまうケースがあります。

図1

具体的には、図2のようにページ中央部のコンテンツを見ていたユーザが、プロモーションエリアの内容に気づき、興味を持ってクリックしようとするケースです。
あるユーザビリティテスト(ユーザ行動観察調査)では、ユーザがマウスカーソルを下から上に移動したところ、クリックする瞬間にFlashが切り替わり、そのままメインエリアをクリックしてしまいました。 ユーザは切り替わるという認識を持っていなかったことから、遷移した先のページで何故興味を持ったものとは違う情報が表示されていたことかが理解できず、しばし混乱に陥ってしまいました(図3)。

図2

図3

この問題の対策としては、マウスオーバによる反応速度を、若干遅くすることが考えられます。
意図して縮小部にカーソルを当てた(もしくはクリックした)ユーザであれば、若干反応速度が遅れたとしても、意識がそこに向かっているため、気づかないということはほぼ無いでしょう。反対に、ただマウスが通過しただけの場合は、かなりの速度で通過することが多くなりますので、ユーザが意図せず挙動が変わるといったことを防ぐことができます。

このような現象は意外と多くのサイトで目にします。
Flashの画像切り替えはスペースを節約できて便利ですが、このような挙動に関する問題は見落としがちです。
Flashの周りでどのようなカーソルの動きをとるか想定して、困惑するアクションを返していないか、見直してみてはいかがでしょうか。


ソーシャルブックマーク  はてなブックマークに登録  この記事をクリップ!  Yahoo!ブックマークに登録  Google Bookmarks に追加  Buzzurlにブックマーク  del.icio.us に登録  | 

<< エラーの頻発を前提にしたフォーム設計 | トップ | 画像一つ使う際にもユーザーが何を感じ取るかを考えよう >>



AI搭載 モーメント分析クラウド「USERGRAM(ユーザグラム)」