前回「nUIのすすめ」という大風呂敷を広げてみたのだが、 実はあの話にはまだまだ「ひみつ」があって、 例えば、 「自分の存在をアピールしたい場合には一度だけブリンクしてもいい」とか、 奇妙なルールを思いついているのだが、 こういうのって誰か考えてませんかね。 というのがある。

※ 個人的には blink once と呼んでいる。

§

お預けになっていた問題を蒸し返しておこう。 次の3つの条件を満たしたUIを考えるという話だ。

(1) ターゲット外でボタンが離されたら無条件にキャンセルする。

(2) ユーザーがボタンを押したと誤解しないような表示をする。

(3) 反応がもたつかないようにする。

この3つを同時に満たすにはどうするか。 具体的に説明すれば、 ターゲット(ボタンやアイコンなど)の内側でマウスボタンが押されて、 ε(ごく短時間)以内に、ターゲット外に出てマウスボタンが離される、 という状態になったら、マウスボタンを押さなかったことにして、 この時の表示が、ボタンを押したときと区別できるようにする、という話。 単純に考えれば、ボタンを凹んだ状態にしなければいいが、 押した瞬間にボタンを凹ませないでε経過するまで待ったら、 画面表示がもたつかないか、という問題だ。

§

そんな短時間で外に出ることまで考えられるか、 という発想はあるだろう。 そんな人におすすめの、実に馬鹿馬鹿しいアイデアがある。 ターゲットの外に出られなくしてしまえばいい。 ターゲット内でマウスボタンが押されたら、 ε経過するまではターゲットの外に出られなくするのだ。 壁があって外に出られない、というイメージである。 このアプローチのメリットは、押した瞬間にボタンを凹ますことができることである。 ただ、マウスのボールにゴミでもついたかな、程度の違和感はあるかもしれない。

プログラム的には 「ε以内にリリースされたら位置とは無関係にターゲット上でクリックされたことにする」 いうアプローチと変わらない。 厳密にいえば視覚的には大きな違いがあるのだが、 多分、見ていても分からないだろう。

§

もう一つのアイデア。 ちょっと反則に近いが、 要するにキャンセルされたことがユーザに分かればいいのでは?　その通りだ。 だったら、キャンセルの場合に派手に自己主張するとか。 具体的には、 「今のなし」というフキダシを表示する。 アニメーションを用意しておき、 「今の操作はキャンセルされました」と教えるように設計する。

最初の案よりもっと馬鹿馬鹿しいようだが、 実際に作ると面白いような気もする。 実は今回はサンプルプログラムを作って紹介する予定だったのだが、 暇がなくて間に合わなかった。 誰か作ってみてください。

真面目にやれと言われそうなので、その逆も書いておく。 身近に、もっと単純で効果的なアプローチがあるのだ。 キャンセルされた場合ではなく、押された場合に自己主張するのである。 押したらLEDが点灯するようなタイプのボタンがあるでしょ。 あれだ。 ボタンが押せないとLEDが点灯しないから、 押し損ねたことはその時点で分かる。

GUI的にはどう実装するか。 簡単なのは、押したままにする、という方法だ。 ただ、これは何度でも押せるボタンには基本的に適用できない。 押し込んであるボタンがさらに押せてもいい、というのなら別だが、ちょっと気持ち悪い。 点灯型のUIにすれば、二度押しでも適用できる。

§

3つめのアプローチとして、 ターゲットが「押せる」という状態の表現を、 「押した」状態と別に用意するという方法がある。

本来、物理的なコントロールであれば、 このようなフィードバックは基本的に必要ない。 大抵のボタンは、ボタンに触った瞬間に、 そのことが触覚的にフィードバックされるからだ。 例外的に、平らなタッチパネル式のボタンもあるが、 押しにくいでしょ。 防水にするのが簡単なので、特に水まわりに多用されているようだが。

触覚的なフィードバックの重要性がよく分かる例がある。 最近一部で流行しているような、 タッチパネル式の切符自動販売機だ。 あるいは、既に殆どタッチパネル式に移行してしまったかもしれないのが、 銀行のATMである。 タッチパネルには、 画面上の位置を直接ポイントできるというメリットがある。 ターゲットを目で見て、そこを押せばいい、という単純さが売りなのだ。 初めての人でも違和感なくポイント操作ができる。 それと引き換えに、根本的な大きな欠点を抱えていることも忘れてはいけない。 どのターゲットが操作できるか、 ということを触覚情報としてユーザーにフィードバックできないのだ。

タッチパネルは触った瞬間に既に押したことになってしまう。 押さないと、どこに指が来ているか分からない。 もしかして、それを解決したタッチパネルがあるかもしれないが、 現実的には見た記憶がない。 単純に考えると、単に2段階の圧力センスを行えばいいだけなのだが、 現にないというのは、それほど単純な話ではないのか。 実は、現実のボタンは「押していない」「押した」という2状態ではなく、 それに「触っている」という状態もあわせて3状態を持っているのだ。 この3つ目の状態がないとどれだけ使いにくくなるか、 という反面教師がタッチパネルなのである。

※ カメラのシャッターを軽く押したらピント合わせになり、 深く押したら撮影したことになる、というのと似ている。

そこでマウスの場合。 pcでよくあるような画面+マウスという入力インターフェースは、 移動する操作と押す操作が分離している。 そのため、直接画面を操作できないデメリットがあるが、 これを逆に活用することもできる。 つまり、ターゲットを押す前に、 「ここで押せばターゲットが押されたことになる」 という判断が可能なのだ。 WindowsではメニューバーのUIがそうなっている。 ターゲットが押せるようになった時点で、ボタン状に画面が変化するのである。 ところが、最初からボタンのデザインで表示されているターゲットの場合は、 このような状態変化がない。 ツールチップが実装されている場合はあるが、 あれは少し待たないと表示されないから、 今回のようなシビアなタイミングのフィードバックには意味がない。

というわけで、 「押せる」という状態表示を別に用意することを考えてみる。 具体的には、ハイライト表示にするのがいいのではないかと思う。 個人的には、ボタン枠を光が一周してハイライト表示、 というのがいいかなと思っていますが、難しいか。 この場合、画面遷移はどうなるか。 気の利いた図がなくてすみません。 大雑把な様子は fig の通りである。

---- fig ----

　1. 正常にボタンが押された場合
　　1-a.「押していない」
　　　・ユーザーがターゲット内にマウスを移動
　　1-b.「押せる」
　　　・ユーザーがボタンを押した
　　　・ε経過、またはターゲット内でボタンを離した
　　1-c.「押した」
　　　・少し経過
　　1-a.「押していない」

　2. 押されたが、一瞬の差で外部に出てしまった場合
　　2-a.「押していない」
　　　・ユーザーがターゲット内にマウスを移動
　　2-b.「押せる」
　　　・ユーザーがボタンを押した
　　　・ε経過前に外に出た
　　2-a.「押していない」

---- fig end ----

a、b、cの3つの状態があり得るが、 ボタンが押されなかったら状態cが存在しないから、 ユーザーはボタンを見ているだけで押したかどうか判断できるという仕組みになる。 ただ、「押せる」でただちにフィードバックがないのは気になる。 ここでもたついてしまって、条件(3)にひっかかるのではないか、というのだ。

想像だが、 ユーザーがボタンを押す時は、 「押せる」という画面フィードバックをセンスして操作するのではないかと思うのだ。 もしそうだとしたら、 このアプローチでもあまり違和感とかdelay感がないのではないか、 と思うのだが、 通常のボタン操作なら、 ボタンを押した状態というのはまさに一瞬で完了しているのである。 ボタンを離したタイミングから「押した」表示が始まる、 と考えると異様に感じるかもしれないが、 最初の「押せる」状態のフィードバックで錯覚するために、 実際は通常操作とそんなに変わらないような気もするのだ。 もっとも、これは検証しないと何ともいえない。

§

話が逸れるが、 コントロールパネルのような、 多数のコントロールが画面上にレイアウトされている場合。 これをマウスではなくキーボードで操作すると、 次にどこを操作することになるのか分からない場合がある。 この現象はコントロールパネルに限らない。 例えば、Windows をお使いなら、 デスクトップのアイコンを何かクリックしてみてください。 クリックしたら起動したって?　私の環境だとダブルクリックしないと起動しないのだが…というのは冗談だが(冗談ではないが)、 とりあえず、デスクトップアイコンが選ばれている状態で、 TABキーを押してみてください。 この状態でEnterキーを押すとどうなるか。

もしかすると環境依存かもしれないが、 私の環境だと画面左端の[スタート]ボタンを押したことになる。 これをキーボードフォーカスというはずだが、 Windowsヘルプを見てもいまいち用語がどうなっているのか分からなかった。 それはおいといて、 言いたいのは、TABキーを押すとキーボードフォーカスは移動するのだが、 どこに移動したのか実に分かりにくいのは、 Windowsのデザイン的に仕方ないとしても、 このことから、それ以前の大問題が分かる。、 画面を見ただけではフォーカスが次にどこに移動するのか、 全く分からないのだ。

どうしろというのだ、と言われそうですが、 簡単な話だ。 画面を見ただけで、 次に移動できる候補が判断できるようにして欲しいというのである。 プログラム的には、 アイコンにしろスタートボタンにしろ、 それがキーボードフォーカスを持っているのなら、 TABを押されたら次に何処に行くという情報も持っているはずだから、 そこだけハイライト表示にするとか、 アニメーション表示にするとか、 理屈の上では簡単な話だと思うのだが。 面倒そうだけど。 メカまで工夫するというのなら、 タブキーの上に指を置いた瞬間にハイライト表示になるといいですね。

§

そういえば、関係ないが、 格闘ゲーには「キャンセル技」や「コンボ技」というのがある。 あれはアプリケーションに応用すると面白いと思う。 削除キー連打で全削除とか、ちょっと怖いけど。