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
6.1k
Dataのおさらいと活用方法
littlebusters
1
760
改めてUXデザイン
littlebusters
0
1.5k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
2.1k
Other Decks in Design
See All in Design
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
860
CursorでAI活用のナレッジベースを構築する
kanzaki
0
760
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
1
900
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
110
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
220
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
440
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
380
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
210
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Navigating Team Friction
lara
190
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Done Done
chrislema
185
16k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Scaling GitHub
holman
463
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
A Tale of Four Properties
chriscoyier
161
23k
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!