ユーザー中心設計を取り入れたアプリの開発

Transcript

1. ユーザー中心設計を取り入れた アプリの開発ディレクション ナイル株式会社 坂本 圭佑

2. 社名の由来 「Near Your Life」という言葉の頭文字と最後の文字 人々のそばに当たり前にあるようなサービスを作り続ける会社にしていきたい。 ロゴの意味 古来より人々の「そばにあった」ものである「自然」、とくに人々の生活を彩ってきた「花」を メインイメージに、上下を違う青色で色分けすることで「空」と「海」もモチーフとしています。 「空」と「海」はボーダレスに広がるものとしての無境界性も表現しており、ナイルが「グローバルな 世界企業になる」という宣言を表しています。

3. 坂本 圭佑 ▪ディレクター ・Appliv アプリ版の開発ディレクションを担当 ▪主な業務内容 ①ユーザー調査、分析、評価 　・ユーザーテスト、アクセス解析 etc. ②ディレクション

   　・要件定義、進捗管理、品質管理 etc.

4. Appliv アプリ版 サービスコンセプト アプリのおすすめコメントを主役とした ユーザー参加型のアプリレコメンドサービス

5. 今日はユーザー中心設計というものを取り入れつつ、 どのようにアプリの制作ディレクションを 回しているかをお話しします。 サービス立ち上げのときの話を知りたい方は、こちらの記事を読んでみてください。 プロトタイプから100％を目指す～3カ月で100万DL突破の『Appliv』に学ぶ、効率的なUIデザインの3ステップ http://engineer.typemag.jp/article/appliv-ui

6. ユーザー中心設計とは ユーザー中心設計（UCD:User Centered Design） 別名：人間中心設計（ HCD:Human Centered Design）とも呼ばれる。 ユーザー中心設計とは設計思想です。 ユーザー中心設計を実施する上で、

   人や会社によって具体的に使用するプロセスは様々です。 ただし、骨格となるパターンがあります。 参考：ユーザビリティエンジニアリング第 2版 p18

7. ユーザー中心設計のプロセス 人間中心設計プロセスの計画 利用状況の把握と明示 ユーザーの要求事項の明示 ユーザーの要求を満たす 解決策の作成 要求に対する設計の評価 システムがユーザーの 要求事項を満足する 参考：ユーザビリティエンジニアリング第

   2版 p22 「人間中心設計活動の相互依存性の図」

8. ユーザー調査 →アクセス解析 →ユーザーテスト（観察&インタビュー） ・ユーザーシナリオ&ニーズの検証 ・ユーザビリティの検証 　→重要度と頻度で評価 デザイン案の作成 デザイン案の ユーザビリティの検証 →簡易ユーザーテスト

   ニーズに沿った施策を ユーザビリティを担保した 状態でリリース ①責任者会議で方針決定 ②全体会議で施策決定 ディレクターが主導 （ユーザーテストデイ） Appliv アプリ版開発フロー シニアデザイナーによる デザインチェック プロデューサー チェック Zenhubによるタ スク管理

9. ユーザー調査 ①ユーザーの利用状況についてインタビューする ②状況とタスクを設定し実際にサービスを使ってもらい、思考を口に出してもらう。 ③タスクがひと段落したら、行動と心理について質問する。 【準備編】ユーザーテストで課題を発見するための基本的な考え方と 5つの準備プロセス http://uideal.net/basic/588

10. ユーザー調査 →アクセス解析 →ユーザーテスト（観察&インタビュー） ・ユーザーシナリオ&ニーズの検証 ・ユーザビリティの検証 　→重要度と頻度で評価 デザイン案の作成 デザイン案の ユーザビリティの検証 →簡易ユーザーテスト

    ニーズに沿った施策を ユーザビリティを担保した 状態でリリース ①責任者会議で方針決定 ②全体会議で施策決定 ディレクターが主導 （ユーザーテストデイ） Appliv アプリ版開発フロー シニアデザイナーによる デザインチェック プロデューサー チェック Zenhubによるタ スク管理

11. ユーザーシナリオ&ニーズの検証 ターゲット ユーザー 状況と行動 発話 ニーズ 解決策 暇つぶしでアプリを 探すユーザー 電車の中で、Applivの

    ゲームチャンネルからア プリを探すとき 「出先ではアプリを見るだけ、ダウンロード しない」 「アプリをダウンロードしていて、通信制限 に引っかかったことがあるので、アプリを見 つけてもすぐにダウンロードしたくない」 欲しいアプリを記録してお き、WIFIがある環境で、後 からダウンロードしたい あとでリスト機能をつけ てはどうか？ ※注意： ユーザーに解決策を聞くのではなく、開発チームが解決策を考える

12. ユーザーシナリオ&ニーズの検証 参考：2時間で作るカスタマージャーニーマップ ――実例とともに考える新しい「おもてなし」のカタチ http://web-tan.forum.impressrd.jp/e/2013/11/27/16409

13. デザイン案の作成 ①ユーザーシナリオ（ToBe）を考える ②ユーザーシナリオ（ToBe）に沿ってデザイン案を作成 　・点ではなく線で考える 　　ページ単体で見るとユーザーの行動や心理状態といった文脈に、 　　そぐわないUIやコンテンツになってしまう。 ※①②を並行して実践することが多い

14. ユーザー調査 →アクセス解析 →ユーザーテスト（観察&インタビュー） ・ユーザーシナリオ&ニーズの検証 ・ユーザビリティの検証 　→重要度と頻度で評価 デザイン案の作成 デザイン案の ユーザビリティの検証 →簡易ユーザーテスト

    ニーズに沿った施策を ユーザビリティを担保した 状態でリリース ①責任者会議で方針決定 ②全体会議で施策決定 ディレクターが主導 （ユーザーテストデイ） Appliv アプリ版開発フロー シニアデザイナーによる デザインチェック プロデューサー チェック Zenhubによるタ スク管理

15. ユーザビリティの検証 ユーザビリティとは 特定のコンテキストにおいて、特定のユーザによって、ある製品が、 特定の目標を達成するために用いられる際の、 効果、効率、ユーザの満足度の度合い ※国際規格ISO9241による定義 引用：ユーザビリティエンジニアリング 第2版 p4

16. 満足度 効率 効果 効果：ユーザが目標を達成できるかどうか 効率：なるべく最短経路で目標を達成できるかどうか 満足度：ユーザーに不愉快な思いをさせていないかどうか 重要度：高 重要度：低

17. ユーザビリティを重要度と頻度で評価 対応 判断 重要度 頻度 問題点 画面 行動 発話 ◯

    高 鈴木さん 佐藤さん 田中さん すすめるボタンの機能 を、FBやtwitterでAppliv アプリ自体をシェアする 機能と間違って認識 フィード ヘッダーのすすめるボタンを押 した 「あ、ApplivをFBとかですすめ ることができるんですね」 ◯ 高 鈴木さん 田中さん フィードをスワイプする と、チャンネルが切り替 えられることに気がつか ない フィード カテゴリチャンネルを移動する 際に、チャンネルをタッチしてい く こちらの質問に対し、 「気づかなかった」 ◯ 中 鈴木さん 佐藤さん FB会員登録時に勝手に FBに投稿されるかもし れないという不安がある 新規会員 登録画面 新規会員登録 「安心できるアプリなら連携す るけど、勝手に行動が公開さ れないか不安です」

18. Zenhubにおけるタスク管理 カラムを追加することができ、タスクの状態を管理できる Zenhub https://www.zenhub.io/

19. Zenhubにおけるタスク管理 Zenhub の issue に ・目的 ・実装内容 ・イベントの修正 ・KPI を記述しておくことで、

    ①実装者が目的に沿ったより良い実装内容を提案してくれる土壌ができる ②イベントの修正の抜け漏れがなくなり、効果検証のPDCAを仕組み化できる

20. 理想の開発ディレクションを目指して