2018-12-08に更新

アプリの使い方をわかりやすくしようと頑張った話

はじめに

クソアプリ2 Advent Calendar 2018で「通知止まらんw」というWebアプリを作ったのですが、最初出来上がった時にうちの奥さんに見せたら「使い方がわからない」と言われたので、操作方法の説明をもう少しわかりやすくしようと思って自分なりに直してみたって話を書きます。

作ったアプリはメディアに取り上げてもらったりちょっとだけ話題になることができたのですが、
これをやってなかったらもしかしたらあまり使ってもらえなかったかもな、と今になって思ったので、大したことない内容ですが修正前後を比較して紹介します。

こう操作して欲しい

① 全画面表示するためにWebアプリをホーム画面に追加してから開き直して欲しいので、Safariのメニューから「ホーム画面に追加」して！
② メニューを開くボタンを「ロックアイコン」にしたのでそこを押して！
③ メニューからモードを選んで、ツイートを入力したら始まるよ！

修正前

これ読めばわかるっしょ！

使ってもらった結果

嫁「使い方①がわからない。どうやってホーム画面に追加するの？」
僕「下のここ（四角形から上向き矢印がつき出てるアイコンを指差しながら）がSafariのメニューだよ」
嫁「ああ、やっぱりこれね」「・・・・・で？」
僕「『ホーム画面に追加』ってのがあるから探して押して」
嫁「あ、『ホーム画面に追加』あった。」「できた。Webサイトもアプリになるんだね。」

文章だけではわかりにくかったようだ！

②③はすんなりいったので大丈夫そう。

わかったこと

『Safariのメニュー』って言われても下のアイコン（四角形から上向き矢印がつき出てるやつ）で正しいのか分からない。（開いても右にスクロールしないと「ホーム画面に追加」は表示されないし）
『「ホーム画面に追加」してね』って言われてもどうやって？（そもそもホームに追加できるんだ！）って思うようだ。

修正した ver.1

左：初期表示
右：吹き出し閉じたあと

主に直したところ

説明読んで欲しいのでモーダルにした。
Safariのメニューの場所を吹き出しの形で指し示した。
押して欲しいアイコンを画像付きで表示した。
『「ホーム画面に追加」して』という表現を『（アイコン画像）を押して「ホーム画面に追加」して』と具体的にやって欲しい操作を書くようにした。
①の説明が難しいので②の説明を取った。
モーダル閉じたあとに②がわかるよう「←メニュー」って書いた

使ってもらった結果

嫁「2回目だからわかるわ」
僕「初めての気持ちで」

嫁（使ってみてから）「たぶん大丈夫」

おっしゃー公開しよ〜

公開した

が、

Twitterアプリのこと考えてなかった

Twitterでシェアした後にツイートのリンクを開いたらこんな画面だった

吹き出しの位置がアイコンとずれてるし、Twitterアプリからじゃ 「ホーム画面に追加」が出ない！

もう公開してシェアしちゃったし、簡単な修正で済ませたい！

「録画した画面をシェアして楽しもう！」と促した
録画できるんだ、シェアしてみよう、と思った人が若干は増えたと思う（想像）
「画面を録画する方法」のリンクを貼った
画面を録画する機能を使ったことない人が大多数なので、これつけなかったらシェアしてくれる数結構減ったと思う（想像）
「#通知止まらんw」をつけてツイートしてね！
は要らなかったかも。画面録画したツイートでつけてくれてる人少なかった。
（自分で入力するの面倒だし。画面録画をシェアするときはみんなに本当の通知画面だと思わせたいから、いきなりタグつけてタネあかししたくないかも。）
「このサイトをシェア」リンク
これはつけてよかった。そのままシェアしてくれた人がそこそこいた。