ボタンを全部なくす — スワイプUIへの大転換

ナイターラウンドの惨敗から数日。ノートに書き出した課題を眺めていた。文字が小さい、ボタンが押しにくい、操作がめんどくさい。

最初に考えたのは、ボタンを大きくすること。フォントサイズを16pxから20pxに上げて、タップ領域を広げて…。でもボタンを大きくすると画面に収まる選択肢が減る。スクロールが増える。根本的な解決にならない気がした。

マッチングアプリの「あの操作」

ふと、ある操作を思い出した。20代から40代の男性なら、きっと一度は使ったことがあるであろう、マッチングアプリの「あの操作」だ。カードを右に弾けばいいね、左に弾けばスキップ。Yes/Noの二択を、画面全体を使って答えさせるあのUI。ボタンなんか押さなくても、指一本で直感的に操作できる。

「ゴルフのミスもYes/Noに分解できないか？」

従来は「ミスの種類を選んでください」と一覧を出していた。ダフり、トップ、シャンク、スライス、フック…。これを「ダフった？」「トップした？」「曲がった？」という一連のYes/No質問に分解する。

Yes/Noなら、カードを右か左にスワイプするだけ。画面全体がタップ領域になる。暗い中でも、揺れるカートの中でも、迷わず操作できる。

思いついたその夜、興奮してプロトタイプを作り始めた。カードにゴルフの質問を表示し、右に弾けばYes、左に弾けばNo。回答するとカードが飛んでいき、次のカードが出てくる。

最初のバージョンは見た目がひどかったけど、触ってみた瞬間「これだ」と思った。ナイターの時のストレスが、全部消える気がした。

ボタンを大きくするんじゃない。ボタンを全部なくすのが答えだった。

スワイプUIにしたことで、もうひとつ大きく変えたことがある。画面に表示するテキストだ。

旧UIでは「ティーショット：ナイス？」のようなラベル表記だった。これをYes/Noのスワイプで答えさせると、ユーザーは「えっと、ナイスだったから…右？」と一瞬考えてしまう。選択肢を「選ばせる」形式だと、どうしても頭の中で変換作業が入る。

でも「ナイスショットでしたか？」と疑問文で聞けば、「はい」か「いいえ」で直感的に答えられる。考えるんじゃなくて、反射的に答えられる。この差は、カートの中で揺られながら入力する場面では決定的に大きい。

全ての質問を「ティーショットはドライバーで打ちましたか？」「ボールは曲がりましたか？」「スライスしましたか？」のような自然な疑問文に書き直した。文字数は増えるけど、フォントも大きくしたので読みやすい。何より「はい」「いいえ」で即答できるのが気持ちいい。

ここは地味だけど、個人的にめちゃくちゃこだわったポイント。

たとえば「スライスしましたか？」という質問。スライスはボールが右に曲がるミスだ。で、Yesのスワイプ方向は右。ボールが右に曲がったミスに「はい」と答えるときに、指も右に動く。これが自然に感じる。

もし逆に、スライスの「はい」が左側のボタンだったらどうか。右に曲がったミスなのに、左を押す。ほんの一瞬だけど「ん？」と違和感が生まれる。その一瞬の迷いが、18ホール分積み重なるとストレスになる。

こういう「意味と操作方向の一致」は、意識しないと気づかないレベルの話だ。でも、意識しないレベルだからこそ、合っていると自然に感じるし、ズレていると無意識にイラッとする。

ユーザーが「考えずに答えられる」こと。それがスワイプUIの本当の価値だと気づいた。速さじゃなくて、脳の負荷がゼロに近づくこと。

全部をYes/Noにできるわけじゃない。クラブ選択は14本の中から選ぶし、ホールタイプは3択だ。これらはスワイプでは対応できない。

3択以上の場面だけ、大きなグリッドボタンを使うことにした。ボタン1つが旧UIの2倍以上のサイズ。Yes/Noはスワイプ、複数択はグリッドボタン。このハイブリッドが、新しいワンダフの操作方式になった。

旧UIと新UIで、操作回数を比較してみた。

ドライバーでナイスショットの場合。旧UIは6タップ。新UIは2スワイプ。3分の1になった。

ミスがあっても最大6スワイプ。1ホール全体でも平均15〜20操作で完了する。カート移動中の1〜2分で十分に入力できる量だ。

あのナイターラウンドで「使えん」と思ったアプリが、まったく別のアプリに生まれ変わった気がした。

あの夜、自分のアプリが使えないと思った経験がなければ、ボタンを大きくする程度の修正で済ませていたかもしれない。「スワイプでYes/No」なんて発想は出てこなかったかもしれない。

実際に使ってみないとわからないことがある。開発者として、それを痛感した出来事だった。

…ただ、この新しいスワイプUI、iPhoneのSafariで動かないという新たな地獄が待っていた。次の記事で書く。