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
960
使いやすいをデザインする[DevelopersIO 2023 岡山]
DevelopersIO 2023 岡山の登壇資料です。
使いやすいとは何かを掘り下げつつ、どうしていくのがいいのかを取り上げました。
littlebusters
July 18, 2023
Tweet
Share
More Decks by littlebusters
See All by littlebusters
Figmaにおけるバージョン管理について
littlebusters
1
5.3k
Dataのおさらいと活用方法
littlebusters
0
710
改めてUXデザイン
littlebusters
0
1.4k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
2k
Other Decks in Design
See All in Design
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.1k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
130
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
600
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
LLMによるRAG評価用合成テストデータの生成
licux
6
630
Tableau曲線表現講座(2024.11.21)
cielo1985
0
240
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.8k
セブンデックス カルチャーブック
sevendex
0
1.1k
NAHO SHIMONO_Portfolio2025
nahohphp
0
100
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
770
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
560
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
KATA
mclloyd
29
14k
Optimising Largest Contentful Paint
csswizardry
33
3.1k
Building Adaptive Systems
keathley
39
2.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Optimizing for Happiness
mojombo
376
70k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
GraphQLとの向き合い方2022年版
quramy
44
13k
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!