Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
使いやすいをデザインする[DevelopersIO 2023 岡山]
Search
littlebusters
July 18, 2023
Design
2
980
使いやすいをデザインする[DevelopersIO 2023 岡山]
DevelopersIO 2023 岡山の登壇資料です。
使いやすいとは何かを掘り下げつつ、どうしていくのがいいのかを取り上げました。
littlebusters
July 18, 2023
Tweet
Share
More Decks by littlebusters
See All by littlebusters
Figmaにおけるバージョン管理について
littlebusters
1
5.4k
Dataのおさらいと活用方法
littlebusters
0
720
改めてUXデザイン
littlebusters
0
1.4k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
2k
Other Decks in Design
See All in Design
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
290
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
390
発表資料テンプレート / My slide template
thatblue
0
220
250131_product meetup
motokoishida
0
120
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
970
aya_murakami_portfolio
ayakaimi1101
0
1.2k
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
480
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
180
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
510
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
910
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
It's Worth the Effort
3n
184
28k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
Code Review Best Practice
trishagee
67
18k
How to Ace a Technical Interview
jacobian
276
23k
Become a Pro
speakerdeck
PRO
26
5.2k
Transcript
デザインする 2023/7/15 CX事業本部 Delivery部 デザインチーム を 使いやすい クボキ ヒロシ 1
CX 事業本部 Delivery 部 デザインチーム デザイナー クボキ ヒロシ 2
使いやすいをデザインする テーマ 3
使いやすい、とは? 4
\ChatGPTに聞いてみた∕ 5
1. 直感的な操作 2. 分かりやすいインターフェース 3. 効率的な操作 4. エラーフリーな操作 5. パーソナライズやカスタマイズの機能
6. ⼀貫性 6
“直感的” 使いやすいの代名詞として使われる 7
推理 ‧ 考察など論理的思考によらず、 感覚的に物事の真相を瞬時に 感じとること。 “ ” 辞書.app(スーパー⼤辞林)より つまり
8
⾒て使い⽅がわかる 考えなく てもわかる なぜ? 9
これまでの経験や先⼊観から 「こうすれば、 こうなる」 を 無意識に判断している 10
11 ⼆重過程理論 無意識 意識 ⾃動的 はやい バイアス 理論的 ‧ 思考的
おそい リソースを使う システム1 システム2
予測通りの結果が 得られることが重要 直感的につかえるといわれるには 12
1. 直感的な操作 2. 分かりやすいインターフェース 3. 効率的な操作 4. エラーフリーな操作 5. パーソナライズやカスタマイズの機能
6. ⼀貫性 13
1. 直感的な操作 2. 分かりやすいインターフェース 3. 効率的な操作 4. エラーフリーな操作 5. パーソナライズやカスタマイズの機能
6. ⼀貫性 14
実は内包してる 15
その直感、 どこから? 16
経験 先⼊観 17
• 普段使っているサービスやツール • 現実世界との関連性 18
19
本当に直感的かは ち ょ っと考えたほうがいい 万⼈に使えるような意味合いに聞こえるが 20
直感的ではないもの 21
アイコンで判断 22
アイコンで判断 23
アイコンで判断 • どうとでも取れるので 使ってみるまでわからない 24
どうする、アイコンで判断 • ラベルも併⽤する • ツールチップなどの補助 • よ く使う項⽬なら 利⽤者の学習に任せる 25
キャンセルのキャンセル 26
キャンセルのキャンセル 27
キャンセルのキャンセル • とりたいアクションが どちらなのかわからない • 間違って選ぶと ダメージがでかい (場合がある) 28
どうする、キャンセルのキャンセル • メッセージを具体化する • アクションラベルを メッセージに合わせる 29
どうする、キャンセルのキャンセル 30
⽂脈に合わないスタイル 31
⽂脈に合わないスタイル 32
⽂脈に合わないスタイル • 送信なのにダウンロード…? • ポインタで掴めそう…? • 慣れればいいとはいえ… 33
どうする、⽂脈に合わないスタイル • ラベルにあったアイコン • デファク トスタンダードに従う (変なことをしない) 34
どうする、⽂脈に合わないスタイル 35
状態 (結果) がわからない 36
状態 (結果) がわからない 商品リスト 37
状態 (結果) がわからない • 読み込み中なのか、 エラーなのか、 空なのか • 次のアクションが取りづらい
38
どうする、状態 (結果) がわからない • 状態を伝える (UI Stack) 39
商品リスト どうする、状態 (結果) がわからない 商品はありません 40
フィードバックがない 41
フィードバックがない 42
フィードバックがない • きちんと保存されたのか わからない (ボタンを押しても同じ画⾯) 43
どうする、フィードバックがない • フィードバックをする 44
どうする、フィードバックがない 45
⼀貫性がない 46
⼀貫性がない ユーザー 利⽤者 カスタマー 47
⼀貫性がない • 認識に時間がかかる • 慣れているが故にミスる 48
どうする、⼀貫性がない • 統⼀する • ルールを決める 49
どうする、⼀貫性がない 50
直感的でないを ⽣み出さないために 51
ユーザーは結果が欲し く て アクションを起こしている 52
既存のGUIパターンを使う 53
ガイドラインやUIライブラリは ⼀定の⽔準を担保できる HIG / Material Design / MUI / Chakra
UI 54
ユーザーの経験や能⼒に 合わせた補助 55
チュートリアル ‧ ヘルプ ‧ オンボーディ ング ‧ ツールチップ ‧
フールプルーフ ‧ フェイルセーフ 56
ユーザーの特性に合わせる 57
ペルソナ ベンチマーク 58
59
まとめ 60
61 フリクションをなく す “直感”を妨げる
62 地味なことをきちんとやる
63 普通に使えるを⽬指そう
Thank you for listening!