フロントエンドエンジニアが知っておくべきUIUX心理学

「デザインってセンスでしょ？」、そう思っているあなたへ。
センスだけに頼らないフロントエンド/デザインスキルを身につけるべく、UIUXを心理学の観点から勉強したので、その内容を共有します！

※2024/01/19「フレッシュメンLT #1 冬休みの自由研究」での登壇内容です。
https://connpass.com/event/301006/

Transcript

1. フロントエンドエンジニアが 知っておくべきUIUX心理学 presented by 雪林檎 フレッシュメンLT #1
2. 新卒エンジニア UI/UXデザイン〜フロントエンドを極めるべく、 日々邁進中！ 将来の目標は、 大好きなエンタメ × ITで多くの人に笑顔を届けること！ 自己紹介 資格 雪林檎 趣味 • Perfume • SEKAI NO OWARI • sumika • Mrs. GREEN APPLE @snow1752
3. エンジニアとUIUXの関係性 はじめに
4. エンジニア × UIUX エンジニア 設計 開発 UXデザイナー （体験全体） UIデザイナー （視覚的要素）
5. エンジニア × UIUX UIデザイナー （視覚的要素） エンジニア 開発 UXデザイナー （体験全体） 設計
6. エンジニア × UIUX 最終的に、プロダクト・サービスのUIUXを実現するのはエンジニア ユーザー ユーザー
7. エンジニア × UIUX 「デザインってセンス」でしょ？　=　根底は心理学、学べば良い！ 良いデザイン 形がよい 配置がよい 色がよい フィッツの 法則 フォン・レストルフの 法則 ヤコブの 法則 ミラーの 法則 ヒックの 法則 心理学！
8. 今日の目標 3つのUIUX心理学 ↓ UIUXデザインに興味を持つ！
9. 01 ヤコブの法則
10. ヤコブの法則 メンタルモデル システムの振る舞いについて、わたしたちがどう理解しているかという概念 2000年　ヤコブ・ニールセン（ユーザビリティの専門家） 『ユーザーは経験の積み重ねにより、”こうあるべき”という期待を持っている』 ＝　ユーザーは既存のメンタルモデルを持っている →　既存のメンタルモデルを活用しよう！
11. ヤコブの法則 → UI 現実世界とシステムの一致 ボタン画像：Google マテリアルデザイン https://m2.material.io/design/interaction/states.html#usage
12. ヤコブの法則 → UI 現実世界とシステムの一致
13. ヤコブの法則 → UX 大規模な「リデザイン」　=　既存のメンタルモデルが使えない 参考：https://www.gizmodo.jp/2018/08/snapchat-on-decline.html
14. ポイント 法則１ ヤコブの法則 「慣れ」の 活用 法則2 法則3
15. 02フォン・レストルフ 効果
16. フォン・レストルフ効果 1993年　ヘドウィグ・フォン・レストルフ 『同じようなアイテムや情報が連続していると、学習や記憶の効果が減少する』 ＝　同じ物が連続すると、理解力が低下する →　「個性」で、ユーザーの理解を助ける！
17. フォン・レストルフ効果 → UI 「色」を変える
18. フォン・レストルフ効果 → UI 「形状」を変える
19. ポイント 法則１ ヤコブの法則 「慣れ」の 活用 法則2 フォン・レストルフ 効果 「個性」で 記憶に残す 法則3
20. 03フィッツの法則
21. フィッツの法則 1954年　ポール・フィッツ（心理学者） 『難易度指標（ID）はターゲットの幅（W）とターゲット中心までの距離（D）の時 ID = log2 (　　) と表せる。』 2D W
22. フィッツの法則 『ID = log2(　　)　』とは ターゲットの幅Wが大きい ターゲット中心までの距離Dが小さい ↓ 難易度IDが小さい ↓ 操作が簡単 2D W
23. フィッツの法則→UI 適切な「大きさ」 Button Download Paddingを取る アイコン+文字
24. フィッツの法則→UI 適切な「距離」
25. フィッツの法則→UI 適切な「距離」 ボタンが近い　 ＝　簡単に操作できる ＝　”誤操作”に繋がる ボタンを遠ざけることで ”誤操作を防ぐ” Invitation Invitation ✔ × UserA ✔ × UserA
26. ポイント 法則１ ヤコブの法則 「慣れ」の 活用 法則2 フォン・レストルフ 効果 「個性」で 記憶に残す 法則3 フィッツの法則 「距離と大きさ」 で難易度調整
27. 参考文献 • インターフェースデザインの心理学　第2版 ウェブやアプリに新たな視点をもたらす100の指針 • UXデザインの法則　最高のプロダクトとサービスを支える心理学
28. まとめ 法則１ ヤコブの法則 「慣れ」の 活用 法則2 フォン・レストルフ 効果 「個性」で 記憶に残す 法則3 フィッツの法則 「距離と大きさ」 で難易度調整 Thank You For Listening!