WISS2013

Overview Scrollbar: ページ全体を概観として表示するスクロールバー
溝口 晃

坂本 大介

五十嵐 健夫∗

概要. 画面に収まり切らない縦長のドキュメントを表示する際，多くのアプリケーションは画面の端にスクロールバーを表示する．しかし，現在使用されているスクロールバーの殆どは古典的なものであり，改善の余地が多分に存在する．本研究ではひとつの改善策として，スクロールバー上にページ全体の概観を表示する手法，Overview Scrollbar を提案する．このような手法を取った時，縦長のページを閲覧する場合に概観をどのように縮小して表示するのかが問題となってくる．なぜなら縦長ドキュメントのアスペクト比を維持しつつ概観を表示しようとすると，その横幅が非常に細くなってしまうからである．我々はドキュメン
トの長さに関わらず概観の横幅を一定に保って可読性を維持するために，部分的に縮小率を変化させて概観を描画する手法を新たに提案し，Overview Scrollbar の性能や問題点を調査するためにユーザスタディを実施した．

(a)

図 1. ドキュメントと Overview Scrollbar

1∗

Copyright is held by the author(s).
Ko Mizoguchi, Daisuke Sakamoto, and Takeo Igarashi
東京大学大学院情報理工学系研究科

(c)

(d)

図 2. (a)Uniform Scaling (b)Vertical Compression (c)Fisheye (d)Perspective

はじめに

現在使用されているスクロールバーの多くは，ドキュメントの表示領域を狭めないようにウィンドウの端に細長く表示されるようになっている．しかし，近年ディスプレイの解像度が上昇し，また横長のディスプレイが増えてきているため、必ずしもスクロールバーを細長く表示する必要は無くなってきている．
そこで我々は，ページ全体の概観を縮小して表示する幅の広いスクロールバー，Overview Scrollbar を提案してきている (図１)[2]．
Reader’s Helper[1] や Popout Prism[3] では我々の Overview Scrollbar と似たインタフェースが実装されているが，これらはドキュメントが縦長の場合にどう概観を縮小するのかという問題について深く言及していない．そこで我々は，単純な２種（UniformScaling, Vertical Compression）に加え，新たな縮(b)小方法を取り入れた２種のスクロールバー（Fisheye, Perspective）を実装し，計４種の Overview
Scrollbar の性能や問題点を調査するためにユーザスタディを実施した．

2

提案手法

我々は，概観の縮小方法別に４種類のスクロールバー（Uniform Scaling, Vertical Compression,Fisheye, Perspective）を設計した (図２)．以下に，それぞれのインタフェースがどのようにドキュメントを縮小して概観を表示するか述べる．
(a)Uniform Scaling: ドキュメントのアスペクト比を維持して縮小する．そのため，ドキュメン
トが縦長の場合にスクロールバーが細くなってしまう事がある．
(b)Vertical Compression: 基本的にはドキュWISS 2013

図 3. 実験結果: (左) タスクにかかった時間の平均 (右) アンケート結果の平均メントのアスペクト比を維持するが，横幅はウィンドウの 20%に固定されており，ドキュメントが一定以上縦長の場合，縦方向にのみ縮小する．
(c)Fisheye: スクロールバー上に焦点領域と背景領域が存在する．焦点領域ではアスペクト比を維持して概観を比較的大きく表示する一方で，背景領域では縮小率を徐々に上げて行き，魚眼レンズのような視覚効果を出す．ユーザはスクロールバー上で右クリックすることで，焦点領域を自由に動かすことが出来る．
(d) Perspective: 基本的には Fisheye と同様のインタフェースとなっているが，Perspective では全体を通して横幅が一定で，ウィンドウの横幅の20%に固定している．

3

ユーザスタディOverview Scrollbar の性能や問題点を調査するためにユーザスタディを実施した．参加者は 12 名で全員従来のスクロールバーを使用した経験があった．スタディを通して，参加者がそれぞれのタスクにかかった時間を計測した．
3.1

タスク

大きなドキュメントの中から，ある対象を探してクリックするタスクを４種類設計した．
(1) 画像探索: 参加者は初めに探す対象となる画像を提示され，その画像をドキュメント内から探してクリックする．
(2) 商品探索: 参加者は初めに探す対象となる商品を指定され，その商品をドキュメント内から探してクリックする．商品は色，形などの外見上の特徴を文章によって指定される．
(3) 往復: 参加者は大きなドキュメント上に設置された２つのリンクを，上下にスクロールしながら交互に合計 6 回クリックする．
(4) ソースコード探索: １つの変数がソースコード中の全ての箇所でハイライトされており，参加者はその中から指定された条件に合う変数を探してクリックする．

3.2

アンケート

アンケートを通じて参加者の好みを収集した．使いやすさ・使い慣れやすさ・適切さ・使いたさをそれぞれ５段階で評価してもらい，感想・印象などの任意のコメントも収集した．

4

結果とまとめ実験結果を図３に示す．タスクにかかった時間では往復タスクに有意な差が確認され，従来のスクロールバーが最も遅く，Vertical Compression が一番早かった．またアンケート結果では使いやすさではFisheye，Perspective が低く評価され，慣れやすさ
では Vertical Compression が高く評価される傾向にあった．
全体を通して高性能だった Vertical Compressionは既に実用的であると考えられる．Fisheye や Perspective の性能はそれほど高くなかったが，焦点領域を移動するインタフェースをユーザにとってより直感的にすることで，性能が上昇する余地は存在すると考える．

参考文献[1] J. Graham. The reader’s helper: a personalized
document reading environment. In Proc. of CHI’99, pp. 481–488. ACM, 1999.
[2] K. Mizoguchi, D. Sakamoto, and T. Igarashi.
Overview Scrollbar: A Scrollbar Showing an Entire Document as an Overview. In Proc. of INTERACT ’13, pp. 603–610. Springer Berlin Heidelberg, 2013.
[3] B. Suh, A. Woodruﬀ, R. Rosenholtz, and
A. Glass. Popout prism: adding perceptual principles to overview+detail document interfaces. In
Proc. of CHI ’02, pp. 251–258. ACM, 2002.