WISS2009

SmoothSnap: スナッピングにもとづく微調整可能な GUI 部品
SmoothSnap: Snapping-enhanced GUI Widget for Handling Large Data

増井俊之∗
Summary. Browsing a large document using a simple scrollbar is not comfortable, because it is not
only diﬃcult for users to locate the information they need, but it is hard to control the knob to display theinformation at the right place on the screen. We propose a snapping-based widget called SmoothSnap,with which users can easily grasp the structure of a large document, ﬁnd the information they want, anddisplay it at the right place with minimal eﬀort. SmoothSnap can also be used for ﬁne-controlling a slider
and other GUI widgets.

1

はじめにスライダやスクロールバーは値を設定したりデータをブラウズしたりするのに広く利用されている基本的な GUI 部品であるが、細かい値を設定したり大量のデータをブラウズしようとする場合、微調整が難しかったり目的の項目に簡単に到達できないといった問題点がある。これらの問題点を解決するために、スライダやスクロールバーのノブ位置を微調整する AlphaSlider[1]、PopupVernier[2]、Automatic Speed-dependent Zooming (ASDZ) システ
ム [3]、Content-aware Scrolling (CAS) システム[4]、FineSlider[5] などのシステムが提案されているが、スライダでもスクロールバーでも共通に利用できる汎用の手法は存在しない。

2

1 秒単位の設定

10 秒単位の設定

1 分単位の設定10 分単位の設定

スナッピングを利用した GUI 部品

遠くに旅行する場合、目的地の近くの空港まで飛んでから電車やバスに乗り、最後に徒歩で目的地まで行くことができる。また、遠くない場所に行きたい場合は徒歩や自転車を使うのが普通である。このように、現代社会で移動の必要があるときは、移動する距離によって移動の速度や粒度を変えることによって様々な場所に効率的に移動できるようになっているわけであるが、スライダやスクロールバーにおいても同様の方針を採れば、以下のような簡単な操作で効率的に項目を選択したり表示場所を移動したりできるようになる。

• ノブを沢山移動した場合は重要なポイントにスナッピングする• ノブを微量だけ操作した場合は細かい粒度で連続的に値を変化させる∗

初期状態

Copyright is held by the author(s).
Toshiyuki Masui, 慶應義塾大学 環境情報学部

1 時間単位の設定
図 1. ノブをドラッグしたときの時刻の値の変化

このような GUI 操作手法を SmoothSnap と呼ぶことにする。スライダとスクロールバーについてSmoothSnap を実装したものを以下に示す。

2.1

スライダによる時刻の設定

時/分/秒の設定は 24×60×60 = 86400 通りの可能性があるため、これをひとつの標準的なメニューやスライダで設定することは難しい。前述の方針にもとづいて実装した時刻指定スライダを図 1 に示す。
スライダのノブを動かそうとするとき、マウスをクリックした後のマウスの移動距離が少ない場合は微細な調整が可能であるが、移動距離が大きくなると粒度が粗くなって分単位/時間単位でスナッピングするようになる。
「12:34:56」のように細かい分/秒までを正確にWISS 2009(b) わずかに下にドラッグした状態(a) 初期状態(c) もう少しドラッグした状態。<h3>にスナッピ (d) かなり下方までドラッグした状態。<h2>にスナッピングしている。

ングしている。

図 2. ドラッグによるスナッピング

指定したい場合、まずノブを大きく動かしてスナッピングを活用して目的の時刻に近いキリ時刻 (e.g.
12:00:00) まで移動し、一度マウスを放してから再度ノブを動かすことにより目的の時刻にさらに近いところ (e.g. 12:30:00) まで移動し、... という操作を繰り返すことによって徐々に目的の時刻に近付けていくことができる。

数の GUI 部品を利用することが多い。SmoothSnapにもとづく GUI 部品は、原理が単純であるにもかかわらず広い範囲で利用することができ、上記のような問題を解決できる可能性があるので、さらに広い範囲の応用について検討していきたい。

2.2[1] C. Ahlberg and B. Shneiderman. AlphaSlider: A Compact and Rapid Selector. In Proceedings of the ACM
Conference on Human Factors in Computing Systems(CHI’94), pp. 365–371. Addison-Wesley, April 1994.

大きな文書のスクロール

大きな文書が 1 ページの Web ページになっているとき、その構造を把握しながらブラウジングを行なうことは難しい。SmoothSnap を利用して同じページをブラウジングしている様子を図 2 に示す。スクロールバーのノブをドラッグしたとき、ノブの移動量が小さい場合は通常の場合と同様にスクロールが行なわれるが、移動量が大きい場合は章や節の先頭でスクロールがスナッピングするため、常に<h2>や<h3>が画面の上部に位置することになり、全体的にどういう章や節で構成されているのかを容易にブラウズして把握することが可能になっている。

3結論

普通のスクロールバーで大きな Web ページをブラウズするのは難しいため、巨大な文書を Web に載せる場合は階層的に分割するのが普通である。また、細かい値をスライダで設定することは難しいので、複参考文献[2] Y. Ayatsuka, J. Rekimoto, and S. Matsuokan. Popup
Vernier: A Tool for Sub-pixel-pitch Dragging with Smooth
Mode Transition. In Proceedings of the ACM Symposium
on User Interface Software and Technology (UIST’98),
pp. 39–48. ACM Press, November 1998.
[3] T. Igarashi and K. Hinckely. Automatic Speed-dependent
Zooming for Browsing Large Documents. In Proceedings of the ACM Symposium on User Interface Software
and Technology (UIST2000), pp. 139–148. ACM Press,November 2000.
[4] E. W. Ishak and S. K. Feiner. Content-aware Scrolling.
In Proceedings of the ACM Symposium on User Interface
Software and Technology (UIST2006), pp. 155–158. ACM
Press, November 2006.
[5] T. Masui, K. Kashiwagi, and G. R. Borden. Elastic
Graphical Interfaces for Precise Data Manipulation. InCHI’95 Conference Companion, pp. 143–144. AddisonWesley, May 1995.