共創するためのデザイン批評2021.02.26 Takanori Oki @Front-End Study #4 「いま考えるユーザー体験とデザインの世界」
View Slide
自己紹介• UI designer at ClassDo• Organizer of Web Platform Study Group• Figma, Web Font, 11ty, etc…• 最近引っ越しました2
デザイン批評の基本3
デザイン批評の基本• 批判的思考• デザインがプロダクトの目的を達成するために適切かどうかを判断する• 批評には適切な方法があり、それを学ぶ必要がある• ただ感想を伝えれば良いわけではない!4
批評とレビューの違い5デザイン批評デザインが目的を達成できるか判断するための分析手法。デザインレビューデザインの承認や合意形成のために行われるミーティング。
ベストプラクティス• 質問で始める• 感情のままに話さない• 自分の意見が正しいと思い込まない• 意見を押し付けない• 長所について話す• 「誰の視点から考えているか」を考える6
みんなではじめるデザイン批評7チームでどのようにデザイン批評を実践するか体系的に解説した名著(個人的)みんな読もう
デザイン批評で大切な3つの観点8
その前に…9
デザイン批評で一番重要なことは「見た目」にとらわれないこと10
見た目の好き嫌いを表明することは「批評」ではない11
「デザインのセンスがないから…」というのは一番言ってはいけない言葉12
見た目にとらわれない13表層にとらわれず、その本質を見極める見た目の裏側を意識する
デザイン批評で大切な3つの観点14デザインの目的 使いやすさ UI Stack
デザインの目的15
デザインの目的• なぜこのデザインにしたのか• この「なぜ?」をチーム全員が理解することが重要• これがレビューの「基準」となる• 見落としてる要件はないか16
使いやすさ17
使いやすさ• 達成したいことを迷わず達成できるか• 情報の過不足がないか• 行動を邪魔する要素がないか• etc…• ダークパターンになってないか• こちらがしてほしいことを強制していないか• ユーザーを騙していないか18
ダークパターンデザイナーやマーケターが意図せずダークパターンを生み出す可能性もあるダークパターンはUXを低下させるだけでなく会社やブランドのイメージ低下につながるデザイン批評でダークパターンを防ぐ19
UI Stack20
UI Stack21Ideal StateBlank StateError StatePartial StateLoading StateUIの基本的な5つの状態https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/
デザインレビューで考慮すべきポイント22
デザインレビューで考慮すべきポイント23UIの一貫性 実装難易度 データとUI
UIの一貫性24
UIの一貫性• 色やmarginなどスタイルの一貫性• 各UIコンポーネントの役割の一貫性• インタラクションの一貫性25
インタラクション26「ユーザーのアクションとそれに対するレスポンスの関係性」
UIの一貫性一貫性のないデザインを鵜呑みにしない!高い確率で負債になるエンジニアは「規則を作り守る」ことに慣れてるので、エンジニアのほうが気づきやすい気づいたことは伝えることが大事27
実装難易度28
実装難易度• 本来はデザイン始まる前(仕様策定段階)で確認しておくべきこと• 技術面の知識がないデザイナーに対して「知識を育てる」つもりで、しっかりと説明する• 何が出来て何ができないか、なぜ出来ないか、代替案はないか、など29
大事な話• ごまかさない• 「本当はできるけど面倒だから黙っておこう…」• 相手を侮らない• 「どうせ説明してもわからないだろう…」• 本質を探る• 「なぜこのUIを実装する必要があるのか?」30
データとUI31
データとUIの整合性• データ構造とUIに矛盾がないか• DB• API• マイクロサービス• etc...• 既存のデータ構造とUIが一致していない場合、どちらを修正するべきなのかを話し合う必要がある32
まとめ33
まとめ• デザイン批評には適切な方法があるよ• デザイン批評とは、デザインが目的を達成できるかどうかを分析すること• 見た目にとらわれず、必要な観点からデザインを分析してチーム全体で良いプロダクトを開発しよう!34
THANK YOU!35