使いやすいをデザインする［DevelopersIO 2023 岡山］

DevelopersIO 2023 岡山の登壇資料です。
使いやすいとは何かを掘り下げつつ、どうしていくのがいいのかを取り上げました。

Transcript

1. デザインする 2023/7/15 CX事業本部 Delivery部 デザインチーム を 使いやすい クボキ ヒロシ 1
2. CX 事業本部 Delivery 部 デザインチーム デザイナー クボキ ヒロシ 2
3. 使いやすいをデザインする テーマ 3
4. 使いやすい、とは？ 4
5. ＼ChatGPTに聞いてみた∕ 5
6. 1. 直感的な操作 2. 分かりやすいインターフェース 3. 効率的な操作 4. エラーフリーな操作 5. パーソナライズやカスタマイズの機能 6. ⼀貫性 6
7. “直感的” 使いやすいの代名詞として使われる 7
8. 推理 ‧ 考察など論理的思考によらず、 
 感覚的に物事の真相を瞬時に
 感じとること。 “ ” 辞書.app（スーパー⼤辞林）より つまり 8
9. ⾒て使い⽅がわかる 考えなく てもわかる なぜ？ 9
10. これまでの経験や先⼊観から 「こうすれば、 こうなる」 を 無意識に判断している 10
11. 11 ⼆重過程理論 無意識 意識 ⾃動的 はやい バイアス 理論的 ‧ 思考的 おそい リソースを使う システム1 システム2
12. 予測通りの結果が 得られることが重要 直感的につかえるといわれるには 12
13. 1. 直感的な操作 2. 分かりやすいインターフェース 3. 効率的な操作 4. エラーフリーな操作 5. パーソナライズやカスタマイズの機能 6. ⼀貫性 13
14. 1. 直感的な操作 2. 分かりやすいインターフェース 3. 効率的な操作 4. エラーフリーな操作 5. パーソナライズやカスタマイズの機能 6. ⼀貫性 14
15. 実は内包してる 15
16. その直感、 どこから？ 16
17. 経験 先⼊観 17
18. • 普段使っているサービスやツール • 現実世界との関連性 18
20. 本当に直感的かは ち ょ っと考えたほうがいい 万⼈に使えるような意味合いに聞こえるが 20
21. 直感的ではないもの 21
22. アイコンで判断 22
23. アイコンで判断 23
24. アイコンで判断 • どうとでも取れるので
 使ってみるまでわからない 24
25. どうする、アイコンで判断 • ラベルも併⽤する • ツールチップなどの補助 • よ く使う項⽬なら
 利⽤者の学習に任せる 25
26. キャンセルのキャンセル 26
27. キャンセルのキャンセル 27
28. キャンセルのキャンセル • とりたいアクションが
 どちらなのかわからない • 間違って選ぶと
 ダメージがでかい （場合がある） 28
29. どうする、キャンセルのキャンセル • メッセージを具体化する • アクションラベルを
 メッセージに合わせる 29
30. どうする、キャンセルのキャンセル 30
31. ⽂脈に合わないスタイル 31
32. ⽂脈に合わないスタイル 32
33. ⽂脈に合わないスタイル • 送信なのにダウンロード…？ • ポインタで掴めそう…？ • 慣れればいいとはいえ… 33
34. どうする、⽂脈に合わないスタイル • ラベルにあったアイコン • デファク トスタンダードに従う
 （変なことをしない） 34
35. どうする、⽂脈に合わないスタイル 35
36. 状態 （結果） がわからない 36
37. 状態 （結果） がわからない 商品リスト 37
38. 状態 （結果） がわからない • 読み込み中なのか、 
 エラーなのか、 空なのか • 次のアクションが取りづらい 38
39. どうする、状態 （結果） がわからない • 状態を伝える （UI Stack） 39
40. 商品リスト どうする、状態 （結果） がわからない 商品はありません 40
41. フィードバックがない 41
42. フィードバックがない 42
43. フィードバックがない • きちんと保存されたのか
 わからない
 （ボタンを押しても同じ画⾯） 43
44. どうする、フィードバックがない • フィードバックをする 44
45. どうする、フィードバックがない 45
46. ⼀貫性がない 46
47. ⼀貫性がない ユーザー 利⽤者 カスタマー 47
48. ⼀貫性がない • 認識に時間がかかる • 慣れているが故にミスる 48
49. どうする、⼀貫性がない • 統⼀する • ルールを決める 49
50. どうする、⼀貫性がない 50
51. 直感的でないを
 ⽣み出さないために 51
52. ユーザーは結果が欲し く て
 アクションを起こしている 52
53. 既存のGUIパターンを使う 53
54. ガイドラインやUIライブラリは
 ⼀定の⽔準を担保できる HIG / Material Design / MUI / Chakra UI 54
55. ユーザーの経験や能⼒に
 合わせた補助 55
56. チュートリアル ‧ ヘルプ ‧ オンボーディ ング ‧ ツールチップ ‧ 
 フールプルーフ ‧ フェイルセーフ 56
57. ユーザーの特性に合わせる 57
58. ペルソナ ベンチマーク 58
60. まとめ 60
61. 61 フリクションをなく す “直感”を妨げる
62. 62 地味なことをきちんとやる
63. 63 普通に使えるを⽬指そう
64. Thank you for listening!