モバイルアプリを作る時に直面するいくつかの問題と解決方法
2018.06.19. Tue本題に入る前にモバイルアプリを作る時のゴールデンルールを説明していきたいと思います。
モバイルアプリの場合は、デスクトップアプリと比べて、画面が小さいので、ユーザを混乱させないために出来るだけ簡単な操作で使えるようにすることがとても大切です。UIはできるだけシンプルに保ってください。
また、ユーザにはアプリケーションの操作に関して、最低限の知識しかないと思って進めた方がいいです。ですので、ゼロから新しいUIを作ろうとせず、みんなの慣れている基本的なデザインで作成すること大切です。
まずは、モバイルアプリをデザインする前に iOSとAndroidアプリの説明書を読むことをおすすめします。
では、本題に入りたいと思います。
問題1)
ユーザがアプリをダウンロードしてくれるけど、ユーザー登録せずにすぐにアプリを消してしまう。
解決1)
ユーザは主に、アプリを使い始める前にどういうアプリか見たり、本当に役立ちそうか確認したいものです。
ですので、アプリを利用する前にまずサインアップする必要があると、ユーザは手間に感じて、すぐにアプリを消してしまいます。
最初の画面で登録させるのをやめて、あとでユーザが気に入ったら、好きな時に登録させることができるような工夫が必要です。
または、どうしてもサインアップさせる必要がある場合にも、FacebookやTwitterなどの情報で簡単に登録できるようにすることで解決できると思います。

左にある画面は、Splash Screenの次に表示されます。つまり、ログインせずに、ラジオを聞くことができます。右の画面はハンバーグアイコンをタップしたら表示されるナビゲーションです。その画面の一番下に登録やログインのボタンがあります。つまり、ユーザ登録やログインは必要だと感じたユーザのみできるようにしています。アプリを試すためにサインアップが必須では無いので、UX的に良いです。
問題2)
ユーザがアプリに入る時のローディング画面で待たずにアプリを閉じてしまう。
解決2)
時間かかる処理がある時に(ユーザのデータとサーバーを同期してる時など)ユーザにスプラッシュ画面を見せると、ユーザの体感待ち時間が短くなり、UX的に良くなります。
スプラッシュ画面ではどういった物を使えば良いでしょうか?
アプリに関連するアニメーションやアプリのロゴなどが使えます。
スプラッシュ画面の次に、Onboarding画面という方法もあります。
ユーザにアプリに対しての最初の情報を教えたり、アプリの使い方を伝えるための画面です。
アプリを開いた時に毎回このOnboarding画面を見せるのはUX的に悪いので、表示は初回起動時のみにすると良いでしょう。
また、ユーザがスキップ出来るようなオプションを入れるのも良いかもしれません。以下の例を見てください。

真ん中にある画面はスプラッシュ画面という画面です。アプリの名前、ロゴとキャッチコピーが使われています。右と左で見える画面はOnboarding画面なので、アプリの情報やイントロダクションが書かれています。Credits to https://dribbble.com/shots/2746816-FirstAid-Welcome-Screens/attachments/558070

こちらはOnboarding画面をスキップできるようにボタンが置かれている例です。
問題3)
ユーザがアプリに入ってもアプリに対してアクションしてくれない。
解決3)
To-doアプリや写真をシェアするアプリなど、ユーザーがコンテンツを入力するアプリの場合、ユーザは初めにアプリに入るとEmpty Stateという空画面を見ることになります。すると、ユーザはまず何をすれば良いかわからなくなってしまいます。ですので、ユーザをリードすることが必要です。下記の例のように初めのアクションを促すような工夫をすると良いでしょう。

https://dribbble.com/shots/1738412-Project-empty-state
問題4)
ユーザのネット接続が遅い場合に、画面遷移が遅くなりユーザーに悪い印象を与えてしまう。
解決4)
私たちはユーザーのネットの速度を改善することはできませんが、ネット接続が遅い場合のUXを改善することはできます。ロード時間が遅い場合には Content Placeholder (Skeleton:スケルトン)を使うと良いです。それによって、ユーザはまるで画面が既にロードされているように感じるので、体感待機時間を短くすることができます。

Slackアプリのローデイングスケルトン
結果として
アプリを作る時にユーザを困らせないように、できるだけユーザーフレンドリーなUIを作り、UX的にどうなるかも考えるべきです。上で説明した様々な情報は細かいように見えて、大きな効果をあげることができる重要なポイントになります。