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
1k
使いやすいをデザインする[DevelopersIO 2023 岡山]
DevelopersIO 2023 岡山の登壇資料です。
使いやすいとは何かを掘り下げつつ、どうしていくのがいいのかを取り上げました。
littlebusters
July 18, 2023
Tweet
Share
More Decks by littlebusters
See All by littlebusters
Figmaにおけるバージョン管理について
littlebusters
1
5.6k
Dataのおさらいと活用方法
littlebusters
0
740
改めてUXデザイン
littlebusters
0
1.4k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
2k
Other Decks in Design
See All in Design
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
190
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
250
線で考える画面構成
natsuume
1
850
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.4k
問いの変遷
iflection
0
110
Kid Cowboy 103
marilutwin
0
180
Goodpatch Tour💙 / We are hiring!
goodpatch
31
830k
ほしいテンプレート制作から始めるツール学習のススメ📝
60d
0
120
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
190
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
200
Haley's adventure chase
ivettetwin
0
160
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.5k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing for Performance
lara
608
69k
GraphQLとの向き合い方2022年版
quramy
46
14k
Designing Experiences People Love
moore
142
24k
Practical Orchestrator
shlominoach
187
11k
How GitHub (no longer) Works
holman
314
140k
Speed Design
sergeychernyshev
29
940
Become a Pro
speakerdeck
PRO
28
5.3k
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!