ユーザーの視線が丸裸になるアイトラッキングテストで分かる驚愕の事実

お役に立ったらポチっとな

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

以前からシニアのIT操作に関する鋭い洞察のブログで注目していたマミオン有限会社にお邪魔してアイトラッキングテストとユーザビリティについてお話をうかがってきました。

eye
日本アフィリエイト協議会主催のセミナーは高田馬場のマミオン有限会社オフィスのセミナー室にて行われました。
前半は景品表示法と薬事法のワンポイント講座が行われました。

後半はマミオンの佐藤純さんによるアイトラッキングテストのセミナーです。
内容は資料など詳細は非公開とのことなので、私が感じたことをお伝えしたいと思います。

詳しく知りたい方はマミオン公式ブログの記事が参考になります。
人気の記事です:
アイトラッキングなら一目瞭然!新「はてなブックマーク」が何となく見づらい理由
実例で納得!シニアが使えないサイトの例
シニアを引きつける!購買意欲を高めるキャンペーンサイトの黄金パターン

ユーザビリティって何?


ある目的を達せさせるために用いられる時の、
・有効さ … きちんと目的を達せられたか
・効率 … 同じことを達成するのにクリック数が少ないなど効率が良いか
・満足度 … ユーザーが好みのデザインである等

つまり、ユーザビリティが良いというには、目的をちゃんと達せられる作りになっており、なるべく手間が少なく使えて、使っていて気持ちが良い・好みであるなどユーザーを惹きつけるような条件を満たすことが必要となるんですね。

これらを全部満たすのは、実はなかなかの至難の業であるということが、後のアイトラッキングテストで明らかになります。

これがアイトラッキングマシン!


ディスプレイの下部に赤外線を発するセンサーが付いていて、それで黒目の動きを認識する仕組みになっています。
使用前に画面の四隅を見るキャリブレーションで個人差にも対応。

アイトラッキング装置

目の動きは別のPC画面にユーザーの顔と一緒に表示されてリアルタイムで見ることもできます。

アイトラッキング装置

レコードした目の動きデータは解析ソフトを通じると、「ヒートマップ」や「ゲイズプロット」にアウトプット可能です。

アイトラッキングの事例の動画です

ユーザーテストで分かること


開発者や製作サイドはそのホームページやサイトのことを既に知ってしまっていますので、何も知らない人の気持ちになるのは難しいです。
そこで、ユーザーテストが有効な手段となります。

ここで一本のアイトラッキングテスト動画を見せていただきましたが、かなり衝撃の内容でした。

高齢者の方がヤフーの検索であるサイトに行くために検索するのですが、検索の文字列を入力するのに、途中まで入力して行ったり戻ったりして、たった数文字のサイト名を入力するのに軽く1分以上かかっていました。
なんというスピード感の違いでしょう。

それでも漢字変換はきちんとできていたので、出来る方の人なのかもしれません。
私はサイト名1つとっても、検索に入力してもらいやすい文字列って大事かもと思いました。
幸いうちのブログは「しゅうまいブログ」で検索して出てくるので簡単です。

また、この高齢者の方が開いた先のサイトですが、上部のナビゲーションバーはガン無視で一度も見ていませんでした。
しかも、課題である「新聞掲載」のバナーがなかなか探せません。
画面の真ん中(コンテンツエリア)しか見ないので、サイドバーもガン無視です。
ひょえ〜。こんな人からウェブで物を買ってもらうのは大変そうだぞ…。

逆に言うと、ユーザーテストをちゃんとやれば、リテラシーの低いユーザーや目が悪いユーザーがつまづくポイントを予め潰すことができて、成果の取りこぼしを防ぐことができそうだと思いました。

20代ユーザーのテスト事例


次は若いユーザーで20代の学生で初めてクレジットカードを作るのでクレジットカード比較サイトを見るという設定です。
若いユーザーであっても、ナビゲーションバーや右サイドバーにはほとんど視線が向けられません。

また、カルーセル(画像が横に何枚かスライドショーするタイプの目をひく画像)の遷移に失敗するなど、慣れないユーザーインターフェースもある様子。
私もカルーセルは一見の見栄えは良いものの、初めてのユーザーにとっては分かりづらいと思いました。

そして、最終的に入会するカードを決めたものの、遷移先のカード会社の申込ページが「キャンペーンエントリ」ボタンと「申込」のボタンがあって、どっちから押したら良いのか分かりづらく、そこでも操作を迷っている様子が分かりました。
せっかく送客に成功しても、ランディングページの作りがイマイチだと取り逃がしてしまいますね。

40代主婦のテスト事例


初めてミネラルファンデーションを買う主婦がお試しセットを申し込む目的でサイトを見るケースです。
もう想像が付いていると思いますが、上部のメニューはやっぱり見られません。
知らないメーカーの名前が羅列してあるので良く分からずにスルーされたようです。

そして、どうにかたどりついたお試しセットの申込ページでは、ニュースレターの購読にチェックマークを付けないとエラーになって元に戻ってしまい、その際にはパスワードが消えてしまうので再入力が必要という、使いにくい作りになっていました。

ユーザビリティを良くするヒント

  • 2カラムにしてもコンテンツエリアしか見られないので、サイドバーや上部メニューは見られないものとして、コンテンツエリア内でリンク先を提示する。
  • バナーっぽい画像は広告として飛ばされてしまう。かといってボタン形状にしても気づいてもらえないことも。工夫が必要!
  • 文章が終わった後の広告は有効。目線が行くので。
  • 文字の大きさよりも、行間と余白に気をつかうと見やすくなる。(高齢者は文字が小さかったらメガネを持って来る)
  • 郵便番号は1枠で入力させ(前半と後半に分割しない)、住所は何のボタンを押さなくても自動で表示すると好感度アップ。

感想


いろいろと衝撃的なセミナーでした。まさに百聞は一見にしかず!

とにかくサイトを作ったら第三者の目で見てもらうことは不可欠ですね。
マミオン有限会社さんのように経験豊富なところにお願いするのは、特に売上に直結するECサイトには良い手だと思います。

また、個人ブロガーなどは、親世代に見てもらうだけでも違うと思います。

自分は自分のサイトやブログのことを知りすぎているので「自分の感覚が一番当てにならない」というガツンと来るセミナーでした。

関連書籍


セミナー中で言及のあった書籍です(古本のみ)

この記事を書いたのは

しゅうまい(@shumai)です。 新しいこと楽しいこと不思議なこと、わくわくすることが大好きです。MacBook Pro 15inchとiPhone 7 Plusの大画面コンビでブログを更新しています。→ 詳しいプロフィール

お役に立ったらポチっとな

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

最新情報はフォローしてね♪

コメント

  1. […] ◆ ユーザーの視線が丸裸になるアイトラッキングテストで分かる驚愕の事実http://shumaiblog.com […]