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

Transcript

1. デザインする
   2023/7/15
   CX事業本部 Delivery部 デザインチーム
   を
   使いやすい
   クボキ ヒロシ
   1
   

   View Slide

2. CX 事業本部 Delivery 部 デザインチーム
   デザイナー
   クボキ ヒロシ
   2
   

   View Slide

3. 使いやすいをデザインする
   テーマ
   3
   

   View Slide

4. 使いやすい、とは？
   4
   

   View Slide

5. ＼ChatGPTに聞いてみた∕
   5
   

   View Slide

6. 1. 直感的な操作
   
   2. 分かりやすいインターフェース
   
   3. 効率的な操作
   
   4. エラーフリーな操作
   
   5. パーソナライズやカスタマイズの機能
   
   6. ⼀貫性
   6
   

   View Slide

7. “直感的”
   使いやすいの代名詞として使われる
   7
   

   View Slide

8. 推理
   ‧
   考察など論理的思考によらず、
   

   感覚的に物事の真相を瞬時に

   感じとること。
   “
   ”
   辞書.app（スーパー⼤辞林）より
   つまり
   8
   

   View Slide

9. ⾒て使い⽅がわかる
   
   考えなく
   てもわかる
   なぜ？
   9
   

   View Slide

10. これまでの経験や先⼊観から
    
    「こうすれば、
    こうなる」
    を
    
    無意識に判断している
    10
    

    View Slide

11. 11
    ⼆重過程理論
    無意識 意識
    ⾃動的
    
    はやい
    
    バイアス
    理論的
    ‧
    思考的
    
    おそい
    
    リソースを使う
    システム1 システム2
    

    View Slide

12. 予測通りの結果が
    
    得られることが重要
    直感的につかえるといわれるには
    12
    

    View Slide

13. 1. 直感的な操作
    
    2. 分かりやすいインターフェース
    
    3. 効率的な操作
    
    4. エラーフリーな操作
    
    5. パーソナライズやカスタマイズの機能
    
    6. ⼀貫性
    13
    

    View Slide

14. 1. 直感的な操作
    
    2. 分かりやすいインターフェース
    
    3. 効率的な操作
    
    4. エラーフリーな操作
    
    5. パーソナライズやカスタマイズの機能
    
    6. ⼀貫性
    14
    

    View Slide

15. 実は内包してる
    15
    

    View Slide

16. その直感、
    どこから？
    16
    

    View Slide

17. 経験 先⼊観
    17
    

    View Slide

18. • 普段使っているサービスやツール
    
    • 現実世界との関連性
    18
    

    View Slide

19. 19
    

    View Slide

20. 本当に直感的かは
    
    ち
    ょ
    っと考えたほうがいい
    万⼈に使えるような意味合いに聞こえるが
    20
    

    View Slide

21. 直感的ではないもの
    21
    

    View Slide

22. アイコンで判断
    22
    

    View Slide

23. アイコンで判断
    23
    

    View Slide

24. アイコンで判断
    • どうとでも取れるので

    使ってみるまでわからない
    24
    

    View Slide

25. どうする、アイコンで判断
    • ラベルも併⽤する
    
    • ツールチップなどの補助
    
    • よ
    く使う項⽬なら

    利⽤者の学習に任せる
    25
    

    View Slide

26. キャンセルのキャンセル
    26
    

    View Slide

27. キャンセルのキャンセル
    27
    

    View Slide

28. キャンセルのキャンセル
    • とりたいアクションが

    どちらなのかわからない
    
    • 間違って選ぶと

    ダメージがでかい
    （場合がある）
    28
    

    View Slide

29. どうする、キャンセルのキャンセル
    • メッセージを具体化する
    
    • アクションラベルを

    メッセージに合わせる
    29
    

    View Slide

30. どうする、キャンセルのキャンセル
    30
    

    View Slide

31. ⽂脈に合わないスタイル
    31
    

    View Slide

32. ⽂脈に合わないスタイル
    32
    

    View Slide

33. ⽂脈に合わないスタイル
    • 送信なのにダウンロード…？
    
    • ポインタで掴めそう…？
    
    • 慣れればいいとはいえ…
    33
    

    View Slide

34. どうする、⽂脈に合わないスタイル
    • ラベルにあったアイコン
    
    • デファク
    トスタンダードに従う

    （変なことをしない）
    34
    

    View Slide

35. どうする、⽂脈に合わないスタイル
    35
    

    View Slide

36. 状態
    （結果）
    がわからない
    36
    

    View Slide

37. 状態
    （結果）
    がわからない
    商品リスト
    37
    

    View Slide

38. 状態
    （結果）
    がわからない
    • 読み込み中なのか、
    

    エラーなのか、
    空なのか
    
    • 次のアクションが取りづらい
    38
    

    View Slide

39. どうする、状態
    （結果）
    がわからない
    • 状態を伝える
    （UI Stack）
    39
    

    View Slide

40. 商品リスト
    どうする、状態
    （結果）
    がわからない
    商品はありません
    40
    

    View Slide

41. フィードバックがない
    41
    

    View Slide

42. フィードバックがない
    42
    

    View Slide

43. フィードバックがない
    • きちんと保存されたのか

    わからない

    （ボタンを押しても同じ画⾯）
    43
    

    View Slide

44. どうする、フィードバックがない
    • フィードバックをする
    44
    

    View Slide

45. どうする、フィードバックがない
    45
    

    View Slide

46. ⼀貫性がない
    46
    

    View Slide

47. ⼀貫性がない
    ユーザー
    利⽤者
    カスタマー
    47
    

    View Slide

48. ⼀貫性がない
    • 認識に時間がかかる
    
    • 慣れているが故にミスる
    48
    

    View Slide

49. どうする、⼀貫性がない
    • 統⼀する
    
    • ルールを決める
    49
    

    View Slide

50. どうする、⼀貫性がない
    50
    

    View Slide

51. 直感的でないを

    ⽣み出さないために
    51
    

    View Slide

52. ユーザーは結果が欲し
    く
    て

    アクションを起こしている
    52
    

    View Slide

53. 既存のGUIパターンを使う
    53
    

    View Slide

54. ガイドラインやUIライブラリは

    ⼀定の⽔準を担保できる
    HIG / Material Design / MUI / Chakra UI
    54
    

    View Slide

55. ユーザーの経験や能⼒に

    合わせた補助
    55
    

    View Slide

56. チュートリアル
    ‧
    ヘルプ
    ‧
    
    
    オンボーディ
    ング
    ‧
    ツールチップ
    ‧
    

    フールプルーフ
    ‧
    フェイルセーフ
    56
    

    View Slide

57. ユーザーの特性に合わせる
    57
    

    View Slide

58. ペルソナ
    
    ベンチマーク
    58
    

    View Slide

59. 59
    

    View Slide

60. まとめ
    60
    

    View Slide

61. 61
    フリクションをなく
    す
    “直感”を妨げる
    

    View Slide

62. 62
    地味なことをきちんとやる
    

    View Slide

63. 63
    普通に使えるを⽬指そう
    

    View Slide

64. Thank you for listening!
    

    View Slide