インタフェースデザインの心理学まとめ

All Copyrights reserved by akihiro_0228, 2015
インタフェースデザインの心理学
2015/03/26 - 社内勉強会
@akihiro_0228
100 Things Every Designer Needs to Know About People

導入
2

3
o'reilly japan から出版されている
インターフェースデザインの⼼心理学
という本のまとめになります。

4
10章100Tipsの内容を、
独断と偏⾒見でまとめています。
過度な期待はしないでください。

アジェンダ
5

6
⼈人はどうみるのか
⼈人はどう読むのか
⼈人はどう記憶するのか
⼈人はどう考えるのか
⼈人はどう注⽬目するのか
⼈人はどうすればヤル気になるのか
⼈人は社会的な動物である
⼈人はどう感じるのか
間違わない⼈人はいない
⼈人はどう決断するのか

人はどう見るのか
7
#1

8
#1

9
#1
長方形が見える

10
#1
ストップ戦争
平和今すぐ

11
#1
ストップ戦争
平和今すぐ

12
#1
ストップ戦争
平和今すぐ

13
#1
脳は外界を素早く知覚するために
受け取った情報から、
辻褄の合う世界を構成しようとします。

14
#1
つまり、
形や⾊色を上⼿手に利⽤用すれば、
⾒見え⽅方を操作することが出来ます。

15
#1
例えば、
デザイン分野において、
シグニファイアという概念があります。

16
#1
シグニファイア
【signifier】
知覚可能なデザイン上の⼿手がかり。
つまり、それを⾒見るだけで
何が出来るのかを判断できるということ。

17
#1

18
#1
？

19
#1

20
#1
押せそう！

21
#1
http://akasatana.com

22
#1
http://akasatana.com
押せそう！

23
#1
まとめ
ユーザーが情報を見た目通りに受け取るとは限りません。
希望する捉え方をしてもらえないかもしれません。
シグニファイアを意識したデザインにしましょう。
見ただけで何をするものなのかを判断できる事が理想です。
色や形を変えることで、伝わる情報も変わります。
うまく使うことで意図した情報を発信できます。

人はどう読むのか
24
#2

25
#2
⽂文字というのは
伝達⼿手段の⼀一つです。

26
#2
つまり、
読めたとしても、
伝わらなければ意味がありません。

27
#2
例えば、次の⽂文章は
何について説明しているでしょうか。

28
#2
まず分類します。色で分けるのが一般的ですが、生地や扱い方など
他の特性で分けてもよいでしょう。分け終わったら準備完了です。
この別々に分けたグループごとに処理していくことが大切です。
一度にひとつのグループだけを入れてください。

29
#2
まず
他の
この
一度
？

30
#2

31
#2
洗濯の仕方

32
#2
簡潔な⾒見出しがあれば
⾒見出しを前提に⽂文章を読むことが出来ます。

33
#2
例えば次の⽂文章、

34
#2
ビートしたね！ツービートした！
ファーザーにもビートされたことナッシングなのに！

35
#2
？

36
#2
殴ったね！二度もぶった！
親父にもぶたれたことないのに！

37
#2
⽂文章の難易度は
対象とする読者に合わせましょう。

38
#2
例えば次の⽂文章、

39
#2
アイエエエエ! ニンジャ!? ニンジャナンデ!?

40
#2
そもそも⾒見えにくいのは論外です。

41
#2
まとめ
ユーザーが理解しやすいような
文章構成を心がけましょう。
文章の難易度をユーザーに合わせましょう。
ユーザーが幅広いなら、短くて優しい単語を使いましょう。
十分なコントラストの出せる背景色・文字色を選びましょう。
最も読みやすいのは、白の背景に黒文字です。

人はどう記憶するのか
42
#3

43
#3
サービスをユーザーに使ってもらうには、
サービスに対しユーザーが学習し、
記憶しなければなりません。

44
#3
ダウンロードボタン

45
#3
単純で
別の解釈がされ難い
単純かもしれないが
別の解釈がされそう

46
#3
単純で
別の解釈がされ難い
単純かもしれないが
別の解釈がされそう
記憶の邪魔になる

47
#3
記憶への負担を減らすような
デザインを⼼心がけましょう。

48
#3
昨今のUIデザインガイドラインは
⼈人の記憶への負担を軽くするように
何年もかけて改良されてきたものが多いです。

49
#3
参考にしましょう。

50
#3
ただ、忘れるのが⼈人の常です。

51
#3
ユーザーが忘れることを前提とした
デザインにしましょう。

52
#3
本当に重要な情報ならば
デザインの中に含める形で提供するか、
すぐ⾒見つけられる⽅方法を準備しましょう。

53
#3
まとめ
ユーザーの記憶に負担になるような
デザインは控えましょう。
想起させるより、認識させましょう。
覚えて欲しければ、「習うより慣れろ」です。
ユーザーが忘れることを前提にデザインしましょう。
ユーザーが覚えていることを当てにしてはいけません。

人はどう考えるのか
54
#4

55
#4
⼈人がどう考えるかを理解することは
利⽤用しやすいシステムを設計する際に
⾮非常に重要です。

56
#4
ユーザーは様々な事柄を思考し、
それに伴う⾏行動を起こし、
サービスを利⽤用します。

57
#4
その⾏行動を、
ユーザーに対する負荷である
と考えると、
つまり負荷を最⼩小限に抑えれば
使いやすいサービスと評価されるでしょう。

58
#4
⼈人に対する負荷として、以下の3種類があります。
認知視覚運動

59
#4
認知視覚運動
考えたり、思い出したり、
何かしらの⼼心的な処理を⾏行うこと。

60
#4
認知視覚運動
⽬目で⾒見て知覚すること。
そのまんま。

61
#4
認知視覚運動
ボタンを押したり、タップしたり、
体を動かすこと。

62
#4
これらの負荷によって、⼼心的資源が消費されます。
認知視覚運動

63
#4
そして、⼼心的資源の消費量は以下のようになります。
認知視覚運動> >

64
#4
認知
そして、⼼心的資源の消費量は以下のようになります。
視覚運動> >
つまり、考えたり、思い出させてたりすることが、
⼀一番ユーザーに⼼心的負担を与えます。
ユーザーを悩ませるか、
10回ボタンをタップさせるなら、
10回ボタンをタップさせる⽅方を選びましょう。

65
#4
⼈人は何かモノを使う前には、
それをどのように使うのかを考えて、
⼼心のなかにモデルを作り出します。

66
#4
また、実際にモノを使っているとき、
その使い⽅方が別のモデルとして
脳の中に構築されます。

67
#4
モノに接する前に構築されるモデル
モノに接して構築されるモデル
メンタルモデル
概念モデル

68
#4
この2つが
近ければ近いほど、
使いやすいサービスだと⾔言えます。

69
#4
まとめ
ユーザーの考え方を知ることは、
より良いサービスを作る指針になります。
ユーザーが考えたり思い出したりする場合の負荷は、
心的資源を最も多く要求することを覚えておきましょう。
メンタルモデルと概念モデルを出来るだけ近づけましょう。
ユーザーの調査は、メンタルモデルの調査です。

人はどう注目するのか
70
#5

71
#5
情報は取捨選択されます。

72
#5
デザインした本⼈人には⾃自明でも、
ユーザーは分かっていないかもしれません。
思い込みは禁物です。

73
#5
また、⼈人の注意⼒力の持続時間は
7〜～10分が限度とされています。

74
#5
それ以上の時間が経つと、
対象から興味を失ってしまいます。

75
#5
それ以上集中してほしいなら、
新しい情報に触れさせたり、
休憩を⼊入れたりしてみましょう。

76
#5
まとめ
情報を提供すれば必ず注目されるとは限りません。
注目してほしい情報は、自分で思う以上に目立たせましょう。
人の注意力は長くても7~10分しか持続しません。
視聴映像やチュートリアルの時間は7分を目安にしましょう。

人はどうすれば
ヤル気になるのか
77
#6

78
#6
ヤル気、
つまりユーザーのモチベーションは
重要な要素です。

79
#6
モチベーションを持ってもらうには、
⽬目標を⽤用意するのが⼀一つの⽅方法です。

80
#6
time
motivation
第一目標
目標が近いと
モチベーションが上がります。

81
#6
time
motivation
第一目標
目標を達成すると。。。

82
#6
time
motivation
モチベーションは
下がっていきます。

83
#6
time
motivation
第二目標
段階的な目標が
モチベーションを保ちます。

84
#6
time
motivation
第二目標
目標を達成した後は
離脱率が高いです。

85
#6
⽬目標達成後のユーザーをフォローする
施策を考えましょう。

86
#6
同じユーザーを⽬目標とすると、
お互いを刺激し合い、
モチベーションを持つキッカケになります。

87
#6
ユーザー１
ユーザー２

88
#6
ユーザー１
ユーザー２
競争意欲が
モチベーションになる。

89
#6
ユーザー１
ユーザー２

90
#6
ユーザー１
ユーザー２

91
#6
ユーザー１
ユーザー２
競争相手が多すぎると
モチベーションが落ちるかも

92
#6
まとめ
ユーザーのモチベーションは大事です。
モチベーションをコントロールすることを意識しましょう。
ユーザーを競わせるのは、モチベーション維持に有用です。
ただ、多すぎると逆効果になる可能性があります。
目標を達成した時が、一番離脱率が高いです。
次の目標に繋げる術を準備しましょう。

人は社会的な動物である
93
#7

94
#7
まとめ
人の繋がりの上限は１５０人です。
それ以上の人数になると「弱い繋がり」になります。
オンライン上の交流の多くが非同期的です。
同期的活動には人同士の繋がりを強める力があります。
人が何かをしている所を見る行為には予想外の力があります。
それを見た人に行動を起こさせることが出来ます。

人はどう感じるのか
95
#8

96
#8
⼈人の感情は表情と深く結びついています。

97
#8
感情が変われば表情が変わるのは
当たり前ですが、

98
#8
表情が変わっても感情は変わります。

99
#8
例えば、下の⽂文章を読んでください。
今、あなたは眉をひそめていますね？

100
#8
⾒見にくいモノを⾒見ようとすると、
眉をひそめてしまいます。

101
#8
眉をひそめると、
悲しみや恐れの表情に近づいて、
喜び等の感情を実感しにくくなります。

102
#8
突然ですが、
旅⾏行は好きですか？

103
#8
旅⾏行の計画
旅⾏行中
旅⾏行後の思い出語り

104
#8
旅⾏行の計画
旅⾏行中
旅行を
３段階に分けると、、

105
#8
旅⾏行の計画
旅⾏行中
旅行の前後の方が
楽しかったりします。

106
#8
旅⾏行の計画
旅⾏行中
これはサービスにも
当てはまります。

107
#8
旅⾏行の計画
旅⾏行中
旅行中は実際にサービス
のメインコンテンツに触
れている時間。

108
#8
旅⾏行の計画
旅⾏行中
カードゲームで勝つため
に事前に戦略を考える等、
計画を練る時間。

109
#8
旅⾏行の計画
旅⾏行中
イベントで得た称号を
ウットリ眺める等、達成
感を感じる時間。

110
#8
ユーザーが楽しむのは、
サービスのメインコンテンツ
だけではありません。

111
#8
その前後にも⽬目を向けましょう。

112
#8
まとめ
感情と表情は深く結びついています。
表情を負の方向へ変化させるデザインは控えましょう。
旅行後しばらく経ってからの方が、良い感想が聞けます。
サービスの満足度を聞くなら、２〜３日後が望ましいです。
サービスを楽しめるのはメインコンテンツだけではないです。
その前後の時間にも目を向けましょう。

間違えない人はいない
113
#9

114
#9
⼈人は失敗する⽣生き物です。
間違えない⼈人はいません。

115
#9
デザインする側のエラーは
サービスの動きを想像することで
⾒見つけていきます。

116
#9
想像しましょう。

117
#9
⼤大⼩小様々なエラーが
予想できます。

118
#9
⼤大きなエラーから
対処していきましょう。

119
#9
ただ、全てのエラーを
想定するのは難しいです。

120
#9
その場合、ユーザーテストが有効です。

121
#9
ユーザーテストは、⾝身近な⼈人ではなく
実際のユーザーに近い⼈人が理想です。

122
#9
そこで⾒見つかったエラーは、
実際のユーザーも⾒見つける可能性⼤大です。

123
#9
間違いは必ず起きます。
それはユーザー側も同じです。

124
#9
ユーザーがエラーに直⾯面した時のため、
分かりやすく明快な
エラーメッセージを⽤用意しましょう。

125
#9
良いエラーメッセージの書き方
✓ ユーザーが何をしたのかを告げる
✓ 発⽣生した問題を説明する
✓ 修正⽅方法を指⽰示する
✓ 受動態ではなく能動態を使い、平易な⾔言葉で書く
✓ 例を⽰示す

126
#9
悪い例

127
#9
#402 請求書の⽀支払いが⾏行われる前には、⽀支払いの⽇日付は
請求書の⽇日付より後になっている必要があります。

128
#9
謎のエラーコード

129
#9
長ったらしい説明

130
#9
どこか他人事

131
#9
修正方法が書いてない

132
#9
良い例

133
#9
請求書作成⽇日より⽀支払⽇日のほうが前になっています。
⽇日付を確認して、請求書作成⽇日より⽀支払⽇日が後になるよう、
⼊入⼒力し直してください。

134
#9
発生した問題を簡潔に説明している

135
#9
修正方法を示している

136
#9
どこか親身

137
#9
ユーザー視点で考えましょう。

138
#9
まとめ
人は失敗する生き物です。
出来る限りのエラーを予想して、大きいものから対処しよう。
エラーメッセージはユーザー視点で。
エラーが招く事態を最小限に抑えましょう。
実際のユーザーに近い人にテストプレイしてもらいましょう。
そこで見つかるエラーは実際のユーザーも見つけます。

人はどう決断するのか
139
#10

140
#10
まとめ
人の決断には無意識が深く関わっています。
無意識だからと言って、合理的でないとは限りません。
確信がない時は人任せにしてしまいがちです。
推薦文や評価、レビューに影響されてしまう人がそうです。
選択肢が多すぎると、思考が麻痺してしまいます。
麻痺したユーザーは、選択肢を選べない思考に陥ります。

ありがとうございました
141

インタフェースデザインの心理学まとめ

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)