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
6k
Dataのおさらいと活用方法
littlebusters
0
760
改めてUXデザイン
littlebusters
0
1.5k
作業をスムーズに進めるために知っておくと便利なTips
littlebusters
1
2.1k
Other Decks in Design
See All in Design
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.7k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
430
Findyのプロデチームの 歩みとこれから
satty9556
0
290
root COMPANY DECK / We are hiring!
root_recruit
1
24k
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.9k
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
240
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
190
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
350
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
260
株式会社バクタム 会社説明資料
bactum
0
360
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
490
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Adaptive Systems
keathley
43
2.8k
Producing Creativity
orderedlist
PRO
347
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Navigating Team Friction
lara
189
15k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
Balancing Empowerment & Direction
lara
4
680
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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!