1

WebTracer: 視線を利用したWebユーザビリティ評価環境

阪井 誠†，中道 上‡ ，島 和之‡ ，松本 健一‡ † SRA先端技術研究所 ‡奈良先端科学技術大学院大学

2

ユーザビリティテスティング

実際のWebページを操作して評価する方法で， レビューではわからない問題の発見が可能である

発話に基づくプロトコル分析法が主流だが，操作中に印象などをインタビューをすることが多い

経験が必要，時間がかかる，日常的でない状況であるなどの問題がある

interrupt

3

視線と心理状態

目は口ほどにものを言う

目は心の窓

目は心の鏡

このように心理状態を無意識のうちに示す目の動きを用いれば，ユーザビリティテスティングを支援できるのでは？

=>視線に基づくインタビュー，定量的な評価

4

注視点の移動と心理状態

われわれの研究でも以下の状況が見られた

速度が速い=＞リンク先がわからない

移動量が多い=＞情報が多い

5

視線利用時の問題

測定機器が高価だが，結果の記録はビデオが中心であり，データ交換・分析が困難

解像度が低い

データサイズが大きい

Webページ単位の定量 的なデータがない

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

研究の目的

高解像度でWebページ画面を記録し，何を見ているかを正確に判断できるようにする =>実行ごとに表示内容が異なるページでも分析できる

Webに最適化された効率良い記録方式を実現し，評価結果のやり取りを容易にする =>経験や機材の共有が容易になる

視線や操作の履歴などWeb画面の特性を示す定量的なデータの記録・分析を支援する =>問題の存在しそうな場所を発見しやすくする

=>将来的には評価の半自動化を行う

8

目次

WebTracer

遅延キャプチャ方式

実装

評価実験

実験結果

考察

まとめ

9

WebTracer

デモ 記録

集計

グラフ

リプレイ

10

遅延キャプチャ方式(1/2)

Company

What’s New

Overview

SRA-KTL

SRA-KTL Company

Overview

Company

Overview

R R

R R

R R

R R 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

遅延キャプチャ方式(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

実装

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

評価実験

WebTracer MPEG-2 MPEG-4 MPEG-4

タスク インターネットで商品を探し出す(複数サイト)

実行時間 362秒

画面サイズ 1024×768 ピクセル（XGA)

記録方法 直接記録 DVに記録し，実験後にエンコード

記録サイズ 853×717

(ウィンドウサイズ) 720×480 720×480 1024×768

パラメータ 標準設定 ノイズが目立たず，データ量が最小の設定

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

実験結果(2/2)

スピードが速い：選択すべき項目がわからない

スピードが遅い：表示量が少ない

移動距離が長い：情報量が多い 移動距離が長い：情報量が多い 移動距離が長い：情報量が多い

16

まとめ

Webページ操作の記録分析環境WebTracerを提案した 遅延キャプチャ方式を用いて，高解像度の表示と記録データ量の削減を実現した

Webコンポーネントを利用し， Webページ単位のデータ収集が可能である

評価実験の結果 高解像度の画面を少ないデータ量で記録できた

Webページの特徴が視線データに現れていた

17

今後の課題

さらに実験を行い，視線・操作データとWebユーザビリティの関係を明らかにする

問題の存在すると思われるWebページのみを確認する

インタビューを行わずにWeb操作データのみでユーザビリティを評価する

=>効率的にユーザビリティが評価できる可能性がある

ツールの配布

研究者間でのデータ共有や，開発者と発注者の間でのデータ共有も可能になる

18

おわり