マミオンのユーザーテストでは、右の写真の様な『アイトラッキングマシン』(通称アイカメラ)を使用し、視線の動きや見ていた時間を記録・分析することができます。

アイトラッキング(アイカメラ)とは、パソコンを操作する方の視線が、画面上でどのように動いているか、視線を追跡して確認する技術のことです。

マミオンでは、ディスプレイ下部から発する赤外線で視線を追跡するタイプの装置を使用しています。眼鏡のようなものをつけて操作するわけではありませんので、ユーザーに負担をかけずに視線を追跡することができます。

ユーザーはアイトラッキングのモニターの前に座り、視線を合わせるための操作(キャリブレーション)を20秒くらい行います。これでモニターから視線が拾えればアイトラッキングテストの開始です。

ユーザーが「どのようにウェブサイトを見ているのか」、しっかり認識したい時にご利用いただけます。

サイト、見られてる?

ちゃんとキャンペーンに気付いてもらったのか?
説明文は読んでもらっているのか?

逆に、ちゃんと見られていたのに内容を理解されていなかった、というケースもよくあります。

こうして、アイトラッキングとヒアリングとを組み合わせることで、非常に効果的なユーザーテストを実施することが可能になります。

 

ユーザーテストが終わると、アイトラッキングの結果は下の様なわかりやすいマップになって出てきます。赤く色が付いたところが、よく見られたところです。これなら、どこが問題か一目瞭然ですね。

関連:UXデザインと相性のよい「ゲイズプロット」分析のすすめ | マミオン有限会社

また実際の操作の様子を記録した動画もお渡しできるので、ショップのデザイン担当者との結果共有もスムースです。

 

アイトラッキングの利用手順

http://youtu.be/9P19a_4564U

  1. 対象サイトのURLをあらかじめアイトラッカー(アイカメラ)に入力しておきます
  2. 被験者を登録します
  3. 被験者が座ります。特に装置はつけません
  4. キャリブレーション(調整・測定)を行います
  5. 目線が測定できたらテストが始まります

アイトラッキングでわかること

1)ウェブサイトの「どこ」が見られたか
2)「どのくらい」見られたか
3)「どのような」視線の動きがあるのか

アイトラッキングでは解らないこと

「どのように考えたか」「失敗原因」はアイトラッキングでは解りません。
1)なぜそこを見たのか(興味があるから見たのか、わからないからよく見たのか)
2)好感度など主観的なもの
3)なぜ与えられた課題ができなかったのか

 

アイトラッキングQ&A

Q.アイトラッキングの仕組みを教えてください

A.アイトラッキングの機械本体はディスプレイと変わりありません。

ただ、ディスプレイの下に赤外線を発する部分があり、
そこから出る赤外線が瞳孔の動向を捉えます。

赤外線は人体に害を与えるものではありません。
また、ディスプレイの上にはカメラがついており、
被験者の操作中の表情を撮影することができます。

Q.何か装置をつけますか?

A.何もつけません。
被験者になる人は、普通にインターネットを操作するだけです。

特殊なディスプレイ(アイトラッカー)を利用して視線の動きを記録しますが、
そのディスプレイも一見ごく普通の液晶ディスプレイにしか見えません。

試験の最初に「キャリブレーション」(調整)を行い、視線を合わせます。

Q.フラッシュを使っているウェブサイトでも大丈夫ですか?

A.広告部分など、一部にフラッシュが利用されている場合は
問題なくアイトラッキングテストを行えます。

サイトのナビゲーションの部分などに利用されている場合は、
動画ファイルでのみ確認可能です。

Q.メールをアイトラッキングすることはできますか?

A.PDFや画像、ソフトウェアなど、
画面に映るものなら何でも視線を追跡することができます。

ただし、時折トラッキング出来ないソフトウェアもありますので、事前の確認が必要です。

Q.アイトラッキングできない人はどのような人ですか?

A.極端に姿勢が悪い方、まぶたが重い方などは、
アイトラッキングが難しい場合があります。

 

アイトラッキングに関するブログ記事

 

tv

先日、とある企業のご依頼を受け、CMアイトラッキング調査を行った。
※アイトラッキングとは、赤外線で人の視線を可視化する機械のこと。
※パソコン上で番組や該当CMなどを見ていただく調査を行った。

今回の被験者さんは50歳代、60歳代の女性4名。

そこから得られた気付きはとても多く、改善に繋がる気付きを得ることができた。

今回の調査では、いくつかダミーとして健康食品のCM、テレビショッピングのCMを入れておいた。
そこから得られた「シニアの動画の見方」について解説していこうと思う。
(本来であれば動画をアップしたいのだが、肖像権の問題があると思うのでそこからの気付きだけでご容赦ください。)

CMは意識してみるものではない。

ウェブサイトが能動的に見なくてはいけない一方で、テレビは、基本受動的に見ている。
特にCMについては流し見ることが多い。

そのため、そのCMが自分に関係がありそうか、
それが直接すぐに自分に伝わってくるかで、見る意識が変わる。

最初に何の商品紹介か解るとその後も見続けようとするし、
すぐに何のCMか理解できないとすぐに飽きてしまう。

動画だけではなく、ウェブサイトでも、何もかもいつもそう思っているが、
人は、考えない。

これは決して、悪い意味ではなく、世の中にはいろいろ考えなくてはいけないことが多すぎて、CMや情報番組について、深く考えることはない、ということである。

その商品や買い物行動に興味を持つのは、
「今見ている情報は自分に必要か、不必要か」という瞬時の判断である。

それでは、自分に必要なものである、と判断してもらうためにはどうすればいいか。

被験者の方の目線を追っていて思ったことは、
情報はシンプルに。そして、情報の粒を大きくしすぎないこと。(個人サイズにすること)
健康食品のCMは、その点、「食べて健康」「まずは電話」
その2点のみのシンプルな情報を解りやすく説明しており、
被験者の方にも「解りやすい」と思われた。

人の顔を見ている・文字情報は重要

アイトラッキング調査を行って、改めて実感したのは「人は、人の顔を超見る!」ということであった。

出演者の顔をじっと見て、手の動きや顔の向きによって目線を動かす。
ということは、同時にいくつも重要なことがテロップなり、演技なりで示されると何を見ていいのか解らず混乱してしまう。

健康食品のCMでは、登場人物が飲み終わって正面を向いたときに
その効果がテロップとして出てくる。
すると、人は、人の顔を見ているがゆえに、その効果・効能の部分に絶対に目が行くのである。

また、テレビショッピングのCMでは、正面を向いて話している人の内容がテロップに出るのだが、
その人がテロップに手を動かすことにより、
耳からも、目からも「重要な」情報をしっかり認識することができていた。

動画では、文字と人の動きとの兼ね合いがとても重要である。

常々、人に考えさえないということを考えているが
今回はCMという、ユーザーと距離が遠いものであったので、
より、考えさせずに、寄り添うということがとても重要だと感じた。

また、動画だからこそ、ついつい見てしまうということもあるため、
そのストーリー、目や手の動きを含めた演技力はCMの反応を左右すると思う。

動画の人気がシニアに根強いからこそ、動画での商品紹介などを考えている場合には、一度ユーザーの目線を確認してもいいかもしれない。

マミオンでも、ウェブサイトのユーザビリティ改善分析に大活躍してくれている「アイトラッキング調査」。

またウェブサイトだけではなく、店頭ディスプレイや街頭広告の評価など、屋外/オフライン媒体におけるマーケティング用途においても、アイトラッキングの技術はよく使われています。

今回は、こうした各種アイトラッキング調査サービスで使われている機材の紹介と、それらを用いたサービスを提供している会社の料金一覧表を作ってみました。調査の特性上、多くの会社は料金を非公開にしていますが、商品やサービス改善の検討にぜひご活用ください。

※表中、”-“は記述を見つけられなかった項目です
※取得した情報は2013年10月時点のものです

 

ウェブサイト/オンライン媒体のアイトラッキング調査

標準的な利用機材について

ウェブサイト等の分析には「モニタ一体型」のアイトラッカー(アイカメラ)が使われます。

この分野で全政界の5割のシェアを占めるのが、スウェーデンのトビー・テクノロジー社です。マミオンも、2009年にこちらのメーカーから「Tobii T60」を購入しています。


画像参照:クレアクト・インターナショナル

通常Tobiiのシステムは、数百万円するアイトラッカー本体のハードウェアと、100万円強のデータ分析管理ソフト「Tobii Studio」のセットで販売されています。この「Tobii Studio」は、他社の分析ソフトと比べて比較的簡単に扱える点が魅力で、ウェブサイトや静止画像のヒートマップなども生成することができます。

 

ちなみに2013年初頭には、アイトラッカー本体価格が99万円というリーズナブル(?)な価格の「Tobii X2」が新しく発売されました。


画像参照:GIZMODO

この「X2」はコンパクトで持ち運びしやすいバー型の形状になっており、既存のデスクトップPCやノートPCにUSB経由で接続し、モニタの下部に簡単に設置することができます。またうまく使えば、組み込み機器のパネルの評価や、タブレット/スマートフォン等の分析も可能です。

【関連記事】
マイノリティ・リポートも実現間近?! Tobiiのアイトラッキング技術 : ギズモード・ジャパン
視線の動きを可視化する「アイトラッカーX2」 –小型&99万円で登場 – CNET Japan

 

アイトラッキング調査サービス提供社一覧

ウェブサイトを対象としたアイトラッキング調査は、通常、ユーザーテスト(ユーザビリティテスト)と合わせて提供される場合がほとんどです。

料金は、ユーザーテストのボリュームやアウトプットによって大きく左右されます。サービスを提供しているのは、ウェブコンサルティング会社、ウェブデザイン会社、リサーチ会社などが多いです。もちろん、マミオンもその一つに当たります。

社名料金例備考
ビー・オー・スタジオ1名5万円レポート無
MOTION PORTFOLIO3名3万円~キャンペーン期間中9800円(レポート別)
Tobii X2を導入している模様
シスコム3名15万円~1名3万円~のライトプランもあり
ゴメスコンサルティング3名35万円~1タスク(15分)5万円換算
インターメント4名60万円~
アウラマーケティングラボ60-75万円インタビュー調査+アイトラッカーレンタル料
DNPメディアクリエイト95万円~脳波分析にも対応
WIPジャパン190万円~海外調査に強み
ビービット600万円~
Tobii
NTTデータ
イード
ミツエーリンクス
アイリサーチ
アイレップ
キノトロープ
IA lab
マミオン
3名25万円~シニア、ネット初心者調査に強み
1名3万円~のライトプランもあり

 

アイトラッキング機材レンタル対応社一覧

「テストや分析は自分たちで行える」「費用をできるだけ抑えたい」という場合には、アイトラッキング機材のみレンタルできるサービスもあります。こちらもマミオンで対応しています。

ただアイトラッキング機材の扱い時には、ある程度の知識と経験が必要とされます。もし経験者がいなければ、オペレーションまで委託してしまう方が結果的によいデータが得られるでしょう。

社名料金例備考
アイトレース・ミーティング2時間15万円オペレータ派遣あり
会場は別途用意する必要あり
ミツエーリンクス8時間22万円1時間1.5万円+基本料10万円
スタジオ利用料含む
マミオン
4時間10万円~見学室利用可
利用方法レクチャー含む

 

屋外/オフライン媒体のアイトラッキング調査

標準的な利用機材について

屋外/オフライン媒体のアイトラッキング調査では、帽子型やメガネ型のアイトラッカー(アイカメラ)が使われます。

数年前までは帽子型が主流で、代表的な機種がナックイメージテクノロジー社の「アイマークレコーダー EMR-8」です。車メーカーや事務機器メーカー、大学の研究室などでよく見かけるタイプです。


画像参照:慶應義塾大学SFC研究所

ナック社では、この後継機として2008年に「EMR-9」を発売しています。こちらはメガネ型なので、これまでよりも自然な状態での調査が可能になりました。


画像参照:cnet.com

またトビー社でも、2010年にメガネ型の「Tobiiグラス アイトラッカー」を発売し、当初の価格はハードウエアが370万円,ソフトウエアが150万円となっています。


画像参照:トビー・テクノロジー

【関連記事】
視線追跡機能付きメガネ,Tobii社が9月に発売 – デジタルヘルス – Tech-On!

 

アイトラッキング調査サービス提供社一覧

料金は、調査の内容によって大きく異なるため、詳細に公開していない会社がほとんどです。サービスを提供しているのは、マーケティングリサーチ会社、印刷会社などが中心になっています。

社名料金例備考
消費者行動研究所50万円~インタビュー調査に左記料金を付加
凸版印刷
共同印刷
GMOリサーチ
クロス・マーケティング
マーケッティング・サービス
日本インフォメーション

 

定性調査だからこそ、会社のバックグラウンドを考慮すべき

私自身は、10数年前に大学の研究室で初めてナック社の据置型アイトラッカーを扱いました。当時はハードウェア、ソフトウェアともに今の数倍の価格で、またデータの分析も難しいものでした。

しかし簡便に扱える分析ソフト「Tobii Studio」の登場や、前述した安価なアイトラッカー「Tobii X2」の発売により、今後ますますアイトラッキングの技術が広く活用されるようになるはずです。

 

ただし視線を記録しただけでは、商品やサービスの改善に何も繋がりません。アイトラッキング調査は自由度が高く、主に定性的なデータを分析対象とするため、ユーザビリティ、マーケティング、心理学等にどれだけ精通した会社か、どういった背景を持ちどういった分野が得意なのかを見極める必要があります。

 

マミオンは、新しい商品やITなどの利用に困っている人たちと「毎日」接していますので、そこから得られた知見をアイトラッキング調査に活用しています。商品やサービス改善でお困りの場合は、ぜひご相談ください。

 

マミオンが保有しているアイトラッキングマシン、Tobii社の『T60』。

このブログでも何度かご紹介している通り、アイトラッキング分析では以下のようなデータをアウトプットとして用いるのが一般的です。

・視線データ付き動画
・ヒートマップ
・ゲイズプロット

120403_1

通常こうしたアウトプットは、定性的な分析に用いる場合が多いです。しかし一方で、下の図のようにページ上に分析対象とするエリアを指定する「AOI(Area of Interest)」と呼ばれる機能を使えば、より定量的な分析も行うことができます。

130509_2

今回は、このAOI分析で得られる主な指標をご紹介したいと思います。

 

First Fixation系

T60では、1秒間に60回の視点計測を行います。視点が一定の範囲内にとどまったと判断できたとき、それを「注視点(Fixation)」と呼びます。ゲイズプロット画像で言う1つの円がそれにあたります。

1つの注視点の一般的な長さは、読書などで200ミリ秒程度です。

Time to First Fixation

指定したエリアを最初に見るまでにかかった時間。途中で別のページに移動していた場合は、その時間を含まない。
tobii_TFF
この数値が小さいほど、目につきやすいデザインが施されていると言える。

Fixations Before

指定したエリアを見る前に、どれだけの数の注視点があったか。時間の長短は問わない。

First Fixation Duration

指定したエリアの最初の注視点の長さ。

 

Total Fixation系

Total Fixation Duration

指定したエリアにある注視点の全ての長さの合計。サッカード(注視点と注視点の間の素早い動き)の時間は含まない。
tobii_TFD
この数値が大きいほど、注目されたエリアだということがわかる。

Fixation Count

指定したエリアにある注視点の数。

Fixation Duration

指定したエリアにある注視点の長さの平均値。[Total Fixation Duration]/[Fixation Count]でも算出可能。

 

Visit系

Total Visit Duration

指定したエリアに滞在した最初の注視点開始から最後の注視点終了までの時間の合計。サッカード(注視点と注視点の間の素早い動き)の時間を含む。
tobii_TVD
この数値が大きいほど、注目されたエリアだということがわかる。

Visit Count

指定したエリアに滞在した回数。

Visit Duration

指定したエリアの滞在時間の平均値。[Total Visit Duration]/[Visit Count]でも算出可能。

Percentage Fixated

テストの全セッションのうち、指定したエリアを1回でも注視したセッションの割合。

この数値が高いほど、多くの人の目に留まるデザインであると言える。

 

Mouse Click系

Time to First Mouse Click

指定したエリアを最初にクリックするまでにかかった時間。途中で別のページに移動していた場合は、その時間を含まない。

Mouse Click Count

指定したエリア内をクリックした回数。

Percentage Clicked

テストの全セッションのうち、指定したエリアを1回でもクリックしたセッションの割合。

この数値が高いほど、多くの人がクリックするデザインであると言える。

 

複合系

Time from First Fixation to Next Mouse Click

指定したエリアの最初の注視点が開始してから、そのエリアをクリックするまでの時間。途中で別のページに移動していた場合は、その時間を含まない。

Time from First Fixation to Next Mouse Click (Across Media)

指定したエリアの最初の注視点が開始してから、そのエリアをクリックするまでの時間。途中で別のページに移動していた場合は、その時間を含む。

 

ランディングページの仮説検証にも有効!

先ほどAOIを設定したサイトで、Total Visit Durationを算出し、グラフにした例がこちらです。各エリアがどれだけ注目されていたのか、一目瞭然です。
tobii_chart130509_2

AOI分析は、問題発見というよりは仮説検証に適しています。

「このバナーは、ちゃんと見てもらえたのか?」
「どのくらいの時間、見られていたのか?」等々。

まずはユーザーがサイトを見たり使ったりする様子を観察し、そこで出た疑問や課題について、AOI分析でさらに検証するという使い方が適切です。数字で比較ができるので、説得材料としても適しています。

特に、縦に長いランディングページなどについては、各要素がどれだけ認識されたのか、アクセス解析だけではわからないことが多いので、こうした視線分析アプローチがとても有効であると言えます。

視線分析を含めたユーザーテストのコーディネートについては、ぜひご相談ください。

 

参考リンク

シニアを引きつける!購買意欲を高めるキャンペーンサイトの黄金パターン | マミオン有限会社

 

先日リニューアルされた「はてなブックマーク」。

大幅なデザイン変更に対し、ネット上では賛否が分かれているようです。

【参考記事】
はてなブックマークのリニューアルがいけてない5つの理由 – enator’s blog
はてブリニューアル賛成論

個人的には「あぁ、見づらくなっちゃったな…」と感じましたが、何となく不満を訴えても仕方がないので、今回はその原因をマミオン得意の「アイトラッキング分析」を用いて考えてみることにしました。

 

綺麗な「F字型」を見せる旧デザイン

まずはリニューアル前のデザインについて分析ができればよかったのですが、時すでに遅し。代理として、以前のデザインに近い以下のサイトで分析を行ってみました。

Hatebu::Classic – 見慣れたデザインのはてなブックマーク

被験者は、30代男性である筆者1名です。いつものように、ホットエントリーをチェックする行動を行った結果がこちらです。

左側がヒートマップ、右側がゲイズプロットになります。

画像を見ると、各タイトルの部分を順番に閲覧しているため、綺麗な「F字型」が現れているのがわかります。多くの記事の中から、自分の興味ある記事を見つけようとする動きです。

「F字型」は、検索結果の閲覧時にもよく見られる視線の動きです。

【参考記事】
軌跡は“F”を描く – U-Site

 

「F字が…描けません」

そして今回のリニューアル後のデザインではどうなったのでしょうか?

同じように、ホットエントリーをチェックする行動を試してみた結果がこちらです。

実際にやってみて、感じたことは以下の3点です。

右側が気になる

本当は「ホットエントリー」だけを次々とチェックしていきたいのに、記事タイトルを読んで視線が右に行ったタイミングで、右カラムの画像やアイキャッチの太線部分が気になってしまいました。

人気の記事の合間に、強制的に別カテゴリの記事を読まされている感覚です。

またカテゴリの見出しも目立たないので、一体何の記事なのか、よくわからないまま割り込まれているように感じました。

ブクマコメントを読んでいない

記事タイトルの間にあるブクマコメント。画像からわかるように、ほとんど読んでいません。

以前実装された「マイホットエントリー」の場合は、自分の知っている人がどんなコメントをしているのかが重要な意味を持っていたのでよく読んでいたのですが、通常のホットエントリーについてはそこまで気になりません。

また字の大きさも潰れるほど小さいので、無意識的に飛ばしてしまっているのかもしれません。

新着エントリのタイトルがガタガタ

下半分にある新着エントリですが、画像のあるものとないもので、タイトルの位置が変わってしまっています。

そのため、横方向にタイトルだけ見ていこうとした場合、視線が上下させられて疲れる感覚が残ります。

 

アイトラッキングは、「なんとなく見にくい」という感覚を表現できる

今回は時間がなく1名分のデータしかとっていないので、上記のデータはかなり偏った結果だと思います。

しかし、「なんとなく見にくい」という感覚をこうしてすぐにビジュアルに表現して確かめられるのは、アイトラッキング分析の大きな強みだと思います。

 

ちなみに今回のリニューアルですが、しばらく利用して慣れたあとでは見方も変わってくるはずなので、個人的には引き続き経過を見守りたいと思っています。

 

マミオンでは1名30000円からサクッとアイトラッキング分析ができるサービスメニューも用意していますので、ご興味のある方はぜひお問い合わせください。

 

マミオンのWebサイトユーザーテストでも活用している、「アイトラッキング分析」。

・「テキストが全然読まれていない!」
・「せっかく作ったボタンが全く目に入っていなかった!」
・「エラー表示に気付いてもらえなかった…。」

こういった課題が発見、検証できるのがアイトラッキング分析の強みなのですが、実はこの計測に使うマシンが非常に高価(ベンツが1台買えるほど!)なため、どこの調査会社に依頼してもコストが高くついてしまうのが難点の一つでした。

 

しかし先日、アメリカの3M社が、Visual Attention Serviceという簡易的な「視線予測サービス」をリリースしました。

画像をアップロードして分析ボタンを押すと、数十秒で結果が返ってきます。

料金は、登録して最初の5枚までは無料、以後1枚$15、10枚$120で利用することができ、1か月使い放題$500、3か月使い放題$800のコースもあります。

 

こうして安価にアイトラッキングを用いたデザイン検証ができるのであれば、制作者にとっては非常に助かりますね!

今回は、この3Mのサービスの実力と使いどころを確かめてみたいと思います。

 

たった30秒で、それらしいヒートマップを入手!

まず、試しにマミオンのトップページで分析をしてみました。

こちらが分析前のファーストビュー。

そしてこちらが分析をかけたもの。

おお、思ったより結果が綺麗に出た感じがします。

中段左の人物画像に最も多く視線が集まり、そのまま右側のコピーに流れています。
そして下の3つのメニューも、アイキャッチとなる画像とタイトルがしっかりと見られているようです。電話番号にもしっかり視線が行き届いています。

サイトの設計的には結構うまくいっているのではないでしょうか?

 

分析の方法ですが、おそらく人の視線が集まりやすい要素(画像、人の顔、目立つ色彩、フォントの大きさ、コントラスト差 etc.)を自動で抽出しているようです。また分析をかける際に、分析対象のカテゴリ(Webサイト、紙媒体、風景etc.)を選択させられるので、そのあたりの補正も入っているのではと思われます。

これだけ手軽にアウトプットが得られるのは、素晴らしいシステムだと思います。

 

一見よさげなこの3Mのサービス。それでは意地が悪いですが、これまでマミオンで行ってきた実際のアイトラッキングマシンの活用事例と比較し、こうした手段の代わりになるのかどうかチェックしてみましょう。

 

有効なページとそうでないページの違いは?

こちらは、以前ユーザーテストを行った「椒房庵」さんのサイトです。

左側が、アイトラッキングマシンで採取したヒートマップ画像、右側が「視線予測サービス」での分析結果です。

どちらも、視線が赤線で囲んだコンテンツエリアの商品画像部分に集まっている様子がよくわかります。それに対して、左右のカラムにあるナビゲーションやお知らせのエリアは、相対的に言うと目に入らない傾向が高いということもわかります。

また視線予測サービスは、画像に対する反応が実状よりも過剰な印象を受けます。これはアイトラッキングの方では画面スクロールに合わせて視線が徐々に移動していくのに対し、視線予測サービスの方は長いページを一度に全て分析しているからというのもあるかもしれません。

 

次は、「e英会話」さんのサイトにある、サービス紹介ページです。

こちらのサイトで実際にユーザーテストを行った際に出てきた課題のひとつは、左上にあるオレンジ色の「申し込みボタン」にほとんど視線が集まっていないということです。一方で右側の視線予測サービスの方では、まずロゴを見て、ボタンを見て、それからコンテンツエリアを見ているように見えます。

視線予測サービスは、ユーザーがこのページを目にするタイミングや他のページとの関係を考慮できないので、こうした「途中のページ」「下層のページ」を分析する際は注意が必要でしょう。

 

次は、「ジャパネットたかた」さんの入力フォームページで、しかも入力内容にエラーがあって戻ってきてしまった場面です。

実際にテストをしてみると、左側のアイトラッキング画像に示されているように、赤線で囲ったピンクのエラー表示の部分が見られていないことがわかりました。一方で視線予測サービスの方では、近くにある赤いボタンにつられて視線が流れているように見えますし、また最下部の人物画像が異様に目立ってしまっています。

 

ここまでの検証から言えるのは、3Mの視線予測サービスは、トップページやランディングページなどの「パッと見の判断」が重視されるところであれば、1枚1000円ならトライしてみてもおもしろいのではということです。

しかし一方で、少し複雑なインタラクションが必要なページや、ユーザーが利用する背景の考慮が必要とされる場合には、適切な分析結果を導けない可能性が高いと感じました。

また縦に長いページでは、画面スクロールの影響を正しく織り込むこともできません。そのため、ファーストビューの評価に限って用いる方が安全だと思います。

 

Webサイト以外の分析もおもしろい!

今回の3Mのサービスが面白いのは、画像を自分で自由にアップロードできるので、Webサイト以外の分析も可能なところです。
例えば、商品のパッケージ、店舗の商品陳列棚、パンフレット、ポスターなどなど。

こちらは、私が撮影してきたコンビニの商品陳列棚の分析例です。

商品パッケージやレイアウトの改善活動に役立ちそうですね。

 

そしてこちらがパンフレットの分析例です。

特にシニア層と紙媒体の相性は高いので、こうしてデザイン中のものを随時分析にかけながらブラッシュアップしていくのにも活用できそうです。

 

目的や状況に応じて使い分けよう!

ちなみにWebサイトのヒートマップであれば、ClickTaleUserInsightなどのヒートマップ分析サービスでも得ることができますが、ヒートマップを見て各要素が「見られた/見られなかった」で一喜一憂していては、何も改善に結びつかないので注意が必要です。

 

どこをどういう順序で確認していったのか?それはなぜ?という部分を明らかにするためには、以前もブログに書いたのですが、ゲイズプロットを用いた分析が有効です。ちなみに3Mのサービスでもゲイズプロットに近い分析を行うことはできるのですが、こちらはかなり「適当」なもので、分析には使えないと思います。

【参考記事】
ヒートマップだけで満足していませんか?UXデザインと相性のよい「ゲイズプロット」分析のすすめ | マミオン有限会社

 

やはり大切なのは、どれかの手段に頼りすぎるのではなく、「目的や状況に応じて使い分ける」ことだと思います。以下に各手段の活用イメージをまとめましたのでご参考にしてください。

3Mの視線予測サービス ・トップページ、ランディングページの検証
 (ファーストビューのみだと確実)
・バナーデザインの検証
・プロトタイプ時点での検証 etc.
ヒートマップ分析サービス ・トップページ、ランディングページの検証
・高速なPDCAサイクル内での利用 etc.
アイトラッキングマシン ・サイトの利用プロセス全体を把握する
・ユーザー行動の「理由」を明らかにし、改善の方向性を見出す
・仮説にない思いがけない課題を発見する etc.

 

またマミオンでは、高いと思われがちなアイトラッキングマシンを使った分析も、1人分3万円からご提供しています。詳しくは下のリンクからどうぞ!

【参考】
3万円から!かんたんユーザーテストパック | マミオン有限会社

 

「綺麗なんだけど、なんだか情報が頭に入ってこない。」
「ページを見た後、何も覚えていない。」

Webサイトを見ていて、そんな経験をしたことはありませんか?

 

今回、マミオンのスタッフが
あるサイトを使う様子をアイトラッキングで観察していたところ、
そのわかりにくさの原因がうっすらと見えてきました。

Webサイトを使うユーザーは、
あなたが考えているより100倍、お行儀が悪いようです。

ユーザー視線の『理想と現実』を把握して、
あなたも、より「効果的に伝わるデザイン」を作ってみませんか?

今回チェックしたサイト


今回、JR東日本のえきねっとから、新幹線のチケット予約を行いました。

ちなみに、えきねっとは以前からユーザビリティ的に悪名高いサイトなのですが、
雰囲気としては、よく見かけるようなスタンダードなものだと思います。

こちらのサイトで、ユーザー登録を行い、クレジットカード登録を行い、
路線を選び、席を選び、チケット購入手続きまで進めていきます。

 

「えっ?そっちを先に見るの?」

チケットの予約をしようとしたときに、『トクだ値』という言葉が出てきました。
意味がわからなかったので説明ページに行くと、こんな画像が載っていました。

皆さんは、この画像にある情報を、どういう順番で読んでいきますか?

 

実際は、この動画のように見ていました。

▼トクだ値!ページを見る視線の様子(約20秒)
http://youtu.be/TQ9l8W0nn2I

 

どうでしたか?想像と一致していたでしょうか。

 

多分、これをデザインした人は、下の図の「理想」のように
見てほしかったのではないかと思います。

しかし、実際はその次の「現実」のように、
視点の終わり付近の目立つ要素に寄り道し、
あげく逆流してしまっている場合もあるのです。

先に結果を見てその次に背景を見たり、「~だから」なんて言葉を先に目にしたり。
頭に入ってきた情報が、うまく繋がらないんですね。

 

もう一例見てみましょう。

こちらはチケット購入の最終確認画面の一部で、
受け取り場所についての説明がされています。

 

実際は、この動画のように見られていました。

▼最終確認画面を見る視線の様子(約15秒)
http://youtu.be/0mec-b4xLNU

 

こちらも、見出しを見たあと、説明文を読み込む前に、
図が気になってしょうがないようです。

地図がありますが、これが一体何なのかは見ただけではわかりません。
そこでやっと説明文に戻って一通り読み、
次に挿絵を見ますが今度はそこから右の図に誘導できていません。

 

『視線の交通整理』をしよう

情報を横方向に並べ、空白を埋めるようなデザインは、
スペースの制限のある紙媒体時代からの慣習かもしれません。

しかしこうしたデザインでは、「割り込み」や「逆走」が起こっていたのでした。

特に目に負担がかかるディスプレイ上の表示では、
ユーザーは流し読みをするため、この傾向が顕著に出てきます。

 

トップページなど、何かを選択させる場合には問題ないかもしれませんが、
今回の様な「順序を追って説明したい」場合には、
意図的に『視線の交通整理』をしていく必要があります。

そのためには、視線の開始地点よりも終着地点に注目し、
もし左に戻ってほしいのなら、その近辺には何も置かないようにすべきです。

一番簡単なのは、視線の動きを上下方向に制限してしまうことでしょう。
いわゆる楽天メソッド的なものが優秀なのは、こうして情報を見てもらう順序を
うまくコントロールできているからなのかもしれません。

ちなみに今回のヒントは、プレゼンのスライド作成でも応用できるでしょう。
一枚のスライドに要素を詰め込むのではなく、
多くのスライドを用いて時間差を使って情報の提供順序をコントロールする。

一時期、『高橋メソッド』なども流行りましたが、
情報を確実に意図した順番で送り込むという点で、理解しやすい方法であると言えます。

 

マミオンでは、あなたのサイトがどうやって見られているか、
アイトラッキングマシンを用いて詳しく分析することができます。

ご興味のある方はこちらのサービス詳細をぜひご覧ください!

 

参考:UXデザインと相性のよい「ゲイズプロット」分析のすすめ | マミオン有限会社

「ユーザーがサイトのどこを見ているか?」を知るための手法の一つが、弊社でもサービス提供している『アイトラッキング調査』です。

通常、アイトラッキング調査を行うと、『ヒートマップ』と『ゲイズプロット』の2種類のアウトプットが得られます。

皆さんはどちらに親しみがありますか?


画像:左がヒートマップ、右がゲイズプロット

ちなみにGoogleでの検索ヒット数を比較してみると、ご覧のとおりです。

  •  「ヒートマップ」:約 2,620,000 件
  •  「ゲイズプロット」:約 3,470 件
  •  「heatmap」:約 70,200,000 件
  •  「gaze plot」:約 11,200 件

 

…もったいない。

 

こんな良いものが知られていないなんて、非常にもったいない!

『ヒートマップ』は視線分析に限らず用いられる言葉なので単純比較はできませんが、後ほど解説する『ゲイズプロット』の良さが、まだまだ浸透していないのかもしれません。

また最近は手軽にサイトを分析する手法として、User InsightClick Taleに代表されるように、マウスの軌跡を元にした安価な擬似的ヒートマップ作成サービスが増えたのも、こうした差が出てくる要因だと思われます。

もちろんヒートマップは強力なツールですが、最近盛んに言われている『UX(ユーザー体験)』を追及するのであれば、私は断然ゲイズプロットの活用をおすすめします!

順番に、UXとゲイズプロットの相性がよい理由を見ていきましょう。

 

ゲイズプロットは、見られた理由が推測できる

ヒートマップに対するゲイズプロットの最大の特徴は、「どういう順序で見られたかがわかる」ということです。

 

見た順序がわかると何がよいのか?

そこを見る前に、どこを見ていたのかがわかります。
またそこを見た後に、どこを見に行ったのかがわかります。


上の例のヒートマップの方からは、各々のエリアが見られたか否かしかわかりません。
一方で右側のゲイズプロットからは、まず商品画像から視点がスタートし、商品をザッと下まで見た後に、上に戻って絞り込み機能やカテゴリメニュー部分を見ていることが読み取れます。何か探していたのかもしれませんね。

 

皆さんの中には、こういったアプローチにピンと来る方もいらっしゃるかもしれません。

 

そう、Webページの「PV」と「参照元」の関係に似ているんです。

 

アクセス解析において、ページのPVだけをいくらチェックしていてもダメなように、ヒートマップで「見られた」「見られなかった」に一喜一憂していては、効率的な改善には繋がりません。

仮説検証ができるだけで、そこから改善の方向性を見出すのは難しいからです。

 

UXデザイン、およびアクセス解析に長けた人は、よく分析対象ページの“前後の”URLを調べることで、ユーザーの目的や気持ちがどう動いたかを推測します。ゲイズプロットでは、それと同じようなヒントを得ることができるのです。

テキストを読んでから隣のボタンを見たのか?
目立つボタンに目が行ってから近くのテキストを読んだのか?

ヒートマップ上では同じような「赤色」がついていても、その背景や見た理由は全然違うこともあります。つまり、改善すべき方向性が変わってくるのです。これがわかるのがゲイズプロットの大きな強みです。

 

ゲイズプロットは、要素間の関係性の強さがわかる

ゲイズプロットのレポートで特徴的なのは、納豆のようにネバネバと引かれた線たち。このおかげで、要素間の関係性の強さが視覚的にわかります。

線が多く密になっているところは、何度も見比べたり、セットで使われることが多い要素でしょう。
対して、線が分断されているところは、一緒に見ることがない、または向こう側は関係ないものとユーザーに判断されているのかもしれません。

 


上の画像のゲイズプロットを見ると、横方向の線が多く見られます。つまり、セットで確認したい情報が左右離れた場所にあり、視線が忙しく行ったり来たりしていると予想することができます。
ヒートマップの方では、一見、左から右に向かって順調に流れているようにも見えてしまいますね。

 


冒頭にも掲載した物産展の例では、右カラムのバナーの方への寄り道ができています。これが意図したものかどうかはわかりませんが、メインビジュアルと合わせて大きな三角形が作られています。関連する情報が置かれているのでしょうか。

 

線が引かれているところは、視線の道です。
この道をどう設計していくのか。

関係性の高い要素を把握し、それをつなぐようにレイアウトしていけば、おのずと「道」ができてきます。

 

今回の例はショッピングサイトなので複雑な要素はありませんが、例えばSNSなどのコミュニティサービス、またはコンバージョンを狙うトップページやランディングページなどでは、非常に質の高い分析が可能になります。

ヒートマップだけでは、こうした要素間の関係性までつかむには不十分ですね。
ここはまさしくUXデザインと同じ考え方なのではないでしょうか?

 

ゲイズプロットは、一人ひとりに焦点を当てる

ヒートマップは複数人の視線データを元に色が着けられるのに対し、ゲイズプロットは基本的に一人ずつのシートを出して、そこから検討を始めます。


画像参照:派手な体裁や奇をてらった言い回しは無視される – U-Site

 

平均を見て判断するのではなく、個人的なコンテキストに寄った行動に注目する。

これはペルソナを始めとしたUXデザイン手法の視点と近いと思いませんか?

 

アイトラッキング調査におけるヒートマップの場合、特異なユーザーがいるとそれに引っ張られてしまい、その他のユーザーの動きが相対的に薄められてしまう落とし穴があります。
また擬似ヒートマップでも、人数が多くなるほどアウトプットが“平凡な”ものになり、マップ上の黄色や緑の部分は軽視されてしまいがちです。

 

ユーザー調査を数多くこなしていると思うのですが、「普通の人」や「中間の人」なんていないんです。みんなが特異で、それぞれに背景や事情を持ち、それを薄めて平均化したときに幻の「普通の人」が現れます。このことは常に意識しておきたいですね。

 

擬似ヒートマップとの使い分けを目指そう!

ここまでゲイズプロットに大きく肩入れしてきましたが、もちろん、ヒートマップの利点もあります。

  • パッと見てわかりやすい ⇒ 上司や他部署など関係者の説得に便利
  • ビジュアル要素の評価には問題ない ⇒ バナーや広告単体の改善には十分
  • 擬似ヒートマップの場合、人数が多いので確度が高い ⇒ 説得力がある
  • 擬似ヒートマップなら、安い

 

またゲイズプロットは、実際にユーザーに目の前で使ってもらう『アイトラッキング調査』を行わないと得られないデータなので、見かけのコストはかなりかかります。

しかし、通常は振り返りインタビューと合わせて実施できるので、デザイン改善に役立つヒントは非常に多く得られるでしょう。
改善の方向性が定義できない状態で弾を打ち続けることは、それは本当に「コストが安い」と言えるのでしょうか?

 

サイトの規模や改善フェーズにもよりますが、UXデザインという考え方が隆盛のいま、全てを擬似ヒートマップに頼るのではなく、ユーザーを目の前にしたアイトラッキング調査をもっと取り入れていきませんか?
ゲイズプロットやユーザーへの直接インタビューを味方にすれば、きっと今の何倍もの改善アイデアが浮かんでくると思います!

 

アイトラッキングマシンを保有しているマミオンなら、予算に合わせた調査のご提案が可能です。マシンやテストルームの様子はこちらからどうぞ。

 

参考URL

今回は、京都・おぶぶ茶苑の松本さんに協力していただき、サイト制作者と初めてWebサイトを見るユーザーとの視点の違いを検証します。

運営責任者さんの視点

まず、被験者はおぶぶ茶苑の販売責任者である松本さんの様子です。

検索で偶然このページにたどり着いたユーザーさんのつもり、という設定で、「かぶせ茶と大地の茶を購入する」というタスクを行ってもらいました。

http://youtu.be/Lo6Xt8zeNBU

ページの上から下に向かって満遍なく読み、情報収集しようとしている様子がわかります。

初めてサイトに訪れたユーザーの視点

続いて、こちらのサイトを見たことのない30代男性の視点です。インターネットはほぼ毎日利用している方です。

http://youtu.be/YUI9v50hi7U

はじめにサイトの上部のロゴやメニューなどを見て、どんなサイトなのかを把握しようとしている様子がわかります。

次に商品について知りたいと考えますが、ぱっと見てサイトや商品のポイントを把握できません。普通のお茶とどう違うのか、どんな魅力があるのか、画面をスクロールしてざっとながめて特徴を捉えようとします。

スクロールを止めて読んで見たいと感じる部分がないため、視点が止まらずかなりのスピードで読み飛ばされていきます。

なかなかポイントをつかめず、一旦ファーストビューまで戻り、「わからないのははじめてだからだな」と「はじめての方へ」のメニューをクリックしました。今回はユーザーテストですから進めてもらえましたが、ここでページを離脱されてしまう可能性はかなり高いのではないでしょうか。

「はじめての方へ」のページでは、オーナーさんの思いの書かれた画像は流し見されてしまっています(0:37~)。それよりも「おぶぶ茶苑って何?」やQ&Aのほうが興味を持って見られていました。

理念を伝えることは必要ですが、初めてサイトに訪れたユーザーは、商品情報をより必要としています。まずは商品情報をしっかりと伝え、理念は別の場所で説明できるとよいでしょう。