個人開発、ユーザー操作でUI感覚のずれを突きつけられ、改善点が見えた
「いいプログラムとは、綺麗な見た目でも、快適な速度でも、正しい計算結果でもない。
ただ一点、顧客に喜ばれることだ」
これは私の持論です。社内でも、何度か偉そうに語ったことがあります。
この記事は、その持論で顔から火が出る話です。
SpotMemo は、知り合いだけで飲食店を共有できる、私の個人開発サービスです。
そしてこの話の主役は、サービスではなく、私の妻と、妻の友人です。
ついに、妻が使ってくれた
ずっと、妻に使ってほしいと思っていました。
身近な人のおすすめだけが残る店リスト。
そのコンセプトを、いちばん身近な人に試してほしいのは、当然の願いでした。
ですが妻は、私のサービスの画面を、これまで一度も正面から見てくれたことがありません。
家庭内における普及率は、長らく0%でした。
きっかけは、妻の友人との食事会でした。
出かける妻に、私は SpotMemo の告知を懇願しました。
妻は悲哀と諦めの混ざった「行ってきます」を残して出ていきましたが、
その向こう側で、ちゃんと友人に SpotMemo を紹介してくれていたようです。
ありがたい話です。
しかし、友人が使ってくれることは、ありませんでした。
転機は、その数日後でした。
酔って帰ってきた妻に、ダメ元で「友人とのグループ、作ってみない？」と持ちかけたところ、驚いたことに、承諾してくれたのです。
私は嬉々として、妻のスマホ操作を眺めはじめました。
ついに、いちばん見てほしかった人が、自分の作ったものに触れてくれる。
その瞬間を、私は完全に油断して待っていました。
オレンジが「選択中」だと、伝わらない
妻は、いきなりグループ設定を間違えました。
SpotMemo では、グループを作るときに、評価軸や用途バッジを任意で選べます。
そのグループの色を決める設定です。
妻は、その選択と非選択を取り違えて、ちょうど逆に指定していました。
横で見ていた私の内心は、こうです。
なぜこうなるんだろう……。
選択した方の背景色はオレンジ、選んでいない方は白にしてある。
色がついている方が「選択中」だと、ひと目で分かるはずだ。
私の今までの常識では、考えられない……。
でも、「なぜこれを間違えるの」なんて、妻には聞けない……。
仕方ない、ここはスルーして、後日この間違いを分析して直そう。
妻には、ばれないように……。
ひっそりと……。
口には出さず、私は平静を装って、グループを作り直してもらいました。
今思えば、この瞬間こそ、最初の警告でした。
色で状態を示せば伝わる、という私の確信は、作った本人にしか通じない確信だったのかもしれません。
ですがこのときの私はまだ、妻がたまたま間違えただけだと思っていました。
本当の問題は、このあとの店舗登録で、もっとはっきりした形でやってきます。
「言われた機能は、全部足してやれ」だった私
店舗登録の話に入る前に、なぜ SpotMemo の画面がこんなに盛られているのか、時間を巻き戻させてください。
ひとつ前提があります。以前、熱心に使ってくれていた後輩から、こんな要望をもらっていました。
- 自分で撮った写真も載せたい
- 喫煙できるかどうかを知りたい
- キャッシュレス決済が使えるか知りたい
どれも、もっともな要望です。私は、ひとつずつ、丁寧に叶えていきました。
問題は、その「丁寧さ」でした。
まず、写真です。
SpotMemo は、店名で検索すると外部サービスから店舗情報を引いてきます。
ですが、新しい店や小さな店は、ヒットしないことがあります。
「だったら、自分で写真を登録できるようにしよう」。
私はそう考えて、写真の手動登録機能を足しました。
さらに、「スマホのアルバムから選ぶのは面倒かもしれない」と思い、
クリップボードから画像を貼り付けられるようにもしました。
そして極めつけに、「貼り付けのUIは少し分かりにくいかもしれない」と気を回し、
操作手順を説明する画像まで、画面に添えました。
親切のつもりで、私は階段を一段ずつ、上っていきました。
次に、決済です。
「キャッシュレス決済が使えるか知りたい」という要望に応えようと、私は API の仕様を眺めました。
すると、ひとくちに決済と言っても、クレジットカード、電子マネー、QRコード決済、と細かく分かれています。
ここで引き返せばよかったのですが、私はこう考えました。
「せっかくだ、全部足してやれ」。
チェック項目が、画面に整然と並びました。
喫煙可否も足しました。
これも、言われた通りに。
こうして、後輩の3つの要望は、すべて実装されました。
当時の私のテンションを、正直に再現します。
写真は手動でも登録できる、クリップボードからも貼れる、操作説明もついている。
決済はクレジットもQRも交通系も網羅した。
喫煙可否もある。
よし、これで完璧だ！
見事なフラグでした。
そもそも私の持論は、「いいプログラムとは、顧客が喜ぶことだ」です。
だとすれば、顧客が言った要望は、ひとつ残らず叶えるのが正しいはずでした。
私は持論に忠実なつもりで、言われた機能を全部、画面に足しました。
足せば足すほど、顧客のためになっていると信じて疑いませんでした。
いま振り返ると、持論を一番裏切っていたのは、その持論を盾に画面を盛っていた私でした。
店舗登録で、固まる妻
グループの次は、店舗登録でした。
そして、さきほど私が一段ずつ積み上げた「親切」が、ここで一つずつ、
妻の前に障害物として立ちはだかります。
妻が最初に固まったのは、写真でした。
検索してもヒットしない店だったので、画面はあの手動登録UIを出しました。
クリップボードから貼れます、と操作説明の画像つきで。
ですが妻にとっては、そもそも「ここで何を求められているのか」が分かりません。
親切で足したはずの説明画像が、かえって「読まなければいけない情報」として、
画面の密度を上げていました。
次に、支払い方法と喫煙可否の項目群です。
私が「全部足してやれ」と並べたチェックボックスは、店を一軒登録したいだけの人にとっては、
答える義務があるのかどうかも分からない設問の列でした。
妻の手が、そこで止まります。
そして、決定的だったのが、まだ行ったことのない店を登録するための
「行ってみたい」という選択肢です。
これは SpotMemo の中でも義理の姉から家族チャットで依頼された機能で、
妻も存在だけは知っていたので使ってくれるつもりだったのでしょうが、
足しに足した情報量の中に、すっかり埋もれていました。
妻は、それを見つけられませんでした。
さらに、匿名で投稿できる匿名投稿のパネルもありました。
気を利かせて目立たせたつもりが、これも一つ、画面の中の「考えること」を増やしていました。
私が手解きをして、なんとか数件を登録しました。
妻が、一つの店を登録するだけで四苦八苦するのを、
私は胸が締め付けられるような気持ちで見ていました。
友人のLINE「○○が検索できない」
登録した店を、妻が友人に共有しました。
すると友人から、すぐに LINE が来ました。
「○○っていうお店が、検索できない」
その一文で、私は別の問題に気づきました。今度は、メニューの文言です。
SpotMemo には、当時「さがす」と「登録」という2つのメニューがありました。
- さがす … すでに登録されている店の中から探す
- 登録 … ネットから店を探して、新しく登録する
私の中では、明確に別の機能でした。
ですが友人は、「店を登録するには、まず店を探すはずだ」と感じたのだと思います。
だから「さがす」を開き、そこで目当ての店を探して、当然、見つかりませんでした。
登録したい店は、まだどこにも登録されていないのですから。
なぜこんな分かりにくい命名にしたのか、私はすぐに思い出しました。
以前、登録済みの店を見る画面は、「一覧」と「地図」の2つのメニューに分かれていました。
これを一つに統合するとき、私は「店を探すための画面なんだから、さがす、でいいだろう」と名付けたのです。
あのときの私の意識は、2つを1つにまとめることだけに向いていました。
同じように、店を「登録」するときにも、人はまず頭の中で店を「探す」のだ——
その当たり前に、まったく考えが及んでいませんでした。
友人の LINE で、私は瞬間的に、全部を理解しました。
もう、顔から出た火は止まる気配がありませんでした。
使えていた人たちは、それが得意だっただけだった
ここで、すべてが繋がります。
これまで店を登録してくれていた人たちは、みんなスイスイ登録していました。
だから私は、画面が盛られすぎていることにも、メニューの文言が紛らわしいことにも、
気づきませんでした。
私の会社はIT企業です。
義理の姉も、IT企業にいたことがあります。
SpotMemo をスイスイ使えていたのは、たまたま全員、ITに強い人たちでした。
そして、紹介したのに使われなかった妻の友人も、四苦八苦した妻も、
ITとは関係のないところで暮らしています。
ITに強い人たちは、あの情報過多の密林を、かき分けて進んでくれていただけでした。
それが得意だっただけでした。
なのに私は、ずっとこう考えていました。
「このサービスは、特に興味を持ってくれる人さえいれば回るものなんだ」。
そして、その熱心に使ってくれる人のことを、私はいつからか
「チャンピオン」と呼ぶことにしていました。
チャンピオンが一人いれば、そのグループは回る。
だから、あとは興味を持ってくれる人を探せばいいのだ、と。
でも違いました。
チャンピオンたちは、ただ興味があっただけではありません。
生い茂る情報の密林を、苦もなくかき分けて進める。
いわば野生のチャンピオンだったのです。
彼らを支えていたのは、興味よりも前に、あの密林を踏破できてしまう力のほうでした。
その頼もしい背中に、私はずっと甘えてたことに気づきました。
そして、冒頭の持論をもう一度思い出してください。
「いいプログラムとは、顧客が喜ばれるプログラムのことだ」。
僕は馬鹿なのでしょうか。。。
羞恥心でいたたまれません。。。
引き算には、基準が要る
ここからは、直した話を書きます。
ただ、直す作業そのものより、何を基準に直したかのほうが、たぶん役に立ちます。
機能を足すのは、一瞬です。
ですが、その機能がノイズかどうかは、足した本人には分かりません。
分かるのは、ITに強くない人が、初めてその画面を触ったときだけです。
私はそれを、妻と友人に教わるまで、知りませんでした。
具体的には、こう変えました。
-
写真の手動登録や、支払い方法、喫煙可否といった付加的な項目は、
パネルの中に畳みました。必要な人が、自分で開いたときだけ現れます。
初期表示には、店を登録するために本当に要る最小限だけを残しました。 -
情報を減らしたら、あの埋もれていた「行ってみたい」が、ようやく
見つけやすい場所に浮かび上がりました。新しく作った機能ではありません。
ノイズを除いただけで、もとからあったものが、見えるようになったのです。 -
匿名投稿は、目立つパネルをやめ、登録ボタンの下に、
控えめなチェックボックスとして置き直しました。 -
メニューの文言は、「さがす」を「お店一覧」に、「登録」を「お店を登録」に
変えました。動作ではなく、その先にあるものの名前にした、程度の変更です。
これで少しは分かりやすくなったかもしれません。
確信は、まだありませんが。
親切は、消さなくていい。
ただ、初期表示から隠すだけでいい。
引き算とは、機能を捨てることではなく、最初に見せるものを選ぶことだった。
個人開発者として持ち帰れたのは、たぶん、この一点です。
それでも、直せていないこと
正直に書いておきます。ひとつ、まだ直せていません。
冒頭の、グループ作成の、あの選択と非選択の取り違えです。
原因が、いまだに分かりません。
オレンジが選択中、白が非選択。
これで伝わらない理由を、私はまだ説明できずにいます。
色で状態を示すという発想そのものが間違っているのか、
オレンジと白のコントラストが足りないのか、ラベルの問題なのか。
仮説はいくつかありますが、確かめる方法が、一つ足りていません。
当の妻に、「なぜ逆に押したの」とは、やっぱり聞けないままなのです。
だから、直せていません。
これから
親切のつもりで足した機能が、全部ノイズでした。
UIは直しました。
ですが、妻の友人がその後 SpotMemo を開いた形跡は、まだありません。
一度かき分けるのをやめた人を、もう一度あの密林に呼び戻すのは、
たぶん、新しい人に来てもらうより、ずっと難しいのだと思います。
第一印象は、修正リリースでは巻き戻せません。
野生のチャンピオンたちは、何も言わず、密林をかき分けて進んでくれています。
その頼もしい背中に、私は甘えているとも気づかずに甘えていました。
これからは、彼らが涼しい顔で踏み越えていく場所にこそ、
本当の段差が隠れているのだと思って、画面を見直すことにします。
グループ作成の、あの取り違え。
まだ直せていません。
妻には、今も、聞けていません。
SpotMemo は、お試しグループで中身を確認できます（ログイン不要）。
👉 （お試しグループ）
「身近な人のおすすめだけが残る店リスト」。
密林は、できるだけ切り開いておきました。たぶん、奥にはまだ茂みが残っていますが。
Discussion