UXデザインをやるやらないで変わったUIの精度

by HaraguchiYumiko

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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