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

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

Design

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

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