2018-12-08に更新

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

はじめに

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

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

こう操作して欲しい

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

修正前

修正前

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

使ってもらった結果

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

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

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

わかったこと

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

修正した ver.1

修正した ver.1
左:初期表示
右:吹き出し閉じたあと

主に直したところ

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

使ってもらった結果

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

嫁(使ってみてから)「たぶん大丈夫」

おっしゃー公開しよ〜

公開した

が、

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

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

Twitterでシェアした後

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

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

修正した ver.2

修正した ver.2

赤枠の文章を追加!(超最低限の修正)

ちゃんとやるならUserAgentを判定して、Twitterアプリだったら文章と吹き出しの位置を変えたらよかったな。。

その他

シェアして欲しかったからこんな修正もした

メニューも修正した
左:修正前
右:修正後

  • 「録画した画面をシェアして楽しもう!」と促した
    録画できるんだ、シェアしてみよう、と思った人が若干は増えたと思う(想像)

  • 「画面を録画する方法」のリンクを貼った
    画面を録画する機能を使ったことない人が大多数なので、これつけなかったらシェアしてくれる数結構減ったと思う(想像)

  • 「#通知止まらんw」をつけてツイートしてね!
    は要らなかったかも。画面録画したツイートでつけてくれてる人少なかった。
    (自分で入力するの面倒だし。画面録画をシェアするときはみんなに本当の通知画面だと思わせたいから、いきなりタグつけてタネあかししたくないかも。)

  • 「このサイトをシェア」リンク
    これはつけてよかった。そのままシェアしてくれた人がそこそこいた。

もっと直したかったところ

ホーム画面に追加したアプリを開くと再度吹き出しモーダルが表示されてしまうので、本当は消したかった。

UserAgentと画面サイズから判定して全画面かどうかを判定するのがいいのだろうか?大変そうなので今回は諦めました。

おわりに

以上、UI/UXやってるデザイナーさんから見たら下手な修正かもしれませんが、自分なりに改善した点をまとめてみました。

自分では「みんなわかるっしょ」と思っていても他の人からするとそうではないことがあるってことが改めてよくわかってよかったです(小並感)


オクムラダイキ

Software Engineer / Freelance ← DeNA ← NTTData Fr / [email protected] / React / Rails / 🐱Coco / 🐱Nuts

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

コメント