共創するためのデザイン批評

Transcript

1. 共創するためのデザイン批評
   2021.02.26 Takanori Oki @Front-End Study #4 「いま考えるユーザー体験とデザインの世界」
   

   View Slide

2. 自己紹介
   • UI designer at ClassDo
   • Organizer of Web Platform Study Group
   • Figma, Web Font, 11ty, etc…
   • 最近引っ越しました
   2
   

   View Slide

3. デザイン批評の基本
   3
   

   View Slide

4. デザイン批評の
   基本
   • 批判的思考
   • デザインがプロダクトの目的を達成するために
   適切かどうかを判断する
   • 批評には適切な方法があり、それを学ぶ必要がある
   • ただ感想を伝えれば良いわけではない！
   4
   

   View Slide

5. 批評とレビューの違い
   5
   デザイン批評
   デザインが目的を達成できる
   か判断するための分析手法。
   デザインレビュー
   デザインの承認や合意形成の
   ために行われるミーティング。
   

   View Slide

6. ベスト
   プラクティス
   • 質問で始める
   • 感情のままに話さない
   • 自分の意見が正しいと思い込まない
   • 意見を押し付けない
   • 長所について話す
   • 「誰の視点から考えているか」を考える
   6
   

   View Slide

7. みんなではじめるデザイン批評
   7
   チームでどのようにデザイン批評を実践するか
   体系的に解説した名著（個人的）
   みんな読もう
   

   View Slide

8. デザイン批評で大切な3つの観点
   8
   

   View Slide

9. その前に…
   9
   

   View Slide

10. デザイン批評で一番重要なことは
    「見た目」にとらわれないこと
    10
    

    View Slide

11. 見た目の好き嫌いを表明することは
    「批評」ではない
    11
    

    View Slide

12. 「デザインのセンスがないから…」
    というのは一番言ってはいけない言葉
    12
    

    View Slide

13. 見た目にとらわれない
    13
    表層にとらわれず、その本質を見極める
    見た目の裏側を意識する
    

    View Slide

14. デザイン批評で大切な3つの観点
    14
    デザインの目的 使いやすさ UI Stack
    

    View Slide

15. デザインの目的
    15
    

    View Slide

16. デザインの目的
    • なぜこのデザインにしたのか
    • この「なぜ？」をチーム全員が理解することが重要
    • これがレビューの「基準」となる
    • 見落としてる要件はないか
    16
    

    View Slide

17. 使いやすさ
    17
    

    View Slide

18. 使いやすさ
    • 達成したいことを迷わず達成できるか
    • 情報の過不足がないか
    • 行動を邪魔する要素がないか
    • etc…
    • ダークパターンになってないか
    • こちらがしてほしいことを強制していないか
    • ユーザーを騙していないか
    18
    

    View Slide

19. ダークパターン
    デザイナーやマーケターが意図せず
    ダークパターンを生み出す可能性もある
    ダークパターンはUXを低下させるだけでなく
    会社やブランドのイメージ低下につながる
    デザイン批評でダークパターンを防ぐ
    19
    

    View Slide

20. UI Stack
    20
    

    View Slide

21. UI Stack
    21
    Ideal State
    Blank State
    Error State
    Partial State
    Loading State
    UIの基本的な5つの状態
    https://www.scotthurff.com/posts/
    why-your-user-interface-is-awkward-
    youre-ignoring-the-ui-stack/
    

    View Slide

22. デザインレビューで考慮すべきポイント
    22
    

    View Slide

23. デザインレビューで考慮すべきポイント
    23
    UIの一貫性 実装難易度 データとUI
    

    View Slide

24. UIの一貫性
    24
    

    View Slide

25. UIの一貫性
    • 色やmarginなどスタイルの一貫性
    • 各UIコンポーネントの役割の一貫性
    • インタラクションの一貫性
    25
    

    View Slide

26. インタラクション
    26
    「ユーザーのアクションとそれに対するレスポンスの関係性」
    

    View Slide

27. UIの一貫性
    一貫性のないデザインを
    鵜呑みにしない！
    高い確率で負債になる
    エンジニアは「規則を作り守る」ことに慣れてるので、
    エンジニアのほうが気づきやすい
    気づいたことは伝えることが大事
    27
    

    View Slide

28. 実装難易度
    28
    

    View Slide

29. 実装難易度
    • 本来はデザイン始まる前（仕様策定段階）で確認して
    おくべきこと
    • 技術面の知識がないデザイナーに対して
    「知識を育てる」つもりで、しっかりと説明する
    • 何が出来て何ができないか、なぜ出来ないか、
    代替案はないか、など
    29
    

    View Slide

30. 大事な話
    • ごまかさない
    • 「本当はできるけど面倒だから黙っておこう…」
    • 相手を侮らない
    • 「どうせ説明してもわからないだろう…」
    • 本質を探る
    • 「なぜこのUIを実装する必要があるのか？」
    30
    

    View Slide

31. データとUI
    31
    

    View Slide

32. データとUIの
    整合性
    • データ構造とUIに矛盾がないか
    • DB
    • API
    • マイクロサービス
    • etc...
    • 既存のデータ構造とUIが一致していない場合、
    どちらを修正するべきなのかを話し合う必要がある
    32
    

    View Slide

33. まとめ
    33
    

    View Slide

34. まとめ
    • デザイン批評には適切な方法があるよ
    • デザイン批評とは、デザインが目的を達成できるか
    どうかを分析すること
    • 見た目にとらわれず、必要な観点からデザインを分析
    してチーム全体で良いプロダクトを開発しよう！
    34
    

    View Slide

35. THANK YOU!
    35
    

    View Slide