テンキーを捨てようとしたら、フリック入力を再発明していた
0〜10,000円の金額入力を速くするために26方式を試作した。探索、スライダー、ストロークを経て最後に戻ってきたのはフリック入力だった。数字入力を13.3 bitの情報伝達として考え、その先の入力方式まで考える。
家計簿を作っていると、地味に何度も出てくる操作がある。
金額入力である。
テンキーを開いて、「1」「2」「8」「3」と押して、確定する。
別に難しくはない。ただ、何十回も入力する画面を作っていると、だんだん疑いたくなる。
そもそも数字って、10個のボタンを毎回押す必要があるのか？
そこで、0〜10,000円の入力だけを題材にして、テンキー、探索、スライダー、ダイヤル、ストローク、フリックなどを片っ端から実装した。
作ったのが Amount Input Lab である。
現在26方式ある。
最初の目的は単純で、テンキーより速い入力UIを作ることだった。
ところが、いろいろな方式を作って、操作回数を減らし、指の移動を減らし、1回の操作に情報を詰め込もうとしていくと、最後にかなり見覚えのある形へ戻ってきた。
フリック入力である。
フリックを使おうと思って作ったわけではない。
数字入力を一から考えた結果、フリック入力を再発明してしまった。
この過程が面白かったので、この記事では26方式のカタログではなく、**「なぜフリックはこんなに強い入力方式なのか」**という方向から振り返ってみる。
金額入力は「13.3 bitを指から入れる問題」だった
0〜10,000円には、0円を含めて10,001通りの状態がある。
これを情報量として見ると、
log2(10001) ≒ 13.29 bit
になる。
つまり極端に言えば、金額入力とは 約13.3 bitの情報を人間の指からスマートフォンへ渡す問題 と考えることができる。
この見方をすると、最初は「選択回数を減らせば速くなる」と考えたくなる。
たとえば範囲を探索すると、
- 二分探索なら最大およそ14回
- 三分探索なら最大およそ9回
- 5択で範囲を絞るなら最大およそ6回
程度で1つの値まで絞り込める。
そこで実際に5分探索や二分探索も作った。
しかし触ると、当然ながら問題がある。
人間は二分探索器ではなかった。
毎回「目標はこの候補より上か下か」「5個のうちどこが近いか」と考える必要がある。
クリック数は減っても、1クリックの前に判断が発生する。
一方テンキーは、4桁程度の数字なら4回ほど押す必要があるものの、慣れていればほとんど考えずに入力できる。
ここで、単純な操作回数の競争ではなくなった。
重要なのは、
- 1操作でどれだけ情報を入力できるか
- 次に何をするか考える時間
- 指を次のターゲットまで動かす距離
- ターゲットの狙いやすさ
- 動作を身体で覚えられるか
といった、人間側のコストだった。
情報量を圧縮するだけでは速くならない。
このあたりから、実験が少し面白くなった。
まず「1タップ = 1数字」を壊す
サイトには大きく分けて、こんな方式を入れている。
| 系統 | 例 | 発想 |
|---|---|---|
| 普通 | Numpad、Stepper | 既存のUIをそのまま使う |
| 探索 | Binary、5-way search | 候補範囲を段階的に絞る |
| 連続操作 | Slider、Scrubber、Dial | 指を動かして値を変える |
| ジェスチャー | PairSlide、Stroke Ring、Fan Flick | 方向や距離も入力に使う |
最初に壊したかったのは、テンキーの
1回押したら1文字入力される
という前提だった。
PairSlide：2つの数字を1ストロークにする
PairSlide では、数字Aを押してから指を離さず数字Bまで滑らせると、AB の2桁として入力する。
たとえば4から8まで滑らせれば「48」になる。
やっていることは単純だが、発想としてはかなり重要だった。
タッチパネルでは「押した場所」だけでなく、押してから離すまでの移動そのものも情報として利用できる。
普通のテンキーは、せっかく2次元の連続座標が取れる画面を、10個の独立したボタンに分割して使っている。
だったら、座標の間も使ってしまえばいい。
「どこを押したか」から「どう動いたか」へ
次に作ったのが Stroke Ring だった。
0〜9を円周に並べ、指を離さず数字をなぞる。
ここでは入力情報が、点ではなく軌跡になる。
タップなら主に「位置」が情報だが、ストロークなら、
- 開始位置
- 移動方向
- 距離
- 通過した位置
- 終了位置
を使える。
つまり、入力の自由度が一気に増える。
このあたりまで来ると、「ボタンを何個並べるか」ではなく、指の運動をどう符号化するかを考えるようになった。
そして、この方向でさらに単純化していった結果、見覚えのあるものができた。
そして、フリック入力を再発明した
Fan Flick 5×2 では、指の開始地点を中央の START に固定した。
そこから5方向へフリックする。
さらに、近いところで止めるか、遠くまで伸ばすかを分ける。
つまり、
5方向 × 2距離 = 10通り
である。
これなら0〜9を全部割り当てられる。
作ってから思った。
これ、ほぼフリック入力では？
かな入力では、1つのキーを起点にして、タップや上下左右の方向へ意味を割り当てる。
こちらは数字なので構造は少し違うが、やっていることの本質は似ている。
1つの大きな起点から、指の方向によって複数の入力を取り出す。
別の問題を解こうとして、かな入力で既に使われている設計へ戻ってきた。
これは個人的に、この実験で一番面白かったところだった。
フリック入力は「情報量が多い」から強いわけではない
1回の操作で10種類から1つを選ぶなら、情報量は約 log2(10) ≒ 3.32 bit である。
これは普通の0〜9のテンキーで数字を1つ選ぶ場合と同じだ。
つまり、今回の数値フリックは、理論上1操作あたりの情報量が突然増えたわけではない。
それでもフリックが面白いのは、入力のために指を別の場所へ運ばなくてよいところにある。
テンキーなら、1を押したあと8を押すには別の座標まで指を動かす。
Fan Flickでは毎回ほぼ同じSTARTから始められる。
変わるのは「次にどこを押すか」ではなく「どちらへ動かすか」になる。
さらに慣れてくれば、画面上の数字を1つずつ目で追うのではなく、方向を運動として覚えられる可能性がある。
ここが、フリック入力のかなり強いところだと思う。
画面上の選択肢を探す操作を、身体で覚えられるジェスチャーへ変換している。
フリックを再発明してしまった、という事実そのものが、この構造の強さを示しているようで面白い。
では、フリックの先には何があるのか
せっかく一周してフリックへ戻ってきたので、ここから先も考えたい。
スマートフォンが取れる情報は「方向」だけではない。
1. 方向 × 距離
今回の Fan Flick 5×2 がそのままこれに当たる。
5方向だけなら5種類だが、短いフリックと長いフリックを区別すれば10種類になる。
距離を3段階にできれば15種類にもできるが、当然ながら誤操作とのトレードオフになる。
重要なのは、ボタンを増やさずに入力語彙を増やせることだ。
2. 方向 × ストローク列
1本のフリックで終わらず、右→上、左→下のような短いストローク列を1つの記号として扱うこともできる。
ジェスチャー版のショートコードのようなものだ。
ただし長くしすぎればテンキーより遅くなるので、頻出する入力だけ短い軌跡へ割り当てるほうがよさそうである。
3. 最初のジェスチャーで「桁」ではなく「金額帯」を決める
金額入力に限れば、0〜10,000円が均等に出現するとは限らない。
そこで、最初の方向で
- 数百円
- 1,000円前後
- 数千円
- 高額
のようなレンジを選び、その次のジェスチャーで細かく指定する方式も考えられる。
つまり10進数をそのまま入力するのではなく、用途に合った符号体系を作る。
4. ユーザーごとに入力空間を変える
家計簿なら、その人がよく入力する金額には偏りがあるはずだ。
もし履歴から頻出金額帯が分かるなら、短くて簡単なジェスチャーを頻出領域に割り当て、珍しい金額を遠い領域へ追いやることもできる。
固定テンキーではなく、
ユーザーの分布に合わせて入力空間そのものを最適化するUI
という方向である。
これはまだアイデア段階だが、試してみたい。
で、結局テンキーより速いのか
ここはまだ断言しない。
Amount Input Labでは方式ごとに、
- 入力時間
- 操作回数
- 正解した場合のベストタイム
を記録できる。
ただ、本当に比較するなら単発のベストタイムだけでは足りない。
少なくとも、
- 初見での速度
- 十分に練習したあとの速度
- 誤入力率
- 学習曲線
- 片手 / 両手
- 端末サイズ
- 入力する金額の分布
あたりを揃えて測る必要がある。
特にフリックやストロークは、学習前と学習後で結果が大きく変わる可能性がある。
今の段階では「この方式が最速」という研究結果ではなく、数字入力を考えるための実験場として公開している。
まとめ：テンキーを疑ったら、フリックの凄さが分かった
最初は、家計簿の数字入力を少し楽にしたかっただけだった。
そこで操作回数を減らそうとして探索を作り、指の移動を減らそうとしてスライダーを作り、1回の操作に情報を詰めようとしてPairSlideやStroke Ringを作った。
そして、
- 起点を固定する
- 指の方向を情報として使う
- 距離にも意味を持たせる
- 動作そのものを覚えられるようにする
と詰めていった結果、フリック入力に戻ってきた。
フリック入力を使おうとして作ったのではなく、入力方式を一から考えた結果としてフリックを再発明してしまった。
それくらい、フリックという入力方式の設計は強い。
ただし、タッチパネルにはまだ方向以外にも距離、軌跡、時間、複数指といった自由度が残っている。
テンキーが数字入力の完成形なのか、それとも単に長く使われてきた標準形なのか。
その辺をもう少し遊んでみたい。
実際に触ると、各方式の良し悪しがかなり分かりやすい。
ソースコードはこちら。