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

by yukiringo

Slide 1

Slide 1 text

フロントエンドエンジニアが知っておくべきUIUX心理学 presented by 雪林檎フレッシュメンLT #1

Slide 2

Slide 2 text

新卒エンジニア UI/UXデザイン〜フロントエンドを極めるべく、日々邁進中！将来の目標は、大好きなエンタメ × ITで多くの人に笑顔を届けること！自己紹介資格雪林檎趣味 ● Perfume ● SEKAI NO OWARI ● sumika ● Mrs. GREEN APPLE @snow1752

Slide 3

Slide 3 text

エンジニアとUIUXの関係性はじめに

Slide 4

Slide 4 text

エンジニア × UIUX エンジニア設計開発 UXデザイナー（体験全体） UIデザイナー（視覚的要素）

Slide 5

Slide 5 text

エンジニア × UIUX UIデザイナー（視覚的要素）エンジニア開発 UXデザイナー（体験全体）設計

Slide 6

Slide 6 text

エンジニア × UIUX 最終的に、プロダクト・サービスのUIUXを実現するのはエンジニアユーザーユーザー

Slide 7

Slide 7 text

エンジニア × UIUX 「デザインってセンス」でしょ？　=　根底は心理学、学べば良い！良いデザイン形がよい配置がよい色がよいフィッツの法則フォン・レストルフの法則ヤコブの法則ミラーの法則ヒックの法則心理学！

Slide 8

Slide 8 text

今日の目標 3つのUIUX心理学 ↓ UIUXデザインに興味を持つ！

Slide 9

Slide 9 text

01 ヤコブの法則

Slide 10

Slide 10 text

ヤコブの法則メンタルモデルシステムの振る舞いについて、わたしたちがどう理解しているかという概念 2000年　ヤコブ・ニールセン（ユーザビリティの専門家）『ユーザーは経験の積み重ねにより、”こうあるべき”という期待を持っている』＝　ユーザーは既存のメンタルモデルを持っている →　既存のメンタルモデルを活用しよう！

Slide 11

Slide 11 text

ヤコブの法則 → UI 現実世界とシステムの一致ボタン画像：Google マテリアルデザイン https://m2.material.io/design/interaction/states.html#usage

Slide 12

Slide 12 text

ヤコブの法則 → UI 現実世界とシステムの一致

Slide 13

Slide 13 text

ヤコブの法則 → UX 大規模な「リデザイン」　=　既存のメンタルモデルが使えない参考：https://www.gizmodo.jp/2018/08/snapchat-on-decline.html

Slide 14

Slide 14 text

ポイント法則１ヤコブの法則「慣れ」の活用法則2 法則3

Slide 15

Slide 15 text

02フォン・レストルフ効果

Slide 16

Slide 16 text

フォン・レストルフ効果 1993年　ヘドウィグ・フォン・レストルフ『同じようなアイテムや情報が連続していると、学習や記憶の効果が減少する』＝　同じ物が連続すると、理解力が低下する →　「個性」で、ユーザーの理解を助ける！

Slide 17

Slide 17 text

フォン・レストルフ効果 → UI 「色」を変える

Slide 18

Slide 18 text

フォン・レストルフ効果 → UI 「形状」を変える

Slide 19

Slide 19 text

ポイント法則１ヤコブの法則「慣れ」の活用法則2 フォン・レストルフ効果「個性」で記憶に残す法則3

Slide 20

Slide 20 text

03フィッツの法則

Slide 21

Slide 21 text

フィッツの法則 1954年　ポール・フィッツ（心理学者）『難易度指標（ID）はターゲットの幅（W）とターゲット中心までの距離（D）の時 ID = log2 (　　) と表せる。』 2D W

Slide 22

Slide 22 text

フィッツの法則『ID = log2(　　)　』とはターゲットの幅Wが大きいターゲット中心までの距離Dが小さい ↓ 難易度IDが小さい ↓ 操作が簡単 2D W

Slide 23

Slide 23 text

フィッツの法則→UI 適切な「大きさ」 Button Download Paddingを取るアイコン+文字

Slide 24

Slide 24 text

フィッツの法則→UI 適切な「距離」

Slide 25

Slide 25 text

フィッツの法則→UI 適切な「距離」ボタンが近い　＝　簡単に操作できる＝　”誤操作”に繋がるボタンを遠ざけることで ”誤操作を防ぐ” Invitation Invitation ✔ × UserA ✔ × UserA

Slide 26

Slide 26 text

ポイント法則１ヤコブの法則「慣れ」の活用法則2 フォン・レストルフ効果「個性」で記憶に残す法則3 フィッツの法則「距離と大きさ」で難易度調整

Slide 27

Slide 27 text

参考文献 ● インターフェースデザインの心理学　第2版ウェブやアプリに新たな視点をもたらす100の指針 ● UXデザインの法則　最高のプロダクトとサービスを支える心理学

Slide 28

Slide 28 text

まとめ法則１ヤコブの法則「慣れ」の活用法則2 フォン・レストルフ効果「個性」で記憶に残す法則3 フィッツの法則「距離と大きさ」で難易度調整 Thank You For Listening!