DEIM Forum 2009 E4-6

大画面ディスプレイ上でのウェブブラウジングにおける効率的タスク切り替え支援手法
劉

瀋巍†

田島

敬史††

† 京都大学工学部情報学科†† 京都大学情報学研究科
E-mail: †liugi@dl.kuis.kyoto-u.ac.jp, ††tajima@i.kyoto-u.ac.jp
あらまし

近年，インターネットの普及と情報の爆発的な増加により，計算機ユーザはほとんどの情報をウェブ上で検索，閲覧，処理，交換するようになっている．その結果，ユーザはウェブブラウザで多数のタスクを同時に遂行するようになり，ウェブブラウザがタスク管理において重要な役割を担うようになっている．しかし，従来のウェブブ
ラウザは多数のタスクからタスクを簡単に発見，選択するための機構を提供していない．一方，大画面ディスプレイ
が普及しつつあるが，大画面上の余分なスペースはタスク管理で有効に利用されていない．本研究は大画面ディスプ
レイ上でのウェブブラウジングにおける効率的なタスク切替え支援手法を提案する．まず，開かれているウェブペー
ジのサムネイルを大画面ディスプレイ上の周辺スペースに常時表示する．さらに，各ページにあるロゴと特徴的な画
像を自動抽出し，サムネイル上に重ねて表示する．また切り替えるタスクのサムネイルを探す負荷を低減するために，切替え履歴を基に各ページへの切り替える確率を予測し，確率が高いページのサムネイルをサイズまたは透明度で強調する．本研究の提案手法の有効性を定量的実験と定性的実験により検証した．
キーワード

ユーザインターフェース，ウェブブラウザ，タスク管理，サムネイル

1. は じ め にを支援するサービスが多数，登場している．特に，ウェブメー
ルをはじめ，ブログやソーシャルネットワークサービスやマイ

近年のウェブにおける著しい変化により，計算機上での日常

クロブログなどのサービスは既に広く利用されるようになって作業におけるウェブブラウザの役割が大きく変わってきている．

いる．このようなサービスは日常のコミュニケーションだけでその変化は主に三つある．まず，検索エンジンによるウェブ検はなく，今後ビジネスと教育においても大きい役割を果たすこ

索が，知的労働においてますます重要になっており，調査 [1] にとが見込まれている．

よると，大半のユーザは毎日何回も検索エンジンを使用していこれらの変化により，ユーザはウェブブラウザ上で同時に多る．情報図書館やペーパーレスオフィスなどの発展に伴い，今数のタスクを遂行するようになっている [1]．また大画面ディス後ますます多くの情報がウェブ上で検索できるようになっていプレイを使用するユーザはそうでないユーザより多数のウィン

くと予想される．次に，ユーザはウェブ上の情報を閲覧するだ

ドウを開く傾向が観察されている [2]．しかし，従来のタブブ

けではなく，ウェブ上で情報の処理を行うようになっている．

ラウザではタブの数がある程度多くなると，タブが切り替えに

ウェブはその誕生時には単純な閲覧むけのアーキテクチャでくくなる．その原因は主に三つある．まず，タブが小さくなる

あったが，近年 AJAX や RIA などの技術によりウェブ上でもと，タイトルの最初の部分だけが表示され区別できなくなる場

多彩なアプリケーションを構築できるようになり，Email や文合がよくある．また，タブが多くなると，長いタブのリストを書処理などの様々な伝統的なアプリケーションがウェブ上に移走査して切り替えるべきタブを探すのが難しくなる．三番目に，りつつある．これらのアプリケーションのウェブ上へのシフト

タブが小さくなるとポインティングデバイスでクリックしにくは，ユーザにとっては，データの集中管理によりどこでも同じ

くなる．その他にも，タブブラウザにマルチバーチャルワース

環境が再現されデータ損失の心配もないという利点がある．まペースのようなタスク管理機構がないため，ユーザのタスク管

た，従来ネイティブなアプリケーションが支配していたビジネ理の負担が高いなどの問題がある．

スマーケットでもクラウドコンピューティング (ユーザーが様々

一方，大画面ディスプレイが安価になり普及しつつあるが，なデータ処理機能をネットワーク (通常はインターネット) 経由

ウェブページを大画面上で表示すると左右に大きな余白が現れでサービスとして利用する新しいコンピュータの利用形態) のることが多く，これらのスペースがウェブ閲覧において有効に発展により，ウェブベースのアプリケーションが大きな役割を利用されていない．そこで本研究では，このスペースを利用し果たすことが期待されている．最後に，ウェブはユーザが情報て効率的なタスク管理を支援することを目指す．まず，小さいを交換するプラットフォームにもなっている．近年，多数の一タブに代わって，開かれている全ページのサムネイルを常時，般ユーザによる情報の生成と共有という Web2.0 の考え方にしこのスペースに表示する (図 1)．これは今までのタスク管理シ

たがって，ウェブ上でコミュニケーションとコラボレーション

ステムとは大きく異なるタスクの表示方法だが，これは，人々—1—

て詳しく述べる．次に，インターフェースと実装における問題と工夫を説明し，続いて，実験とその結果を示す．最後に実験結果の考察を行い，結論を述べる．

2. 関 連 研 究
マルチタスクにおけるタスク切替えの支援の必要性とその心理学的側面についてはこれまでに多数の研究がある．Miyata とNorman はユーザ活動の心理学的側面とウィンドウマネジャー
におけるマルチタスク支援の必要性について論じている [3]．また，Cioni はユーザ活動の階層構造を提唱し，複数の行動を同時に行うための支援機構の必要性を指摘している [4]．
図1

本システム

一方，González と Mark は Working Sphere を提唱し，Work-ing Sphere の保存と復旧の重要性について論じた [5]．タスク間切替えの困難性については [6] でも検証されている．Czerwinski
は 11 名の Microsoft Windows の熟練ユーザに，現実の業務中のタスク切替えの履歴を記録してもらい，日常タスクにおけるタスク切替えと割り込みの様子を調べた．その結果，割り込まれた後にタスクへ戻る切替えが特に難しいことがわかった．
図2

サムネイル

図3

拡張サムネイル

Rooms [7] は画面上の表示面積不足を緩和するためにマルチ
仮想ワークスペースを導入する研究の先駆である．Rooms ではが現在のタスクに関連する文書を机の上に並べ，スペースが足仮想ワークスペースは部屋のメタファーで表現され，ユーザは手りない場合は，GUI システムでの最小化のように，あまり使わ動でタスクを仮想ワークスペースに割り当てることができ，タれない文書を重ねていたのと同様の表示であり，人間にとってスクのコピーや移動も可能である．また，「window thrashing」

自然なものである．また，人間の高い視覚的認知能力を生かしという言葉を用いて，表示面積不足の問題をメモリ管理におけてサムネイル (図 2) をより認識しやすいように，ウェブページ

るワーキングセットモデル [8] と関連付けて捉えていた．

にあるロゴとそのページのもっとも特徴的な画像を自動的に抽出し，サムネイルに重ねて表示する (図 3)．

GroupBar [2] は Microsoft Windows のタスクバー上でユー
ザがドラッグ・アンド・ドロップでタスクをグループ化できる

しかし，同時に開くページ数が増えると，ユーザが多数のサようにする研究で，プレビューや自動レイアウトなどの機能もムネイルを走査しなければならない問題がやはり生じる．そこ

提供されており，実験により，通常のタスクバーと比べてユーで，本研究ではユーザの切替え履歴に基づいて，次に各タブにザのマルチタスクの効率を向上することが確認されている．

切り替える確率を予測し，確率が高いタブのサムネイルを強調

Ishak らはタスク管理における Content-Aware Layout の概する．強調方法としては，確率が高いサムネイルをより大きく念を提案した [9]．Ishak らのシステムでは，ユーザがテキスト表示する動的サイズモードと，確率が高いタブのサムネイルをエディタ中のキーワードを選択してキーボードショートカット

より不透明にする動的透明度モードの二つのオプションを用意

キーを押すと，選択されたキーワードを含むウィンドウだけが，する．このような強調表示によってユーザの注意を絞ることでキーワードの位置を中心に合わせたレイアウトで表示される．

走査するタブの実勢数が減ることが期待できる．

これはタスク管理におけるコンテントアウェアネスの応用例だ

これらの手法の有効性を確認するために二つのユーザ実験をが，テキストエディターでしか使用できないという制限がある．

行った．実験 1 では，タスク数が 7 個の場合と 15 個の場合に市販オペレーティングシステムでも様々なタスク管理の工夫

ついて，タブ，サムネイル，拡張サムネイルの各方式でタスクがなされている．Microsoft Windows Vista では，3D でタス

切替えにかかる時間を計測する．実験 2 では，被験者に本シスクのサムネイルを並べるタスク切替え機能が導入され，Macテムのプロトタイプを使って簡単なマルチタスクを遂行してもOSX ではタスクのサムネイルをタイル状に並べて一覧表示す

らった後，半構造化インタビューを行う．実験 1 の結果より，

る機能とマルチ仮想ワークスペースの機能が提供されている．

拡張サムネイルの優位性を確認した．また，人間の空間記憶の

しかし，これまでの研究やシステムでは，いくつかの重要なタスク切替えにおける役割についても分析した．実験 2 では，問題点がまだ十分に考慮されていない．まず，タスク切替えボ

本システムのユーザにとって満足な点と不満な点が示された．

タンの視認性を向上させる工夫がないため，タスクが多くなる

以下，本論文の構成を簡単に説明する．まず，研究の背景と，と選択が困難になる．二番目の問題はワークスペース管理のた

なぜウェブブラウザでの効率的なタスク管理が重要かについてめのユーザ負荷の増加である．そのため，タスクがある程度以述べる．次に関連研究をまとめる．その後，従来のタスク切替

上多くなるとユーザが負担を負い切れなくなり，ワークスペー

え機構の問題点を分析し，本研究ではどのように解決するかをスでの管理をあきらめてしまう．三番目に，表示面積が限られ説明する．続いて，拡張サムネイルと切替え確率の計算についていることに着目する研究は多いが，表示面積が十分にある場—2—

合に，いかにタスク管理のために有効利用するかに関する研究

査の問題はマルチ仮想ワークスペースである程度解消できるが，は少ない．四番目の問題は，ユーザの切替え履歴と内容の関連

一方，ワークスペースの管理が新たな負担となってしまう．

性のタスク管理における潜在力があまり重視されていない．

3. 問 題 分 析
本章では問題の分析を行うが，具体的な説明に入る前に，まそこで，本研究では次に各タスクに切り替える確率を計算し，確率が高いタスクのサムネイルを強調することでユーザが走査するサムネイルの実勢数を減らすことを考える．タスクの強調方法としては，二種類の方法について検討を行った．

ず以下の二つの用語について定義しておく．

サイズ 確率が高いタスクほどサムネイルを大きくする．

タスク タスク管理の最小単位．本研究ではウェブブラウザを

透明度 確率が高いタスクのサムネイルを不透明にして，確率想定しているので，ブラウザで開かれた各ページがタスク．

が低いタスクのサムネイルを透明にする．

ワーキングセット ユーザが一つの目標のために開いているタ3. 3 関連するタスクの短期記憶への復旧の問題

スクの集合．[4] で定義された activity に近い概念である．

現在のユーザ，特にビジネスユーザは，タスク執行においてまた，既存のタスク管理システムにおいて，タスクを切り替

割込みが頻繁に起こり，割込みと割込みの間のタスクへの集中えるためのボタンの表現としては，大きくわけて三種類ある．

時間が非常に短いということが観察されている [5], [6]．ユーザ

タイトル (またはタイトルに加え小さなアイコン) Microsoft

が割込み後に当初のタスクに戻る場合，そのタスクに関わる情Windows のタスクバーやタブブラウザのタブバーなどで採用．

報を再度短期記憶にロードする必要がある．本研究では自動的

サムネイルに相互に関連するタスクの集合を計算することで，ユーザに負Mac OS X の Exposé と Windows Vista の Aero

担をかけずに，スムーズなタスク復旧を支援する．

で採用．
アイコン

Mac OS X のドックと Windows 7 のタスクバーは大きいアイコンだけを表示．
以下，本章では，ユーザのタスク切替えの効率低下の原因となっているいくつかの問題について順に説明していく．

3. 1 視認性の問題

3. 4 切替えボタンの問題
マウス等のポインティングデバイスでオブジェクトを選択するのにかかる時間を予測するモデルとして，Fitts Law が知られている [10]．二次元での Fitts’ Law として，本研究では次式
によって定義される SMALLER-OF 方法 [11] を採用する:

上述の，タスク切り替えの三種類のボタンについてそれぞれ
視認性の問題を分析する．
タイトル (またはタイトルに加え小アイコン) タスク数が増え

M T = a + b log2 (A/min(W, H) + 1)
ここで，各変数は以下の値を表す．

ると，通常，タイトルが一部しか表示できなくなる．その場合，
もし違うタスクの表示される部分タイトルが，各タイトルの特異部分ではなく共通部分になると，その部分タイトルではタスクを区別できなくなり，ユーザはマウスをタイトル上に移動
してツールチップを見たり，それらのタブの順番を覚えたりし

M T : 所定オブジェクトに移動するのにかかる時間
A : ポインタからオブジェクトの中心への距離
W, H : オブジェクトの幅と高さ
a, b : ポインティングデバイスによって決まる定数

なければならない．特にウェブページのタイトルのユーザビリ
ティはばらつきが大きく，このような問題が頻発する．

小さなタブやタスクアイコンを用いるシステムでは，Fitts’ Law

サムネイル

サムネイルの場合も，ウィンドウ中の閲覧部がテによりタスク選択に時間がかかる．この問題は，タスク数が増

キストのみの場合などは，よく似たサムネイルになり区別しにえるとタブ等が小さくなるシステムでは特に著しくなる．本研

くくなる．また，サムネイルはウィンドウ全体を均一に縮小す

究は大画面上の余ったスペースに大きなサムネイルを表示するるため，重要部分とそうでない部分が同じように見にくくなる．

ことで，この問題を解決する．

アイコン

アイコンの場合も同じアイコンを持つタスクが区別できなくなる．Mac OS X のアプリケーションウィンドウ切替
え機能では，そのような場合，二回の操作が必要になる．

3. 5 ウェブページ自体の情報
ウェブ閲覧に焦点を置く場合，ウェブ自体の特徴にも注目する必要がある．まず，ウェブページ間にはリンクが存在する．ま

視認性の問題を解決するために，本研究ではサムネイルをよた，従来の多くのアプリケーションが専用データ型式を用いる

り高機能にする．具体的には，ウェブページの構造を利用して，のに対し，ウェブページは標準的型式で記述されており，ペーページ内にあるロゴと特徴画像を抽出し，これらをサムネイル

ジ中のテキストや画像などの抽出，利用が容易である．

上に重ねて表示することで，視認性の向上が期待できる．

4. サムネイル

3. 2 走査の問題
タスク数が多くなると，タスク切替えの際に多数のアイコンやサムネイルを走査しなければならない．一般に人間は空間上

この章ではサムネイルの利点と欠点についてさらに分析し，本研究で提案する拡張サムネイルについて説明する．

の配置を記憶する能力に優れているため，多くのアイコンやサ

4. 1 サムネイルの利点

ムネイルの位置を覚えることもある程度は可能だが，この記憶

人間はテキストよりビジュアルな情報の方が，覚えたり識別を維持する労力はユーザの負担となる．また，このような記憶したりする能力が圧倒的に高いことが知られている．そのため，はタスクの遂行に伴い徐々に消えてしまう危険がある．この走サムネイルはこれまで広くユーザインターフェースで有用な道

—3—

図4

サムネイル

図5

テキスト部の

図6

拡張サムネイル

サムネイル

図 7 ロゴと特徴画像による拡張サムネイル

具として使用されてきた．例えば，Mac OS X の Exposé はサムネイルを並べて一覧表示することでタスク切替えを支援する．
サムネイルに関する研究についてもこれまでに多くのものがある．Cockburn らはサムネイルの文書閲覧における有効性を検証している [12]．また，Woodruﬀ らはウェブ検索結果のサムネイルを生成し，これにテキスト概要を重ねて表示すること
で，検索過程を支援する方式を提案している [13]．
また，サムネイルはタスク管理システムにおいて，選択しやすいメリットもある．Fitts Law によって，細長いタブよりサ
ムネイルの方がより選択しやすいことが期待できる．

4. 2 サムネイルの欠点
状況によってはサムネイルにも欠点がある．例えば，論文のような一ページ目がテキストのみのページはサムネイルで区別できなくなる．あるいは，Wikipedia 等のページでは，ページ冒頭に特徴的な写真等があり後半はテキスト中心になる場合が多い (図 4) ため，ユーザがテキスト部分を閲覧しているとサムネイルが識別しにくくなる (図 5)．このように，サムネイルは必ずしも常に有用ではない．その原因は二つある．まず，サムネイルは通常，ユーザがその時に閲覧している部分から作られる．しかし，最もユーザの印象に残っている部分は，必ずしも
現在閲覧中の部分とは限らない．また，サムネイルはページ全体を均等に縮小するため，重要な部分も重要でない部分も同じ比率で縮小してしまう．

4. 3 拡張サムネイルによる解決
サムネイルの利点は損なわずに，その欠点を解消するため，
本研究では，各ページの特徴的な画像を常時サムネイルの上に重ねて大きく表示する方法を提案する (図 6)．これにより，ページの特徴的な部分がユーザの閲覧部分によらず常に，かつ，大きく表示されることになり，上述の二つの問題が解決される．
しかし，同じ特徴画像を持つページも存在する．例えば，

iPod を買おうとする人は同じ iPod の画像を特徴画像として持つ Amazon のページと楽天のページを同時に開くようなことがよくある．このような場合，ページ中にある各サイトのロゴを表示すると各サイトを区別しやすくなる．一方，ロゴだけを表示するのでは，同じニュースサイトで複数のニュースを閲覧する場合等に識別しにくくなってしまう．そこで本研究では，

覧における大抵のページの組合せに対応できる．また，ページの閲覧部分がわかりにくくなることを防ぐため，本研究では特徴画像をサムネイルの角に配置する (図 7)．

4. 3. 1 ロゴと特徴画像の抽出
本研究では，ウェブページ中の要素の下記の属性に関するヒューリスティックを用いて，ページ中のロゴと特徴画像を抽出する．判定に用いる重みや閾値等は観察と実験により決定しているが，今後，多数のページの正解データを作成し，機械学習を用いて，より精度が高い判定方法を開発する予定である．
位置

要素の左上角のページ左上角からのオフセット．画面サ

イズによってページ表示のマージンが大きく変わる場合がある
ので，マージンの部分は含めないものとする．
サイズ 要素の面積．
アスペクト

要素の幅と縦の比率．

タグタイプ

要素のタグの種類．

特徴文字列

要素の CSS クラス名や a タグの href 属性や img

タグの src 属性を連結した文字列．
ページ中の各要素に関して，下記の方法でヒューリスティッ
ク値を計算し，値が閾値以上かつ最大となるの要素を選択する．

•
場所

ロゴ抽出
左上または中央上部にある要素を優先

サイズ 500 以上，かつ 40000 以下
アスペクト

1 以上，かつ 8 以下

タグタイプ

img タグと a タグを優先

特徴文字列

ad，ads，banner を含まない要素と logo を含む

要素を優先

•
場所

特徴画像抽出ページ上部から 80 ピクセル以上離れていて，かつページの上部にある．
サイズ 8000 以上，かつ 1000000 以下
アスペクト

1/6 以上，かつ 6 以下

タグタイプ

img タグが優先

特徴文字列

ad または banner を含まない要素

4. 3. 2 抽出精度データ

ロゴと特徴画像を両方重ねることで，ある一つのものについて

Alexa.com が公開しているトラフィックベースのグローバル

色々なサイトのページを開く場合と，ある一つのサイトで色々のウェブサイトアクセスランキングの上位 100 個を使用してなページを開く場合の双方に対応する．これにより，ウェブ閲

上記抽出手法の精度を測定した結果を表 1 に示す．ただし，上位 100 件中の不適切なサイトと重複するサイト (google.com と—4—

表 1 ロゴと特徴画像の抽出精度考えることにより，タスク間の関連をより広く補足するためで

ロゴ

特徴画像

ある．また，検索結果ページやポータルページのようなハブと

総数

62

62

なるページから複数のリンク先を開くような場合，そのハブか

除外数

0

22

ら開かれたページ同士は関連があるものの，互いに直接切り替

83%

76%

精度

えたことがない場合が多いが，そのような場合も．p ∗ p を加えることでこのようなページ間の関連を補足できる．

google.jp など) は除外し，また，日本で普段よく使われるサ

5. 2 タスク進化

イトからいくつか典型的なものを加えた．各サイトから一つまユーザがタスクを遂行する際，タスク内容が変化していくこ

たは二つ代表的なページを選びテスト集合としている．正解はとがよくある．例えば，一つの複雑なタスクが処理しやすいよ

人間が手動で判定した．その際，正解となる特徴画像を持たな

うに複数のサブタスクに分割されたり，逆に，サブタスクが進かったために除外したページ数を「除外数」の行に示す．

んで全体的な複雑さが低下すると一つのタスクに再度，合併さ

5. 切替えの予測れたりする．また，タスクの当初の目標がタスクの進行にともない変わっていくこともある．

本研究ではマルチ仮想ワークスペースのような手動タスク管

一方，[7] で示されていたように，多数のタスク間での切替え

理の代わりに，切り替える確率が高いと予測されるタスクのサの問題は，メモリ管理におけるページングの問題に類似していムネイルを強調することによる，自動的なタスク管理を実現する．そこで，この連想に従って，タスク変化の問題の解決策とる．本章では切替え確率の予測について説明し，具体的な表示

して Denning のワーキングセットモデル [8] を考慮してみた．

については 6. 章で説明する．

Denning らの研究では固定サイズのスライドウィンドウを使

まず，いくつかの記号を定義する．ユーザの過去のタスク切用してワーキングセットを計算している．しかし，この方法を替え履歴を s(a1 , a2 , 1), s(a2 , a3 , 2), . . . のような記法で記述すそのままタスク管理に適用すると，ユーザが長い時間をかけてるとする．s(a, b, t) はユーザが t 回目の切替えでタスクを a か

一つのワーキングセットを遂行する場合，そのワーキングセッら b へ切り替えたことを示す．また，履歴中に現れる s(a, b, t)

ト内のタスク切替えがスライドウィンドウを埋め尽くし，他のと s(b, a, t) の総数を sc(a, b) で表す．本研究では，タスク間のワーキングセット内の切替え履歴が全部消えてしまう．この問関連の強さを用いて予測を行うため，a から b への切替えと b

題を解消するため，全切替え履歴にスライドウィンドウを適応から a への切替えを区別しない．タスク間の関係に方向性があするのではなくて，各タスクペアの間の切替え履歴に適応する．

る場合もありうるが，操作の間違いなどで逆の順番で戻る操作

すなわち，各タスクペア (a, b) における {s(a, b, t)} の集合にスも頻繁に行われるため，方向を区別する利点は小さいと考え，
ここでは方向性を無視することで計算を簡単化する．

ライドウィンドウを適応する．

5. 3 リンク効果

また，ユーザが想定するワーキングセットを正確に予測する

ウェブページは相互にリンクによって繋げられていて，ユー

ことは困難なため，ここではワーキングセットをその要素と非

ザはほとんどの場合リンクを通して，他のページへと遷移す

要素が二値的に決定される集合として定義する代わりに，タスる [1]．そこで，リンクによる暗黙の情報を利用するために，本ク間の関連度によって暗黙的に曖昧なワーキングセットを考え，研究ではリンクで新しく開かれたページを特別に扱う．具体的

後の強調表示も二値的ではなく連続的に行う．そのため，一つな扱い方を説明する前に，まずいくつかのウェブブラウジングのタスクが複数のワーキングセットに属する場合もある．

によくある切替えパターンを分析する．Weinreich の研究 [1] に

5. 1 切替え確率の計算よると，ユーザはいくつかの共通の目的でページを新しいタブ

総タスク数が n である時，各タスクに識別子として 1 . . . nやウィンドウで開く．例えば，ユーザは検索結果を確認する時を割り当て，履歴中でのタスク i から j に切り替える確率 pijに，素早く戻れるために新しいウィンドウでその結果を開く．

を以下で近似することにする．

この場合，新しいタブで開かれた検索結果が望ましいにせよ，

sc(i, j)pij = pji =|pre(i) ∪ post(i) ∪ pre(j) ∪ post(j)|そうでないにせよ，ユーザは他の結果を見るためか検索結果のページを閉じるために，検索結果のページに戻る．また，ユー

ここで，pre(i) = {s(j, i, t)}，post(i) = {s(i, j, t)}) である．

ザが時間を節約するために，一つのハブページにある興味を持

次に，マルコフチェーンモデルを利用して予測切替え確率をつページを全部新しいタブで開く場合があるが，この場合も，求める．pij を ij 要素とする n × n 行列を p とし，最終的な予ユーザはハブページに戻る．また，そもそもリンクが新しいタ

測切替え確率の行列 pr をブで開かれるようにページ中で定義されていることもよくある．

pr = p ∗ (1 − ²) + p ∗ p ∗ ²

よって，本研究では A タブにあるリンクから B タブを開いた
場合には A と B が同じワーキングセットに属すると仮定する．

で求める．ここで ² は履歴の中では二回の切替えで遷移した先

5. 4 少数ページ間の往復動作に一回で遷移する確率である．p ∗ p の項を加えるのは，履歴がまた，二三個のタスクの間で頻繁に切り替えたい状況がよく

まだ十分収集できていないために関連するタスク間に切替え履ある．このような状況を支援するため，本研究では直前二個の歴が存在しない場合でも，二回の切替えでの遷移先まで含めてタスクの予測確率にボーナスファクターを与える．

—5—半構造化インタビューを行う．実験 1 と実験 2 はともに普段タ
ブブラウザを使い慣れた 8 人の被験者によって行った．実験環
境は CPU が 2.53GHz の Macbook Pro と解像度 1920 × 1200の 24 インチ大画面ディスプレイとロジクールのマウスからなっている．実験は全で Firefox 中で行うので，Windows ユーザがMac に不慣れなことによる問題はないと考える．サムネイルを表示する領域のサイズは全ユーザで統一した．

7. 1 実験1

実験 1 ではタスク数が 7 の場合と 15 の場合について，タ
図 8 動的サイズモード

ブ方式，均一サイズサムネイル方式，均一サイズ拡張サムネ
イル方式の三方式でのタスク切替えにかかる時間を計測した．

3 ∗ 2 = 6 通りの各実験項目毎に，被験者に 50 回のタスク切替えを行ってもらい，次の項目を始める前に約一分間の休憩を取る．切り替えるべきタスクはランダムに選ばれ，ページ中央にそのタイトルを表示し，ユーザが正しく選択できると次へ進む．
ユーザが間違った選択をした場合は，メッセージを表示し，再度，選択させる．いずれの場合も，次の選択を始める前に，一旦，マウスカーソルを画面中央に移動させた．
タスク数 7 は人間の短期記憶の平均容量であり，ユーザがタ
ブまたはサムネイルの位置をすぐに全て覚えられる場合に，サ
図 9 動的透明度モード

ムネイルと拡張サムネイルが有効かを調べるものである．一方，

15 はユーザが全ての位置を覚えられない場合に対応する．
特定のページを覚えてしまう影響を避けるために，7 タスク

6. ユーザインターフェース
前章で述べた方法で各タブに切り替える確率を計算し，確率が高いタブのサムネイルを強調する．本研究では二つの強調
モードを用意した．
動的サイズモード 動的サイズモードでは確率が高いタブのサムネイルが大きく表示され，確率が低いタブのサムネイルが小さく表示される (図 8)．これには二つの利点がある．まず，確率が高いタスクのサムネイルを大きく表示することでユーザの注意を絞り，余分なスキャンを避けることができる．さらに，大きく表示することでマウスで選択しやすくなる．
しかし，サムネイルのサイズが変化すると表示の位置も変わってしまい，ユーザの空間的記憶に残っているサムネイルの位置が無効になってしまう．この問題を緩和するため，サムネ
イルのサイズが変わる際にアニメーションを用いた．これにより，ユーザはタスクがどこに移動したかを感知しやすくなる．
動的透明度モード 動的透明度モードでは確率が高いタスクのサムネイルがより不透明に表示され，確率が低いタスクのサム
ネイルがより透明に表示される (図 9)．動的サイズモードと同じように，不透明と透明の違いでユーザの注意をより確率が高いタスクのサムネイルに絞ることが期待できる．

7. 実

験

本研究では提案するシステムのプロトタイプを Firefox の拡張として実装し，提案システムを評価するために，二つの実験を行った．実験 1 は定量的に本システムにおける各要素の影響を計る．実験 2 はユーザに簡単なマルチタスクを遂行してもらい，と 15 タスクは異なるページセットを用意した．また，拡張サ
ムネイルの効果を測るため，ロゴと特徴画像が正しく抽出されたページを選んだ．さらに，Google の検索結果のページは頻繁に利用される重要なページなので，異なるキーワードの検索結果ページを両方のセットに含めた．また，英語力の個人差の影響を避けるために，全てのページを普段日本人がよく見るサ
イトから選択した．実験の順番の影響を避けるために，ユーザごとに 6 つの実験項目の順番をシャッフルし，また，タブの場
所を覚えてしまうことを防ぐために，なるべく 7 タスクと 15
タスクを交替で行うようにシャッフルした．実験を始める前には，各ページのタイトルからそのページを思い出せるように被験者に二つのページセットに目を通してもらった．
実験結果から 8 秒以上または 0.8 秒以下かかったものは除外
した．サムネイルや拡張サムネイルにより，ユーザが切り替えたいタスクを探す走査時間が短縮されているかを確認するため，切替えにかかった時間から，[11] による以下の式を用いて推定したマウス移動時間を差し引いたものを走査時間として比較した．

M T = 230 + 166 log2 (A/min(W, H) + 1)
タブ vs サムネイル 図 10 と表 2 で示すように，タブのかわりにサムネイルを使用することでタスク切替えの効率が向上している．t 検定により両者の間に有意な差があることを確認した (7 タブ:t=7.225，p=1.183e-12，15 タブ:t=2.8493，

p=0.004496)．走査時間 (図 11 と表 2) を見ると，7 タブでの走査時間はタブがサムネイルより短く，拡張サムネイルより長いが，15 タブではタブの走査時間がサムネイルより長いことがわかる．これは，普段タブを使い慣れているユーザにとっては，—6—

最初の三つのワーキングセットはあらかじめ開いておいたウェ

Experiment1 Switching Time
Switching Time (ms.)

4,000
3,500
3,000
2,500
2,000
1,500
1,000
500
0

Tab
ThumbnailAugmented Thumbnail

自由に新しいページを開いてもらう．実世界の割込み多発によるワーキングセット間の切替えをシミュレートするために，被験者に 2 分毎に「割り込み」をして他のワーキングセットへの7

切替えを指示し，全ワーキングセットを三周したら終了である．

15

動的サイズモードと動的透明度モードの比較を行うために，

Tabs

一回目はウォームアップとしていずれかのモードで遂行し，そ図 10 切替え時間の後の二回はそれぞれ動的サイズモードと動的透明度モードをExperiment1 Scanning Time
3,000
Scanning Time (ms.)

ブページを使ってもらう．最後のワーキングセットはユーザに使用する．順番の影響を取り除くため，使用するモードの順番

2,500

Tab
ThumbnailAugmented Thumbnail

2,000

はシャッフルする．実験終了後，被験者にアンケートを記入し1,500てもらい，最後に本システムに対する満足点，不満点，要望に1,000関するインタビューを行う．

500

ユーザアンケートは「そう思う」「少しそう思う」「どちらと

0

7

15

も言えない」「あまり思わない」「思わない」という五段階のリ

Tabs

図 11 走 査 時 間
表 2 実験結果 1 (µ=平均，σ=標準偏差)

タブ
サムネイル
拡張サムネイル

切替え時間
7 タブ
15 タブ
µ
σ
µ
σ
1928 542 2592 1079
1637 591 2376 1051
1520 525 2152
929

走査時間
7 タブ
15 タブ
µ
σ
µ
σ
1044 542 1708 1079
1065 591 1673 1051
948 525 1448
929

カート尺度を採用している．これらをそれぞれ 5 から 1 に換算した結果を表 3 に示す．この結果を見ると，タスク切替えにおいて本システムはタブより好まれており，予測による強調表示に関しては，サイズの変化が透明度の変化よりユーザの注意を引いている．質問 4 と質問 5 から動的透明度モードはあまり有効ではないことがわかる．また，質問 6 によりユーザは動的サ
イズモードで起こる位置の変化を嫌っていることがわかる．
サムネイル部分の結果から，本システムで提案するタスク管

タブ数が少ない時にはタブとサムネイルの探しやすさが変わらないためと思われる．
サムネイル vs 拡張サムネイル 図 10 と表 2 で示すように，拡張サムネイルはサムネイルよりタスク切替えが早くなる．t
検定により，両者の間に有意な差があることを確認した (7 タブ:t=2.9629，p=0.00314 15 タブ:t=3.1849，p=0.001505)．7
タブの場合，被験者がほぼ場所を覚えられるので，拡張サムネ
イルとサムネイルでは差が出ないことが予想されたが，事件結果では差が見られた．15 タブの場合，タブ数が多いので拡張サ
ムネイルの優位性がより強く現れており，サムネイルは拡張サ
ムネイルより走査時間が 15%長い．
また，注目すべき点として，走査時間がタスク数にしたがって線形的に増えていない．この理由としては人間の空間記憶の効果が予想される．今後， 毎回サムネイルの場所が変わる場合の走査時間についても調査する予定である．

7. 2 実験2

実験 2 では被験者に本システムのプロトタイプを使用してマ
ルチタスクを遂行してもらう．切替え確率の予測精度の測定と，ワーキングセット間の切替えの使い勝手を調査するために，四理でのサムネイルの使用とサムネイルの改良との有効性が確認できる．まず質問 7 の結果から，タスク管理においてサムネイ
ルの優位性がわかる．質問 8 で，拡張サムネイルが非常に好まれていることがわかる．質問 7 と質問 8 はともに点数が高く，かつ標準偏差も全質問の中で最も小さい．質問 9 の結果から，
拡張サムネイルが従来のサムネイルの見易さを阻害していない
こともわかった．好感度の部分では，ユーザの満足度がある程
度達成されていることがわかった．質問 17 では，半分以上の被験者が大画面ディスプレイを使用する場合は，このシステムを使うと答えており，再度，本システムの優位性が確認された．
アンケートの後のインタビューの結果を以下にまとめる．被験者 1，2 はサムネイルのサイズ変化によって起こる位置ずれに不満を持っていたのに対し実験者 4，7 はこのような位置ず
れが気にならない．実験者 5，7 は動的透明度モードで切替え確率が低いタブのサムネイルが透明になると選びにくくなることを指摘している．実験者 4，8 はサムネイルが左右両辺に表示されると視線が行き来して疲れると指摘し，実験者 1，2 はサイズや透明度の変化の意味がわからず，システムが行っている予測のことをあまり意識していなかった．

つのワーキングセットを用意した．

•

Macbook と Macbook Air の仕様を比較しながら，それぞれに対する口コミを閲覧する•

オバマ大統領の経歴や紹介ページから情報収集する•

京都大学の有名人四名のプロフィルを閲覧し経歴上の相違点を調べる• 「オリンピック 2008」を Google で検索し，上位結果を閲覧する

8. 考察と結論
本研究では，まず拡張サムネイルを用いて効率的なタスク切替えを支援する手法を提案した．実験 1 より，拡張サムネイル
はサムネイルより探しやすいことが示されている．特に，タブ数が増えることにしたがって，拡張サムネイルの効果が大きくなる．拡張サムネイルはウェブページにある特異な部分，すな
わちロゴと特徴画像を大きく表示することで，ユーザのビジュ—7—

が短い結果が得られたことは興味深い．この結果はユーザが空

表 3 ユーザアンケート結果 (µ=平均，σ=標準偏差)
切替え

µ

σ

間記憶からタブまたはサムネイルの大体な位置を取得したあと

1. このシステムがタブよりタスクの切替えが早くなる

4.50

0.71

2. 動的サイズモードで私が次に切り替えるタブのサムネイルを大

4.00

0.50

に，確認のプロセスも行っていて，この確認プロセスにおいて，

3. サムネイルが大きくなることで探しやすくなる

4.63

0.89

4. 動的透明度モードで私が次に切り替えるタブのサムネイルをよ

3.67

0.78

5. サムネイルが不透明になることで探しやすくなる

3.33

0.91

6. 切り替える際にサムネイルのサイズと場所が変わるのがいやだ

2.13

0.94

しては，ユーザから，サムネイルが画面上の左右両辺に離れて

サムネイル

µ

σ

表示される点とサムネイルの強調によって表示位置がずれる点

7. サムネイルはタブより探しやすい

4.63

0.48

が特に被験者に問題として指摘されており，今後，ユーザの空

8. ロゴと特徴画像をサムネイルに重ねて表示すると区別しやす

4.63

0.48

9. ロゴと特徴画像をサムネイルに重ねて表示すると見にくくなる

4.00

0.79

案したいと考えている。もう一つは、拡張サムネイルの様々な

好感度

µ

σ

可能性である。今回の実験でタスク切り替えにおいて拡張サム

16. 私はこのシステムに満足だ

4.25

0.61

ネイルの有効性を確認できたので、今後拡張サムネイルを検索

17. 大きいディスプレイが持ったらこのシステムを使う

4.38

0.82

きくしてくれるり不透明にしてくれる

く、かつ探しやすくなる

拡張サムネイルがタブより効率的であるのではないかと推測される．
今後の課題としては二つの方向を考えている。一つは、タス
ク切り替え支援手法の改良である。本研究で提案した手法に関間的記憶をうまく利用できるサムネイルの新しい配置手法を提結果やデスクトップサーチなどに応用する可能性を検討していきたいと考えている。

アル感知能力を最大に発揮させることを目指しているが，実験謝辞 本研究の実験にご協力頂いた方に深甚の謝意を表する．

2 のアンケートでは，拡張サムネイルは非常に高い評価を得た．

本研究は科研費 (特定領域研究「情報爆発」，18049041) の助成

また，インタビューにおいて，商品や人物などの特徴画像が明を受けたものである．

示的なものであるウェブページでは拡張サムネイルは非常にわかりやすいという意見を得た．実験 1 では実験者に連続的にタスクを切り替えていたため，タブまたはサムネイルの位置は
ほぼ短期記憶に保存されるが，実際のウェブブラウジングではユーザの作業に伴って，タブまたはサムネイルの位置は徐々に忘れられてしまうので，拡張サムネイルはより大きな効果を期待できる．
また，両辺に常時サムネイルを表示する手法は，特にワイド型の大画面ディスプレイの表示領域を有効利用できる利点があ
るが，サムネイルを探す際に視線が左右に行ったり来たりすることで効率が下がることがわかった．
また，本研究では，マルチ仮想ワークスペースのようなタス
ク管理システムにおいて必要とされる手動でのワーキングセット管理を自動的に行うために，履歴によるタスク切替え確率の予測手法を開発した．しかし，実験 2 においては，多くのユー
ザが，確率によりサイズや透明度を変化させる強調表示を，明示的に意識していなかった．また，実際のウェブブラウジング
において，検索結果などのページは一回しか切り替えられないことがよくあるので，履歴による予測はそのような状況に適切ではない．今後は，内容の関連性と履歴の双方を利用する予測手法について開発，検討する予定である．
予測される確率でサムネイルを強調する方法としては，動的
透明度と動的サイズの二通りを用意したが，動的透明度は実験

2 のアンケートにより，あまり好まれていないことが示されている．また，インタビューでは，確率が低いタブのサムネイル
が透明過ぎて選びにくいことも指摘された．動的サイズモードの主な問題はサイズ変化によって起こる位置変化である．実験

2 のアンケートにも反映されているように，空間記憶はタスク管理において重要な役割を果たしていて，サイズの変化による位置のずれは切替え効率を悪化させる．一方，空間記憶の効用にも関わらず，7 タブでも拡張サムネイルはタブより走査時間

文

献[1] H. Weinreich, H. Obendorf, E. Herder and M. Mayer: “Notquite the average: An empirical study of web use”, ACM
Trans. Web, 2, 1, pp. 1–31 (2008).
[2] G. Smith, P. Baudisch, G. Robertson, M. Czerwinski,
B. Meyers and D. Andrews: “Groupbar: The taskbar
evolved”, Proc. OZCHI 2003, pp. 34–43 (2003).
[3] Y. Miyata and D. Norman: “Psychological issues in supportof multiple activities”, chapter 13, pp. 265–284 (1986).
[4] L. Cioni: “User interfaces and multitple activities: The user
perspective” (1994).
[5] V. M. González and G. Mark: “”constant, constant, multitasking craziness”: managing multiple working spheres”,
CHI ’04: Proc. of the SIGCHI conference on Human factors in computing systems, ACM, pp. 113–120 (2004).
[6] M. Czerwinski, E. Horvitz and S. Wilhite: “A diary studyof task switching and interruptions”, CHI ’04: Proc. of the
SIGCHI conference on Human factors in computing systems, ACM, pp. 175–182 (2004).
[7] J. D. Austin Henderson and S. Card: “Rooms: the useof multiple virtual workspaces to reduce space contention
in a window-based graphical user interface”, ACM Trans.
Graph., 5, 3, pp. 211–243 (1986).
[8] P. J. Denning: “The working set model for program behaviour”, Commun. ACM, 11, 5, pp. 323–333 (1968).
[9] E. W. Ishak and S. Feiner: “Content-aware layout”, CHI’07: CHI ’07 extended abstracts on Human factors in computing systems, ACM, pp. 2459–2464 (2007).
[10] P. Fitts: “The information capacity of the human motor
system in controlling the amplitude of movement”, Journalof Experimental Psychology, 47, pp. 381–391 (1954).
[11] I. S. MacKenzie and W. Buxton: “Extending ﬁtts’ law
to two-dimensional tasks”, CHI ’92: Proc. of the SIGCHI
Conf., ACM, pp. 219–226 (1992).
[12] A. Cockburn, C. Gutwin and J. Alexander: “Faster document navigation with space-ﬁlling thumbnails”, CHI ’06:
Proc. of the SIGCHI Conf., ACM, pp. 1–10 (2006).
[13] A. Woodruﬀ, A. Faulring, R. Rosenholtz, J. Morrsion and
P. Pirolli: “Using thumbnails to search the web”, CHI ’01:
Proc. of the SIGCHI Conf. on Human factors in computing
systems, ACM, pp. 198–205 (2001).

—8—