UXデザインをやるやらないで 変わったUIの精度

potatotips #47 (iOS/Android開発Tips共有会) で発表した資料です。

URL ： https://potatotips.connpass.com/event/75105/
開催日： 2018/01/24

Transcript

1. UXデザインをやるやらないで
   変わったUIの精度
   株式会社スタディスト　原口 弓子
   

   View Slide

2. 自己紹介
   スタディストという会社で iOS アプリの開発をしてい
   ます。
   原口 弓子
   株式会社スタディスト
   マニュアルの作成・共有が簡単にできる B2B
   SaaS 『 Teachme Biz 』を作っています。
   弊社のゆるキャラ「マロン」
   

   View Slide

3. 今日話すこと
   機能開発のプロジェクトにUXデザインを
   取り入れたら、UIが劇的によくなったお話
   〜スナップショットという機能に新たな機能を追加した時の事例〜
   

   View Slide

4. 事例の紹介
   スナップショット機能とは？
   動画から
   指定した位置の静止画を
   複数枚切り出せる機能
   

   View Slide

5. 事例の紹介
   動画プレビュー
   タイムライン
   スクロールして切り取り
   位置を指定できる
   静止画切り出しボタン
   タイムラインで指定した位置の
   静止画の切り取りを決定
   サムネイル
   切り出した静止画を表示
   機能内容
   

   View Slide

6. 事例の紹介
   そこに・・・
   指定した範囲の動画も
   切り出せたら便利だよね
   

   View Slide

7. 事例の紹介
   ということで・・・
   動画から
   指定した位置の静止画と
   指定した範囲の動画が切り出せる機能
   動画も
   切り出せるように
   しちゃおう！
   →プロジェクト始動！
   

   View Slide

8. UIデザインの変遷
   UXデザインの工程の中でUIがどう進化していったのか
   

   View Slide

9. UIデザインの変遷
   1. いきなりUI作成
   既にあるUIに、
   どうやったら新しい機能が
   うまいこと入るかで考えた
   UXデザインを完全無視！
   とってつけたような
   動画切り出しボタン
   

   View Slide

10. UIデザインの変遷
    画像スナップショット 動画スナップショット
    何をやったらどうなる
    か、想像しにくい
    操作に一貫性が
    なくて煩雑
    →うまく行かず・・
    

    View Slide

11. UIデザインの変遷
    2. ユーザーストーリーを作成
    ユーザー目線で、
    使い勝手を優先して
    考えてみた
    このままでは
    まずいので・・
    

    View Slide

12. UIデザインの変遷
    ゴールまでの手順（ピンクの付箋）
    必要な機能
    （黄色の付箋）
    想定ユーザーが
    この機能に求め
    ること
    ゴール
    （この機能で
    ユーザーは何が
    得られるか？）
    

    View Slide

13. UIデザインの変遷
    結果 画像スナップショット 動画スナップショット
    操作に統一感
    が出てきた
    機能の導線が
    明確になった
    

    View Slide

14. UIデザインの変遷
    3. ユーザーテスト1回目
    本当に使い勝手が
    良いかを確かめる
    

    View Slide

15. UIデザインの変遷
    実施した人数 弊社社員 15名
    1人あたりの実施時間 10分〜20分
    抽出できた課題数 20件
    課題分析により解決した課題数 7件
    反省：実施人数15名は多かった。途中から同じ意見しか出てこなかったため 5名程度が妥当
    と思われる。
    実施内容
    

    View Slide

16. 事例の紹介
    様々な課題を発見！
    指で時間が見えない
    ていうか、なんの時間？
    ボタンとかの要素があ
    りすぎて、操作が
    難しそう。
    バーを動かせる感じが
    しない。
    選択範囲の長さが何分な
    のかわかりにくい。
    

    View Slide

17. UIデザインの変遷
    結果 画像スナップショット 動画スナップショット
    スッキリして使
    いやすそう
    どの要素が重要か
    がはっきりした
    

    View Slide

18. UIデザインの変遷
    3. ユーザーテスト2回目
    修正した内容で
    正しく機能しているか
    をさらにチェック
    

    View Slide

19. UIデザインの変遷
    完成 画像スナップショット 動画スナップショット
    動画の選択範囲の
    時間を分秒にしただ
    けで、わかりやすく
    なった。
    

    View Slide

20. めでたし
    一時はどうなるかと思ったほどの
    UIも、しっかりまとめることができました。
    

    View Slide

21. UXデザインのススメ
    メリット
    デメリット
    ・ファーストリリースから洗練されたUIを提供できる
    ・社内で建設的な議論ができる（そもそも論に立ち返りにくくなる）
    ・議論が平行線になった時の助けになる
    ・UIデザインで正解がわからなくなった時の助けになる
    ・ファーストリリースを急ぐ場合には時間がかかってしまう
    ・開発メンバー以外の何人かの協力が必要
    

    View Slide

22. UXデザインのススメ
    ユーザーストーリー
    ユーザーテスト
    ・簡単な機能の追加でもやった方がいい
    ・議論が覆された時には本当におすすめです！
    ・社内で1人10分くらいでできるような簡易テストで十分
    ・1回のテストで3人、最低2回テストを回すと良さそう
    

    View Slide

23. UIの精度を高めるなら、
    UXデザインの手法が
    役に立つ！
    まとめ
    

    View Slide

24. ご静聴ありがとうございました。
    ユーザーストーリーの始め方や
    ユーザーテストの分析方法など、
    続きは懇親会で
    お話しましょう！
    株式会社スタディスト　原口 弓子
    Mail: yumiko.haraguchi@studist.jp
    

    View Slide