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

Post on 15-Jul-2015

2.166 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

All Copyrights reserved by akihiro_0228, 2015

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

2015/03/26 - 社内勉強会 @akihiro_0228

100 Things Every Designer Needs to Know About People

All Copyrights reserved by akihiro_0228, 2015

導入

2

All Copyrights reserved by akihiro_0228, 2015

3

o'reilly  japan  から出版されている  

インターフェースデザインの⼼心理学  

という本のまとめになります。

All Copyrights reserved by akihiro_0228, 2015

4

10章100Tipsの内容を、  

独断と偏⾒見でまとめています。  

過度な期待はしないでください。

All Copyrights reserved by akihiro_0228, 2015

アジェンダ

5

All Copyrights reserved by akihiro_0228, 2015

6

⼈人はどうみるのか  

⼈人はどう読むのか  

⼈人はどう記憶するのか  

⼈人はどう考えるのか  

⼈人はどう注⽬目するのか

⼈人はどうすればヤル気になるのか  

⼈人は社会的な動物である  

⼈人はどう感じるのか  

間違わない⼈人はいない  

⼈人はどう決断するのか

All Copyrights reserved by akihiro_0228, 2015

人はどう見るのか

7#1

All Copyrights reserved by akihiro_0228, 2015

8#1

All Copyrights reserved by akihiro_0228, 2015

9#1

長方形が見える

All Copyrights reserved by akihiro_0228, 2015

10#1

ストップ 戦争

平和 今すぐ

All Copyrights reserved by akihiro_0228, 2015

11#1

ストップ 戦争

平和 今すぐ

All Copyrights reserved by akihiro_0228, 2015

12#1

ストップ 戦争

平和 今すぐ

All Copyrights reserved by akihiro_0228, 2015

13#1

脳は外界を素早く知覚するために  

受け取った情報から、  

辻褄の合う世界を構成しようとします。

All Copyrights reserved by akihiro_0228, 2015

14#1

つまり、  

形や⾊色を上⼿手に利⽤用すれば、  

⾒見え⽅方を操作することが出来ます。

All Copyrights reserved by akihiro_0228, 2015

15#1

例えば、  

デザイン分野において、  

シグニファイアという概念があります。

All Copyrights reserved by akihiro_0228, 2015

16#1

シグニファイア 【signifier】

知覚可能なデザイン上の⼿手がかり。  

つまり、それを⾒見るだけで  

何が出来るのかを判断できるということ。

All Copyrights reserved by akihiro_0228, 2015

17#1

All Copyrights reserved by akihiro_0228, 2015

18#1

All Copyrights reserved by akihiro_0228, 2015

19#1

All Copyrights reserved by akihiro_0228, 2015

20#1

押せそう!

All Copyrights reserved by akihiro_0228, 2015

21#1

http://akasatana.com

All Copyrights reserved by akihiro_0228, 2015

22#1

http://akasatana.com

押せそう!

All Copyrights reserved by akihiro_0228, 2015

23#1

まとめユーザーが情報を見た目通りに受け取るとは限りません。

希望する捉え方をしてもらえないかもしれません。

シグニファイアを意識したデザインにしましょう。

見ただけで何をするものなのかを判断できる事が理想です。

色や形を変えることで、伝わる情報も変わります。

うまく使うことで意図した情報を発信できます。

All Copyrights reserved by akihiro_0228, 2015

人はどう読むのか

24#2

All Copyrights reserved by akihiro_0228, 2015

25#2

⽂文字というのは  

伝達⼿手段の⼀一つです。

All Copyrights reserved by akihiro_0228, 2015

26#2

つまり、  

読めたとしても、  

伝わらなければ意味がありません。

All Copyrights reserved by akihiro_0228, 2015

27#2

例えば、次の⽂文章は  

何について説明しているでしょうか。

All Copyrights reserved by akihiro_0228, 2015

28#2

まず分類します。色で分けるのが一般的ですが、生地や扱い方など

他の特性で分けてもよいでしょう。分け終わったら準備完了です。

この別々に分けたグループごとに処理していくことが大切です。

一度にひとつのグループだけを入れてください。

All Copyrights reserved by akihiro_0228, 2015

29#2

まず

他の

この

一度

All Copyrights reserved by akihiro_0228, 2015

30#2

まず分類します。色で分けるのが一般的ですが、生地や扱い方など

他の特性で分けてもよいでしょう。分け終わったら準備完了です。

この別々に分けたグループごとに処理していくことが大切です。

一度にひとつのグループだけを入れてください。

All Copyrights reserved by akihiro_0228, 2015

31#2

まず分類します。色で分けるのが一般的ですが、生地や扱い方など

他の特性で分けてもよいでしょう。分け終わったら準備完了です。

この別々に分けたグループごとに処理していくことが大切です。

一度にひとつのグループだけを入れてください。

洗濯の仕方

All Copyrights reserved by akihiro_0228, 2015

32#2

簡潔な⾒見出しがあれば  

⾒見出しを前提に⽂文章を読むことが出来ます。

All Copyrights reserved by akihiro_0228, 2015

33#2

例えば次の⽂文章、

All Copyrights reserved by akihiro_0228, 2015

34#2

ビートしたね!ツービートした!

ファーザーにもビートされたことナッシングなのに!

All Copyrights reserved by akihiro_0228, 2015

35#2

ビートしたね!ツービートした!

ファーザーにもビートされたことナッシングなのに!?

All Copyrights reserved by akihiro_0228, 2015

36#2

ビートしたね!ツービートした!

ファーザーにもビートされたことナッシングなのに!

殴ったね!二度もぶった!

親父にもぶたれたことないのに!

All Copyrights reserved by akihiro_0228, 2015

37#2

⽂文章の難易度は  

対象とする読者に合わせましょう。

All Copyrights reserved by akihiro_0228, 2015

38#2

例えば次の⽂文章、

All Copyrights reserved by akihiro_0228, 2015

39#2

アイエエエエ! ニンジャ!? ニンジャナンデ!?

All Copyrights reserved by akihiro_0228, 2015

40#2

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

All Copyrights reserved by akihiro_0228, 2015

41#2

まとめユーザーが理解しやすいような

文章構成を心がけましょう。

文章の難易度をユーザーに合わせましょう。

ユーザーが幅広いなら、短くて優しい単語を使いましょう。

十分なコントラストの出せる背景色・文字色を選びましょう。

最も読みやすいのは、白の背景に黒文字です。

All Copyrights reserved by akihiro_0228, 2015

人はどう記憶するのか

42#3

All Copyrights reserved by akihiro_0228, 2015

43#3

サービスをユーザーに使ってもらうには、  

サービスに対しユーザーが学習し、  

記憶しなければなりません。

All Copyrights reserved by akihiro_0228, 2015

44#3

ダウンロードボタン

All Copyrights reserved by akihiro_0228, 2015

45#3

単純で

別の解釈がされ難い

単純かもしれないが

別の解釈がされそう

ダウンロードボタン

All Copyrights reserved by akihiro_0228, 2015

46#3

単純で

別の解釈がされ難い

単純かもしれないが

別の解釈がされそう

ダウンロードボタン

記憶の邪魔になる

All Copyrights reserved by akihiro_0228, 2015

47#3

記憶への負担を減らすような  

デザインを⼼心がけましょう。

All Copyrights reserved by akihiro_0228, 2015

48#3

昨今のUIデザインガイドラインは  

⼈人の記憶への負担を軽くするように  

何年もかけて改良されてきたものが多いです。

All Copyrights reserved by akihiro_0228, 2015

49#3

参考にしましょう。

All Copyrights reserved by akihiro_0228, 2015

50#3

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

All Copyrights reserved by akihiro_0228, 2015

51#3

ユーザーが忘れることを前提とした  

デザインにしましょう。

All Copyrights reserved by akihiro_0228, 2015

52#3

本当に重要な情報ならば  

デザインの中に含める形で提供するか、  

すぐ⾒見つけられる⽅方法を準備しましょう。

All Copyrights reserved by akihiro_0228, 2015

53#3

まとめユーザーの記憶に負担になるような

デザインは控えましょう。

想起させるより、認識させましょう。

覚えて欲しければ、「習うより慣れろ」です。

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

ユーザーが覚えていることを当てにしてはいけません。

All Copyrights reserved by akihiro_0228, 2015

人はどう考えるのか

54#4

All Copyrights reserved by akihiro_0228, 2015

55#4

⼈人がどう考えるかを理解することは  

利⽤用しやすいシステムを設計する際に  

⾮非常に重要です。

All Copyrights reserved by akihiro_0228, 2015

56#4

ユーザーは様々な事柄を思考し、  

それに伴う⾏行動を起こし、  

サービスを利⽤用します。

All Copyrights reserved by akihiro_0228, 2015

57#4

その⾏行動を、  

ユーザーに対する負荷である  

と考えると、  

つまり負荷を最⼩小限に抑えれば  

使いやすいサービスと評価されるでしょう。

All Copyrights reserved by akihiro_0228, 2015

58#4

⼈人に対する負荷として、以下の3種類があります。

認知 視覚 運動

All Copyrights reserved by akihiro_0228, 2015

59#4

⼈人に対する負荷として、以下の3種類があります。

認知 視覚 運動考えたり、思い出したり、  

何かしらの⼼心的な処理を⾏行うこと。

All Copyrights reserved by akihiro_0228, 2015

60#4

⼈人に対する負荷として、以下の3種類があります。

認知 視覚 運動⽬目で⾒見て知覚すること。  

そのまんま。

All Copyrights reserved by akihiro_0228, 2015

61#4

⼈人に対する負荷として、以下の3種類があります。

認知 視覚 運動ボタンを押したり、タップしたり、  

体を動かすこと。

All Copyrights reserved by akihiro_0228, 2015

62#4

これらの負荷によって、⼼心的資源が消費されます。

認知 視覚 運動

All Copyrights reserved by akihiro_0228, 2015

63#4

そして、⼼心的資源の消費量は以下のようになります。

認知 視覚 運動> >

All Copyrights reserved by akihiro_0228, 2015

64#4

認知

そして、⼼心的資源の消費量は以下のようになります。

視覚 運動> >つまり、考えたり、思い出させてたりすることが、  

⼀一番ユーザーに⼼心的負担を与えます。

ユーザーを悩ませるか、  

10回ボタンをタップさせるなら、  

10回ボタンをタップさせる⽅方を選びましょう。

All Copyrights reserved by akihiro_0228, 2015

65#4

⼈人は何かモノを使う前には、  

それをどのように使うのかを考えて、  

⼼心のなかにモデルを作り出します。

All Copyrights reserved by akihiro_0228, 2015

66#4

また、実際にモノを使っているとき、  

その使い⽅方が別のモデルとして  

脳の中に構築されます。

All Copyrights reserved by akihiro_0228, 2015

67#4

モノに接する前に構築されるモデル

モノに接して構築されるモデル

メンタルモデル

概念モデル

All Copyrights reserved by akihiro_0228, 2015

68#4

この2つが  

近ければ近いほど、  

使いやすいサービスだと⾔言えます。

All Copyrights reserved by akihiro_0228, 2015

69#4

まとめユーザーの考え方を知ることは、

より良いサービスを作る指針になります。

ユーザーが考えたり思い出したりする場合の負荷は、

心的資源を最も多く要求することを覚えておきましょう。

メンタルモデルと概念モデルを出来るだけ近づけましょう。

ユーザーの調査は、メンタルモデルの調査です。

All Copyrights reserved by akihiro_0228, 2015

人はどう注目するのか

70#5

All Copyrights reserved by akihiro_0228, 2015

71#5

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

All Copyrights reserved by akihiro_0228, 2015

72#5

デザインした本⼈人には⾃自明でも、  

ユーザーは分かっていないかもしれません。  

思い込みは禁物です。

All Copyrights reserved by akihiro_0228, 2015

73#5

また、⼈人の注意⼒力の持続時間は  

7〜~10分が限度とされています。

All Copyrights reserved by akihiro_0228, 2015

74#5

それ以上の時間が経つと、  

対象から興味を失ってしまいます。

All Copyrights reserved by akihiro_0228, 2015

75#5

それ以上集中してほしいなら、  

新しい情報に触れさせたり、  

休憩を⼊入れたりしてみましょう。

All Copyrights reserved by akihiro_0228, 2015

76#5

まとめ情報を提供すれば必ず注目されるとは限りません。

注目してほしい情報は、自分で思う以上に目立たせましょう。

人の注意力は長くても7~10分しか持続しません。

視聴映像やチュートリアルの時間は7分を目安にしましょう。

All Copyrights reserved by akihiro_0228, 2015

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

77#6

All Copyrights reserved by akihiro_0228, 2015

78#6

ヤル気、  

つまりユーザーのモチベーションは  

重要な要素です。

All Copyrights reserved by akihiro_0228, 2015

79#6

モチベーションを持ってもらうには、  

⽬目標を⽤用意するのが⼀一つの⽅方法です。

All Copyrights reserved by akihiro_0228, 2015

80#6

time

motivation

第一目標

目標が近いと

モチベーションが上がります。

All Copyrights reserved by akihiro_0228, 2015

81#6

time

motivation

第一目標

目標を達成すると。。。

All Copyrights reserved by akihiro_0228, 2015

82#6

time

motivation

モチベーションは

下がっていきます。

All Copyrights reserved by akihiro_0228, 2015

83#6

time

motivation

第二目標

段階的な目標が

モチベーションを保ちます。

All Copyrights reserved by akihiro_0228, 2015

84#6

time

motivation

第二目標

目標を達成した後は

離脱率が高いです。

All Copyrights reserved by akihiro_0228, 2015

85#6

⽬目標達成後のユーザーをフォローする  

施策を考えましょう。

All Copyrights reserved by akihiro_0228, 2015

86#6

同じユーザーを⽬目標とすると、  

お互いを刺激し合い、  

モチベーションを持つキッカケになります。

All Copyrights reserved by akihiro_0228, 2015

87#6

ユーザー 1

ユーザー 2

All Copyrights reserved by akihiro_0228, 2015

88#6

ユーザー 1

ユーザー 2

競争意欲が

モチベーションになる。

All Copyrights reserved by akihiro_0228, 2015

89#6

ユーザー 1

ユーザー 2

All Copyrights reserved by akihiro_0228, 2015

90#6

ユーザー 1

ユーザー 2

All Copyrights reserved by akihiro_0228, 2015

91#6

ユーザー 1

ユーザー 2

競争相手が多すぎると

モチベーションが落ちるかも

All Copyrights reserved by akihiro_0228, 2015

92#6

まとめユーザーのモチベーションは大事です。

モチベーションをコントロールすることを意識しましょう。

ユーザーを競わせるのは、モチベーション維持に有用です。

ただ、多すぎると逆効果になる可能性があります。

目標を達成した時が、一番離脱率が高いです。

次の目標に繋げる術を準備しましょう。

All Copyrights reserved by akihiro_0228, 2015

人は社会的な動物である

93#7

All Copyrights reserved by akihiro_0228, 2015

94#7

まとめ人の繋がりの上限は150人です。

それ以上の人数になると「弱い繋がり」になります。

オンライン上の交流の多くが非同期的です。

同期的活動には人同士の繋がりを強める力があります。

人が何かをしている所を見る行為には予想外の力があります。

それを見た人に行動を起こさせることが出来ます。

All Copyrights reserved by akihiro_0228, 2015

人はどう感じるのか

95#8

All Copyrights reserved by akihiro_0228, 2015

96#8

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

All Copyrights reserved by akihiro_0228, 2015

97#8

感情が変われば表情が変わるのは  

当たり前ですが、

All Copyrights reserved by akihiro_0228, 2015

98#8

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

All Copyrights reserved by akihiro_0228, 2015

99#8

例えば、下の⽂文章を読んでください。

今、あなたは眉をひそめていますね?

All Copyrights reserved by akihiro_0228, 2015

100#8

⾒見にくいモノを⾒見ようとすると、  

眉をひそめてしまいます。

All Copyrights reserved by akihiro_0228, 2015

101#8

眉をひそめると、  

悲しみや恐れの表情に近づいて、  

喜び等の感情を実感しにくくなります。

All Copyrights reserved by akihiro_0228, 2015

102#8

突然ですが、  

旅⾏行は好きですか?

All Copyrights reserved by akihiro_0228, 2015

103#8

旅⾏行の計画

旅⾏行中

旅⾏行後の思い出語り

All Copyrights reserved by akihiro_0228, 2015

104#8

旅⾏行の計画

旅⾏行中

旅⾏行後の思い出語り

旅行を

3段階に分けると、、

All Copyrights reserved by akihiro_0228, 2015

105#8

旅⾏行の計画

旅⾏行中

旅⾏行後の思い出語り

旅行の前後の方が

楽しかったりします。

All Copyrights reserved by akihiro_0228, 2015

106#8

旅⾏行の計画

旅⾏行中

旅⾏行後の思い出語り

これはサービスにも

当てはまります。

All Copyrights reserved by akihiro_0228, 2015

107#8

旅⾏行の計画

旅⾏行中

旅⾏行後の思い出語り

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

All Copyrights reserved by akihiro_0228, 2015

108#8

旅⾏行の計画

旅⾏行中

旅⾏行後の思い出語り

カードゲームで勝つために事前に戦略を考える等、計画を練る時間。

All Copyrights reserved by akihiro_0228, 2015

109#8

旅⾏行の計画

旅⾏行中

旅⾏行後の思い出語り

イベントで得た称号をウットリ眺める等、達成感を感じる時間。

All Copyrights reserved by akihiro_0228, 2015

110#8

ユーザーが楽しむのは、  

サービスのメインコンテンツ  

だけではありません。

All Copyrights reserved by akihiro_0228, 2015

111#8

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

All Copyrights reserved by akihiro_0228, 2015

112#8

まとめ感情と表情は深く結びついています。

表情を負の方向へ変化させるデザインは控えましょう。

旅行後しばらく経ってからの方が、良い感想が聞けます。

サービスの満足度を聞くなら、2〜3日後が望ましいです。

サービスを楽しめるのはメインコンテンツだけではないです。

その前後の時間にも目を向けましょう。

All Copyrights reserved by akihiro_0228, 2015

間違えない人はいない

113#9

All Copyrights reserved by akihiro_0228, 2015

114#9

⼈人は失敗する⽣生き物です。  

間違えない⼈人はいません。

All Copyrights reserved by akihiro_0228, 2015

115#9

デザインする側のエラーは  

サービスの動きを想像することで  

⾒見つけていきます。

All Copyrights reserved by akihiro_0228, 2015

116#9

想像しましょう。

All Copyrights reserved by akihiro_0228, 2015

117#9

⼤大⼩小様々なエラーが  

予想できます。

All Copyrights reserved by akihiro_0228, 2015

118#9

⼤大きなエラーから  

対処していきましょう。

All Copyrights reserved by akihiro_0228, 2015

119#9

ただ、全てのエラーを  

想定するのは難しいです。

All Copyrights reserved by akihiro_0228, 2015

120#9

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

All Copyrights reserved by akihiro_0228, 2015

121#9

ユーザーテストは、⾝身近な⼈人ではなく  

実際のユーザーに近い⼈人が理想です。

All Copyrights reserved by akihiro_0228, 2015

122#9

そこで⾒見つかったエラーは、  

実際のユーザーも⾒見つける可能性⼤大です。

All Copyrights reserved by akihiro_0228, 2015

123#9

間違いは必ず起きます。  

それはユーザー側も同じです。

All Copyrights reserved by akihiro_0228, 2015

124#9

ユーザーがエラーに直⾯面した時のため、  

分かりやすく明快な  

エラーメッセージを⽤用意しましょう。

All Copyrights reserved by akihiro_0228, 2015

125#9

良いエラーメッセージの書き方

✓ ユーザーが何をしたのかを告げる  

✓ 発⽣生した問題を説明する  

✓ 修正⽅方法を指⽰示する  

✓ 受動態ではなく能動態を使い、平易な⾔言葉で書く  

✓ 例を⽰示す

All Copyrights reserved by akihiro_0228, 2015

126#9

悪い例

All Copyrights reserved by akihiro_0228, 2015

127#9

#402  請求書の⽀支払いが⾏行われる前には、⽀支払いの⽇日付は  

請求書の⽇日付より後になっている必要があります。

All Copyrights reserved by akihiro_0228, 2015

128#9

#402  請求書の⽀支払いが⾏行われる前には、⽀支払いの⽇日付は  

請求書の⽇日付より後になっている必要があります。

謎のエラーコード

All Copyrights reserved by akihiro_0228, 2015

129#9

#402  請求書の⽀支払いが⾏行われる前には、⽀支払いの⽇日付は  

請求書の⽇日付より後になっている必要があります。

長ったらしい説明

All Copyrights reserved by akihiro_0228, 2015

130#9

#402  請求書の⽀支払いが⾏行われる前には、⽀支払いの⽇日付は  

請求書の⽇日付より後になっている必要があります。

どこか他人事

All Copyrights reserved by akihiro_0228, 2015

131#9

#402  請求書の⽀支払いが⾏行われる前には、⽀支払いの⽇日付は  

請求書の⽇日付より後になっている必要があります。

修正方法が書いてない

All Copyrights reserved by akihiro_0228, 2015

132#9

良い例

All Copyrights reserved by akihiro_0228, 2015

133#9

請求書作成⽇日より⽀支払⽇日のほうが前になっています。  

⽇日付を確認して、請求書作成⽇日より⽀支払⽇日が後になるよう、  

⼊入⼒力し直してください。

All Copyrights reserved by akihiro_0228, 2015

134#9

請求書作成⽇日より⽀支払⽇日のほうが前になっています。  

⽇日付を確認して、請求書作成⽇日より⽀支払⽇日が後になるよう、  

⼊入⼒力し直してください。

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

All Copyrights reserved by akihiro_0228, 2015

135#9

請求書作成⽇日より⽀支払⽇日のほうが前になっています。  

⽇日付を確認して、請求書作成⽇日より⽀支払⽇日が後になるよう、  

⼊入⼒力し直してください。

修正方法を示している

All Copyrights reserved by akihiro_0228, 2015

136#9

請求書作成⽇日より⽀支払⽇日のほうが前になっています。  

⽇日付を確認して、請求書作成⽇日より⽀支払⽇日が後になるよう、  

⼊入⼒力し直してください。

どこか親身

All Copyrights reserved by akihiro_0228, 2015

137#9

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

All Copyrights reserved by akihiro_0228, 2015

138#9

まとめ人は失敗する生き物です。

出来る限りのエラーを予想して、大きいものから対処しよう。

エラーメッセージはユーザー視点で。

エラーが招く事態を最小限に抑えましょう。

実際のユーザーに近い人にテストプレイしてもらいましょう。

そこで見つかるエラーは実際のユーザーも見つけます。

All Copyrights reserved by akihiro_0228, 2015

人はどう決断するのか

139#10

All Copyrights reserved by akihiro_0228, 2015

140#10

まとめ人の決断には無意識が深く関わっています。

無意識だからと言って、合理的でないとは限りません。

確信がない時は人任せにしてしまいがちです。

推薦文や評価、レビューに影響されてしまう人がそうです。

選択肢が多すぎると、思考が麻痺してしまいます。

麻痺したユーザーは、選択肢を選べない思考に陥ります。

All Copyrights reserved by akihiro_0228, 2015

ありがとうございました

141

top related