増井ラボノート コロンブス日和

第12回 SmoothSnap

この記事を読むのに必要な時間:およそ 2 分

手際よく値を設定したい

パソコンやスマホのアプリ上で各種の値を設定することがありますが,スライダで細かい値を正確に設定することは困難です。Mac OS Xの色設定画面のように0~255の数値を設定するだけの場合でもマウスで正確に値を設定するのは難しいので,図1のように数字を入力するテキストボックスが別に用意されています。

図1 数字を入力するテキストボックス

図1 数字を入力するテキストボックス

秒単位で時刻を設定したいような場合は事態はさらに絶望的です。設定可能な値は24×60×60=86,400通りあるにもかかわらず,スライダのドット数は数百程度しかありませんから,1ドットスライダを動かすだけで値が何百も飛んでしまうことになります。

このため,細かく時刻を指定したい場合は時間/分/秒を別々に指定するのが普通です。

値を細かく設定したい場合がある一方,大まかな値をすぐに設定したい場合もあります。たとえば時刻を10時ちょうどに設定したい場合,前述のようなシステムでは時間を10に/分を0に/秒を0に設定する必要がありますが,このようなキリの良い時刻を指定したい場合でも分や秒まで細かく指定するのは面倒です。キリの良い値はもっと簡単に設定できるようになっていてほしいものです。

このように,一般的なスライダやスクロールバーでは細かく値を調整したり大まかな値を設定したりすることが簡単ではないのですが,スライダやスクロールバーの挙動を工夫すればこういった問題を解決できる可能性があります。

微調整のインターフェース

GUIで値を微調整するためのさまざまなインターフェースが昔から研究されています。

普通のスライダで秒単位で時刻を設定することが不可能なのであれば,微調整専用のインターフェースを追加すればよいでしょう。スライダやスクロールバーにボタンを追加し,ボタンを押したら最小単位ずつ位置を移動させられるようにしたものがよく使われていました図2)。

図2 ボタンで微調整可能なスライダ

図2 ボタンで微調整可能なスライダ

スライダのノブを拡張して,微調整を可能にしたシステムもあります。たとえば90年代にメリーランド大学で開発されたAlphaSliderというGUIツールでは,スライダのノブを上下に分割し,ノブ上でク リックした位置によって微調整/粗調整を選べるようになっています図3)。

図3 AlphaSlider

図3 AlphaSlider

私が昔開発したFine Sliderというシステムでは図4),スライダのノブ以外のバックグラウンドをクリックするとゴム紐のようなものが出現し,マウスでゴムを引っ張るような動きをすることによってノブ位置の微調整を可能にしていました。マウスカーソルがノブの近くにあるときはノブがゆっくり動き,遠くにあるときは速く動きます。

図4 FineSlider

図4 FineSlider

iPhoneの音楽再生アプリでは図5),再生時刻を指定するためのスライダをタップしてから指を下にずらしてスライドすると,ずらさないときよりも細かく時刻を調整できるようになっています。

図5 iPhoneの場合

図5 iPhoneの場合

場所をおおまかに指定する

キリの良い時刻を簡単に指定したり図形をきちんとそろえたりするためには,微調整とは異なる手法が必要です。

図形を動かして隣の図形にぴったりそろえるような操作をしたいときは「スナッピング」というテクニックがよく使われます。スナッピングとは,ドラッグ中の図形が別の図形やグリッドの近くに来たときそこにぴったりそろうように移動するもので,ユーザが正確でない操作をしても意味のある場所に移動させることができるので便利です。

スナッピングは図形編集ではお馴染みのテクニックですが,キリの良い値にパラメータを設定するような場合でも利用できます。10:00かっきりに時刻を合わせたい場合や,次の曲や次のチャプタに動画を移動させたいような場合にも使えます。音楽や動画を見る場合でも,次の曲やチャプタの1秒前から再生したいような場合,スナッピング機能で次の場所に移動してから微調整操作で1秒戻りたくなるでしょう。

つまり,スナッピングのようなおおまかな操作の恩恵を受けつつ微調整も可能であるという巧妙なインターフェースが欲しいところです。

SmoothSnap

遠くに旅行する場合,目的地の近くの空港まで飛行機で飛んでから電車やバスに乗り,最後に徒歩で目的地まで行くことができます。

このように,移動の必要があるときは,移動する距離によって移動の速度や粒度を変えることによってさまざまな場所にうまく移動できるようになっているわけですが,スライダやスクロールバーにおいても同様の方針が使えればいいでしょう。

iPhoneの微調整機能もあまり直感的とはいえませんし,そういう機能があることに気付く表示もありませんから,この機能を知らない人も多いと思われます。もっと単純に,現在と同じ方法で自然にスライダやスクロールバーを操作するだけにもかかわらず,おおまかなスナッピング動作や微調整を可能にするためにSmoothSnapという手法を開発しました。

SmoothSnapでは次の方針で値や位置をコントロールします。

  • ノブを大きく移動した場合は重要なポイントにスナッピングする
  • ノブを少しだけ動かした場合は細かい粒度で連続的に値を変化させる

著者プロフィール

増井俊之(ますいとしゆき)

1959年生まれ。慶應義塾大学環境情報学部教授。ユーザーインターフェースの研究者。東京大学大学院を修了後,富士通半導体事業部に入社。以後,シャープ,米カーネギーメロン大学,ソニーコンピュータサイエンス研究所,産業技術総合研究所,Appleなどで働く。2009年より現職。携帯電話に搭載される日本語予測変換システム『POBox』や,iPhoneの日本語入力システムの開発者として知られる。近著に『スマホに満足してますか? ユーザインターフェースの心理学』。

コメント

コメントの記入