WebTracer: 視線を利用した Webユーザビリティ評価環境 ソフトウェアシンポジウム2003発表資料

1. 1
WebTracer: 視線を利用した
Webユーザビリティ評価環境
阪井 誠†，中道 上‡ ，島 和之‡ ，松本 健一‡
† SRA先端技術研究所
‡奈良先端科学技術大学院大学

2. 2
ユーザビリティテスティング
 実際のWebページを操作して評価する方法で，
レビューではわからない問題の発見が可能である
 発話に基づくプロトコル分析法が主流だが，操作
中に印象などをインタビューをすることが多い
 経験が必要，時間がかかる，日常的でない状況
であるなどの問題がある
interrupt

3. 3
視線と心理状態
 目は口ほどにものを言う
 目は心の窓
 目は心の鏡
このように心理状態を無意識のうちに示す目
の動きを用いれば，ユーザビリティテスティン
グを支援できるのでは？
=>視線に基づくインタビュー，定量的な評価

4. 4
注視点の移動と心理状態
われわれの研究でも以下の状況が見られた
 速度が速い=＞リンク先がわからない
 移動量が多い=＞情報が多い

5. 5
視線利用時の問題
 測定機器が高価だが，結果の記録はビデ
オが中心であり，データ交換・分析が困難
 解像度が低い
 データサイズが大きい
 Webページ単位の定量
的なデータがない

6. 6
視線および操作データの記録
 アナログビデオ信号として記録(低画質)
=>領域の注視頻度を分析*1
 激しく変化する映像や編集を考慮した汎用記
録方式なのでデータサイズが大きい
=>単一ページの分析*1
 定量的なデータが少ない
=>タスク実行履歴の分析*2*3*4
*1 Will Schroeder, “Testing web sites with eye-tracking, Eye for design,” Sep./Oct., 1998.
*2 Michael Etgan, Judy Cantor, “What does getting WET(Web Event-logging Tool) mean for web usability?,” HFWEB99, 1999.
*3 Harry Hochheiser, Ben Shneiderman, “Using interactive visualizations of WWW log data to characterize access and inform site
design,” 1999.
*4 Laila Paganelli, “Intelligent analysis of user interactions with web applications,” IUI'02, 2002

7. 7
研究の目的
 高解像度でWebページ画面を記録し，何を見てい
るかを正確に判断できるようにする
=>実行ごとに表示内容が異なるページでも分析できる
 Webに最適化された効率良い記録方式を実現し，
評価結果のやり取りを容易にする
=>経験や機材の共有が容易になる
 視線や操作の履歴などWeb画面の特性を示す定
量的なデータの記録・分析を支援する
=>問題の存在しそうな場所を発見しやすくする
=>将来的には評価の半自動化を行う

8. 8
目次
 WebTracer
 遅延キャプチャ方式
 実装
 評価実験
 実験結果
 考察
 まとめ

9. 9
WebTracer
 デモ
 記録
 集計
 グラフ
 リプレイ

10. 10
遅延キャプチャ方式(1/2)
Company
What’s New
Overview
SRA-KTL
SRA-KTL Company
Overview
Company
Overview
R
R
RR
R
R
RR
R
(a) 実際のWebページ
(b) WebTracer でのWebページと注視点の再構成
SRA-KTL
R
R
What’s New
Overview
What’s New
Overview
What’s New
Overview
時刻
時刻
SRA-KTL
R
What’s New
Overview
SRA-KTL
What’s New
Overview
Company
Overview
Company
Overview
Company
Overview
最初のページの最後
の画面イメージ
２番目のページの最
後の画面イメージ
注視点を画面イメージに合成.
注視点

11. 11
遅延キャプチャ方式(2/2)
Captured
images
SRA-KTL
(a)Actual web page and the eye-mark
(b) Trace log
SRA-KTL
What’s New
Overview
What’s New
Overview
What’s New
Overview
Final image of
the page
SRA-KTL
What’s New
Overview
(d)The reproduced sequence
Mouse layer
Eye-mark
layer
[00:00:27.079, ..] {CaptureImage . WT0301101416220001.jpg}
[00:00:27.079,..] {MouseMove . (Position . 550 303) ..}
[00:00:27.079, ..] {ButtonUp . (Position . 550 303) (Moved . 0.0) ..}
[00:00:27.140, ..] {BeforeNavigation2 . (Level . 1)
(URL . "http://www.sra.co.jp/") ..}
[00:00:27.190, ..] {MouseMove . (Position . 550 303)..}
[00:00:27.190, ..] {Eye . (Position . 501 293)}
[00:00:27.190, ..] {TitleChange . .. (Name . “SRA Key. Tech. Lab.")}
[00:00:27.300, ..] {Eye . (Position . 501 299)}
Eye-mark
data
Windows
events
Browser
events
Summarized data
(c) Summary and Graph
The captured image will be
inserted at the beginning of
the page.

12. 12
実装
WebTracer
A/D
Converter
Eye Mark
Recorder
Eye-mark, Key,
Mouse, Navigation,
Captured image
Web
Component
Handle
Component
JPEG
Library
A/D
Library
7
8
Web Info.
?

13. 13
評価実験
WebTracer MPEG-2 MPEG-4 MPEG-4
タスク インターネットで商品を探し出す(複数サイト)
実行時間 362秒
画面サイズ 1024×768 ピクセル（XGA)
記録方法 直接記録 DVに記録し，実験後にエンコード
記録サイズ
853×717
(ウィンドウサイズ)
720×480 720×480 1024×768
パラメータ 標準設定 ノイズが目立たず，データ量が最小の設定

14. 14
実験結果(1/2)
WebTracer MPEG-2 MPEG-4 MPEG-4
解像度(Pixel) 853×717 720×480 720×480 1024×768
記録データ量 14.0MB 272.0MB 48.5MB 140.1MB
ランダムアクセ
ス時間
約1秒 約1秒 1～2秒 約5秒

15. 15
実験結果(2/2)
スピードが速い：選択す
べき項目がわからない
スピードが遅い：
表示量が少ない
移動距離が長い：
情報量が多い
移動距離が長い：
情報量が多い
移動距離が長い：
情報量が多い

16. 16
まとめ
 Webページ操作の記録分析環境
WebTracerを提案した
 遅延キャプチャ方式を用いて，高解像度の表示
と記録データ量の削減を実現した
 Webコンポーネントを利用し， Webページ単位
のデータ収集が可能である
 評価実験の結果
 高解像度の画面を少ないデータ量で記録できた
 Webページの特徴が視線データに現れていた

17. 17
今後の課題
 さらに実験を行い，視線・操作データとWebユーザ
ビリティの関係を明らかにする
 問題の存在すると思われるWebページのみを確認する
 インタビューを行わずにWeb操作データのみでユーザビ
リティを評価する
=>効率的にユーザビリティが評価できる可能性がある
 ツールの配布
 研究者間でのデータ共有や，開発者と発注者の間での
データ共有も可能になる

18. 18
おわり