スマホでタップ数を減らすUI考えたら、「ありがた迷惑！使いづらい」とボロクソに叩かれた件

「どうしたら余計なタップを減らし、さくさく気持ちよく先へ進んでもらえるか」スマホ担当は日々そう考え、UIを設計していると思う。私も例にもれず、余計なタップをせず、どんどん先へ進んでもらえるようなUIを考えている。

しかし、タップ数を減らす遷移を考えところ「超使いづらい！」「ありがた迷惑だ！死ね！」とテスト対象者からボロクソに叩かれた。すっげーマジメに考えた私の精神力はもはや0。切ない。減らせばいいってもんでもないんだなと身をもって痛感した。こんな失敗をする人が少しでもへるように、ブログに書いておこうと思った。

突破率上げるために、タップ数へらせばいんじゃね？

PCサイトでは、テンポよく次にいかせるためにずらーっとボタンをたくさんならべて、そのボタンを選ばせて次画面遷移するUIをよくみかける。例えば、カレンダーとか。こういう質の画面を、PCと同じ考えで実装するUIをつくってみた。
※あくまで画像はダミーです。こういう質のものをつくったのだよ、という例示の旨ご注意ください。

こんな画面。ずらずらーとならんで一覧性はあり、各セルのリンクで次に遷移なので、一見遷移はわかりやすい。しかし、正しくおしづらい。激しく押しづらい。正しく押せる気がまったくしない。

PCでは、マウスでポインタが精度高くさせるので、ボタンの間のマージンが1-2pxでも大丈夫なのだった。しかし、スマホでは指でタップするため、マウスポインタほど正しくおせない。UI考えると超つらかった。しかも、タップした瞬間、タップしたエリアが指で隠れるから、正しいとこおせたかわからんし。

っていうか、私、iphoneのこの画面でローマ字うつことすらままならないんだよな・・・と思ってボタンサイズ計ってみた。幅320pxと仮定した場合、28px×41px、マージンが左右に5pxずつ。このサイズですらつらいのだから、これより小さいボタンなんて相当おしづらいだろう。

色々さわってみたけど、iphoneのカレンダーボタン（45px×43px）が、マージンなしでおせる限界だと思った。しかし、タップするとボタンが隠れる。もしこれをおしたら次画面に遷移、だと正しいところをおせてるかどうか不安だ。しかも、ブラウザでの次画面遷移だと読み込み時間がかかってさらに戻らなきゃいけないので、すっげーイラっとする。

まとめると。
1：ユーザーはボタンをおしたとき、正しいところをおしたかどうかの確証を得られない
2：しかも間違ったところを押したら次画面遷移する

3：ユーザーはまたもどって、1をやる
1ステップで遷移させるはずが、下手すると2→3→2→3･･･というように複数ステップになるではないか。これは相当ユーザーをイラっとさせることまちがいなし。「ありがた迷惑！使いづらい」とボロクソに叩かれて然るべきだと思う。

ではどうすりゃいいのか

・appleはボタンサイズ最小44pxといっているが、使いやすさ考えるとこの最小44pxルール守ったほうがベターだと思う。さらにマージンが必要（上下左右5px以上は必須かも。）

・しかし、44px以上にできない場合もある。ブラウザで見るサイト中でカレンダー的画面をつくるなら、左右マージンが発生するので、実質横幅320pxなら300px程度しか使えないし。（曜日を並べる場合、横に7ボタン入る→マージンなしでも42.8px）。そういう場合、タップしたら直接次画面遷移、にはしない。

ラジオボタンやプルダウンにして、正しいところを選択ことを確認した上で「次にいかせる」という二段階をあえて踏ませたほうが親切なのかもしれない。

——————

もちろん、1ステップでテンポよくいけるのが理想だが、ときにはステップ数がふえたほうが使いやすいときもあるよなーと思った。本気で実装進めてたらたぶん相当数のユーザーをブチ切れさせてたと思う。あなおそろしや。
結論：事前ユーザーテストは大切。ユーザーテストでボロクソに叩かれて死にたくなっても、本番で実装してユーザーブチ切れさせるよりはずっとまし。