アプリデザインで守るべき25のルール・オレオレチートシート

Oct 11 2016

2016年10月7日(金)にGoogle Developers LaunchPad Build Tokyo 2016の講演「アプリデザインで守るべき25のルール」が今すぐ使え、とても良い内容だったので、自分チートシートにカスタマイズしました。

実は25個でなく、20個に削ってお伝えしてるとスピーカーの方が言ってたと思うのですが、どうやっても19個になってしまい…。
ですが、(自分のド忘れでも)今すぐ役立つ内容だとでした。

※なお、ここで差すアプリは、ゲーム以外、おもにECアプリです。

アプリのナビゲーションと基本動作

1. アプリを理解してもらえる導線をしっかり作って見せる

初めて立ち上げた時に主要機能や新しい機能を最初にわかりやすく見せる。

  • ユーザが期待すること(何ができるか？なぜ便利かなど)にしっかり答える
  • 5分位でアハ体験できないとユーザが去ってしまう可能性大

2. カテゴリはユーザ視点でわかりやすくもれなくダブりなく整理

3. 「戻る」ことができるようにする

  • 適切な場所に戻れる(ステップごとに戻れるようにするなど)
  • 戻ったらフォームが入力が消えるなどしないようにする

4. ロケーションは地図と連動させユーザの時間を節約させる

  • GPSで自動ロケーション取得
  • 近くにお店がない場合は検索機能を追加

5. アプリからWebブラウザに飛ばさずアプリ内で全て完結させる

  • ユーザのストレス・アプリとWebでの見た目の違い・トラッキングなどユーザだけでなく制作側にも良いことがない

アプリ内検索

6. アプリ内のサーチで使いやすさを向上

  • タイトルを出すより検索機能を目立つところに置く
  • スマホユーザは特にホーム画面のグーグル検索に慣れている
  • 位置はAndroidは特にユーザビリティからから上部に置くのはおすすめ
  • 上に検索窓をずっと出す
  • 検索候補・過去履歴の表示も有効

7. スムーズな検索機能を提供

  • スペルミス・入力予測などユーザの打ち間違いを軽減し、効果的な検索インデックスにする。

8. 検索結果は適切な表示を行いユーザの負担を減らす

  • フィルターや並び替え
  • ユーザが探してる情報(例: ECの場合在庫あり・色など)を示す
  • みんなグーグルの検索レイアウトに慣れてるので、それを使うのも一つ

9. ユーザの時間の節約するために履歴を使えるように

  • 過去検索したキーワードなど

支払いまわり

10. 支払いまわりがユーザの負担にならないよう簡単に

  • 支払い方法の選択を簡単に
  • 支払い完了前でも情報の変更を簡単に
  • 例えば、クレカのスキャン機能は便利だけど、説明してもユーザは色々な捉え方をする。
  • ※スキャン(私がこの機能知らなかったので補足)
    http://qiita.com/okmr-d/items/c5c28117b999252e22ca

フォーム

11. いきなり情報登録を要求しない

  • LINEなどブランド力・信頼度の高いサービスはハードルが低いため例外
  • 情報の登録はアプリを使ってもらう機会を失いがちなので、必要な時だけ取る
  • サービス体験後(コンバージョン直前・注文直前)に行うことも考慮
  • 海外で「Sign Up」は最近「Register」に変更になった(「Sign In」との混同を避ける)

12. ストレスのないパスワード認証

  • パスワードは忘れられてしまうので、ソーシャルログイン・スマートロックを使う
  • デバイス間でID同期できる機能って自動入力の補助をする

13. フォームは入力しやすく

  • 郵便番号や電話番号などは入力したら桁区切りしてくれるのが理想
  • カーソルの移動はできるだけ少なく
  • 項目がキーボードを出した際に隠れないように

14. 入力エラーを的確にサポート

  • リアルタイムでバリデーション表示が理想
  • 情報送信後のエラー表示は結構つらい

15. 入力すべき内容に合ったキーボード(数字はテンキーなど)を表示

16. ユーザの入力サポートを

  • カレンダーを立ち上げて日付を入力させやすくする
  • 住所はロケーションの活用や過去に入力したものを

ユーザビリティ

17. アイコンは文字情報(テキストラベル)も加える

  • アイコンは全ての人が同じように解釈しないので
  • 全ての人が同じ解釈をしないので余計な混乱を防ぐ手段(例 : 海外の「レ」は「OK」の意味だが日本では「×」など)

18. 大事なアクション後、アプリ側で応答をする機能の実装を

  • ボタンの色が変わっているだけでは不安になるので、スナックバー(メッセージ)を出すなどし、「データを受け取ったこと」などを表示する

    • 19. カメラなどへのアクセス許可の理由を明確にユーザに示す

    • 何のためにアクセスの許可を求めているのかをまず明快に説明する(本来アプリでできることができなくなってしまう)
    • 必要なタイミングで必要な時に許可を求める
    </div>


    参照させていただいたWebサイトはこちらです。
    より詳しく正確な内容を知りたい方にとても有益な情報が掲載されています。