Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
共創するためのデザイン批評
takanorip
February 26, 2021
Design
7
3.3k
共創するためのデザイン批評
takanorip
February 26, 2021
Tweet
Share
More Decks by takanorip
See All by takanorip
Astroで始める爆速個人サイト開発
takanorip
12
8.3k
後悔しないデザインシステムの始め方
takanorip
4
2.3k
デザインシステム運用とOKRの良い関係
takanorip
0
960
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
39
メンタルヘルスチューニング
takanorip
0
110
認知科学のススメ
takanorip
5
3.6k
ソフトウェアエンジニアの教養を養う本
takanorip
1
17k
Figmaプラグイン 開発のすゝめ
takanorip
0
250
Headless Components Design
takanorip
0
84
Other Decks in Design
See All in Design
Lee_CheeseburgerKid222.pdf
leemwitz
1
190
DL2022 Zoe Rose - ‘Scientific design methods’ and ‘applied creativity’: a lost history
uxaustralia
PRO
0
140
「つくりたい体験」からはじめるプロダクトデザイン / Starting Product Design from "Ideal Experiences"
nucumo
0
520
エムスリー×マネーフォワード 『社会を変えるサービスデザイン 』/m3design-digikar
yusuke109
1
2k
noteが目指す創作をつづけるためのエモーショナルデザイン
yumatsushita
0
3.6k
顧客信頼性向上のためのデザイン
mizuena
1
450
保育中心設計でつくる保育ICTの裏側
hiro93n
0
170
Grub
rottentwinkies
1
340
Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ
terkel
0
630
Tu fais du Web et tu ne connais pas les Layout Shifts ?! Nan mais...
goetter
2
190
Research Process of MusicTongue
mxair95000
0
170
Anatomy of Dynamic color
rockname
0
590
Featured
See All Featured
Building Applications with DynamoDB
mza
85
4.9k
A designer walks into a library…
pauljervisheath
198
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
Become a Pro
speakerdeck
PRO
6
3.2k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
Code Review Best Practice
trishagee
50
11k
What's in a price? How to price your products and services
michaelherold
233
9.7k
In The Pink: A Labor of Love
frogandcode
132
21k
GitHub's CSS Performance
jonrohan
1020
430k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Facilitating Awesome Meetings
lara
33
4.6k
Transcript
共創するためのデザイン批評 2021.02.26 Takanori Oki @Front-End Study #4 「いま考えるユーザー体験とデザインの世界」
自己紹介 • 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 Stack 20
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/
デザインレビューで考慮すべきポイント 22
デザインレビューで考慮すべきポイント 23 UIの一貫性 実装難易度 データとUI
UIの一貫性 24
UIの一貫性 • 色やmarginなどスタイルの一貫性 • 各UIコンポーネントの役割の一貫性 • インタラクションの一貫性 25
インタラクション 26 「ユーザーのアクションとそれに対するレスポンスの関係性」
UIの一貫性 一貫性のないデザインを 鵜呑みにしない! 高い確率で負債になる エンジニアは「規則を作り守る」ことに慣れてるので、 エンジニアのほうが気づきやすい 気づいたことは伝えることが大事 27
実装難易度 28
実装難易度 • 本来はデザイン始まる前(仕様策定段階)で確認して おくべきこと • 技術面の知識がないデザイナーに対して 「知識を育てる」つもりで、しっかりと説明する • 何が出来て何ができないか、なぜ出来ないか、 代替案はないか、など
29
大事な話 • ごまかさない • 「本当はできるけど面倒だから黙っておこう…」 • 相手を侮らない • 「どうせ説明してもわからないだろう…」 •
本質を探る • 「なぜこのUIを実装する必要があるのか?」 30
データとUI 31
データとUIの 整合性 • データ構造とUIに矛盾がないか • DB • API • マイクロサービス
• etc... • 既存のデータ構造とUIが一致していない場合、 どちらを修正するべきなのかを話し合う必要がある 32
まとめ 33
まとめ • デザイン批評には適切な方法があるよ • デザイン批評とは、デザインが目的を達成できるか どうかを分析すること • 見た目にとらわれず、必要な観点からデザインを分析 してチーム全体で良いプロダクトを開発しよう! 34
THANK YOU! 35