廃れていくことのないUI（心理効果を生かしたUIパターン）を学ぶ


<img src="https://images-na.ssl-images-amazon.com/images/I/51V0xquW8uL._SX258_BO1,204,203,200_.jpg">

今月（2018/8/1）に発売されたばかりの本。
[〜[買わせる]の心理学 消費者の心を動かすデザインの技法61〜](https://www.amazon.co.jp/gp/product/4844367684/ref=oh_aui_detailpage_o04_s00?ie=UTF8&psc=1)

とても興味深くあっという間に読みきれました！すごく学びの多い本でした。
しかも現在ベストセラーになっているようですね。
![スクリーンショット 2018-08-19 23.44.37.png](https://qiita-image-store.s3.amazonaws.com/0/225425/37d9395d-9192-bf2d-99e5-4bd09fc8bbeb.png)
では、今回も例によって読書レビューをしたいと思います。

## 「家に帰るまでが遠足です」の理由って？
学生時代によく先生からこのフレーズを言われていました。当時の私は家につくまでが楽しい時間だとおもいなさいという意味かと思っていたんですが、実はこれ認知心理学で言うテンションリダクションの状態に対する注意喚起なんです。
> テンションリダクション/
Tenshion Reduction Theory
緊張状態が消滅したあとの、注意力が欠落した状態のことを指してテンションリダクションという。遠足の帰りに事故に遭ってしまったりといったことが起こりやすくなる精神状態。

つまり、先生が言いたかったとは家に帰るまで緊張感をもって行動してくださいね。ってことだったんですね（知らなかったw）

で、そのテンションリダクションをUIに活かした事例としてamazonのレコメンド機能です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/225425/d6e78df8-b9a7-67e7-c269-f23945468f2a.png" width="400">
合わせ買いとして上記のように関連のある商品を勧められます。
これは大きな買い物をした時や悩んだ挙げ句に購入を決心した時、この時がまさにテンションリダクションの状態であり、緊張が緩んだこともありじゃあそれも一緒にと購入してもらえる可能性が高いのです。ただし勧めるのは購入したものよりも安価かつ関連性のあるものでなければ効果を発揮できません。

ECサイトなどを担当しているデザイナーが機能提案する際、Amazonを例にとりあげ日本人に馴染みのあるサービスがやっているのでという理由だけでも理解してもらえるかと思いますが、認証心理を引き合いに出して説明したらより説得材料になるのかなと思います。

## アクションボタンの「進む」を右に配置する理由って？
たとえば、ボタンが複数整列した時、次のステップに進むためのボタンは右側に配置するのが通例です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/225425/06df2cf5-3136-083b-897c-763622bb1918.png" width="400">

けれどもその理由を問われたときに、「他のサービスも右側配置なので...」と理論まで説明できなかったりします。

目は脳からつながっている器官の中で唯一露出している器官であり、心理状態が現れやすい部分であると言われています。
目の動きから心理状態を読み取ろうという「視線解析」という研究がされており、人の目線と意識には特徴があるとされています。

> 視線解析
NLP(神経言語プログラミング)の研究によって視線から心理状態を読み取れるというもの。視覚的に情景を思い浮かべているときは上、過去の出来事に意識を向けているときは左といった具合にその時の心理が視線に表れる。

図

<img src="http://kodokoko.com/blog/wp-content/uploads/2016/03/eye-que.png" width="550">
引用：目指せ秀才！コドモの優位感覚を見抜く～NLP:視線解析＋VAKモデル～【子育て科学】

これをユーザビリティの向上に活用すると、過去（記憶）は左、未来（創造）は右に意識が向くというのがわかります。


以上のことから、決定ボタンを右側に配置するのは”視線と心理状態の関係性から導き出された正しい配置”なのです。
ボタンが3つ並ぶようなパターンでも同様のことが言えるのではないでしょうか。
<img src="https://qiita-image-store.s3.amazonaws.com/0/225425/46e1ace2-63aa-121b-1b52-a9b4369a83fc.png" width="550">


## 初めてのお店で「人気メニューはなんですか？」と聞いてしまう理由
初めて来店したお店でメニュー選びに迷ったとき、何を注文すればいいのか悩むときがあります。よくオーダーをとっている店員さんに人気メニューを聞くのもいいですし、お店によっては人気ランキングが用意されていたりしますね。

これを参考にオーダーしちゃうんですが、これを心理学でいうとバンドワゴン効果というそうです。

>バンドワゴン効果/Bandwagon Effect
自分の信念や好みに関わらず、多くの人がやっているから/人気があるからという理由で選択する人間の心理現象。なるべく異を避け、みんなと同じがいいと考える傾向が強い日本人には、特に顕著に現れる。

多くの人が注文しているものなら間違いがないという心理が働くんですね。
「現在●人が閲覧しています」や「予約が●件ありました」といったユーザーの動きをシステムを使って報告することもバンドワゴン効果の一例です。

![スクリーンショット_2018-08-19_21_32_17.png](https://qiita-image-store.s3.amazonaws.com/0/225425/94872c0c-a41f-b142-00a4-4aee23d5d20d.png)


## 貯めたくなるスタンプカードの秘密
私がよく利用しているまつげエクステのお店はLINE@のショップカードがあり、5回来店すると次回500円引き。
<img width="275" alt="IMG_7732.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/225425/ea89564d-1001-ab4a-f5e3-7572820de966.jpeg">

また会社近くのランチのお店の来店ポイントカードも複数持っているんですが、10ポイントで1800円値引きのお店はお得感があるので残り数ポイントまで近づくと次はいつごろ行こうか考え始めます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/225425/0af53389-e3f0-f752-8a12-bdaf7224242b.jpeg" width="300">
※このスタンプカードは2枚目です
これはまさに目標勾配仮説と言えます。

>目標勾配仮説
ゴールに近づくほどモチベーションが上がり積極的に行動するという傾向。心理学者のクラーク・ハルがゴールに餌をおいた迷路でネズミを走らせ、ゴールに近づくほどネズミは早く走ることを発見した。

10ポイントに近づくほど次回の来店日の目安を考え始めるなど目標達成へのモチベーションがアップしている状態はまさにそれです。

目標勾配仮説と組み合わせて自社サービスの様々な機能を利用してもらう仕組みを用意することができたら、サービス全体を理解してもらうきっかけになるのではと思いました。

事業会社のWebデザイナーであると、自分があらゆる機能を知り尽くしてしまっているので当然ユーザーもその機能を知っていると思い込みがちです。先日自社サービスのユーザーへサービスに関してヒアリングさせてもらう機会があったのですが、ヘビーユーザーと言われれるような方でさえも機能を知らなかったor知っていたけどちゃんと理解していなかったことがあり、予想外のことに驚きました。「この機能便利じゃない！」と目を丸くして言われたときは、サービス運営者としてもっと認知してもらえるよう工夫する必要があるなぁと痛感させられました。

DrobboxではTwitterとリンクする、友達へ紹介するなどの小さなタスクを達成することで容量を増やすといったインセンティブを受け取ることができます。ユーザーにとっては容量を無料で増やせるので積極的にやりますが、サービス運営者にとっては使い始めて間もないユーザーに機能を使ってもらいリテンションを引き上げる効果を期待できます。

<img width="500" alt="IMG_7732.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/225425/3e603f7b-c2c1-95d6-89b2-c28f935742eb.png">

インセンティブが用意できる場合はするに越したことはないですが、たとえないとしても思わずコンプリートしたくなるようなUIを工夫することで機能理解を促進させられそうです。

インセンティブあり系はソシャゲがうまくやっているイメージです。

<img width="275" alt="IMG-7602.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/225425/7208164e-bcbc-5e55-2c78-c63cf9cf04b1.jpeg">
例）モンスト

## まとめ
この本では心理学の解説と実際のデザイン例や施策がセットになって紹介されているので、なるほどなぁで終わることなくアイディアを膨らませられると思いました。
紹介したデザインの技法は少ないですが計61もあり、どれも興味深かったです。
個人的には下記のデザイン/法則も勉強になりました。

- 色覚異常を意識したデザイン
- 購買行動モデルSIPS
- ザイアンスの法則
- フォールスコンセンサス
- ディドロ効果

Webサイトを作るにあたってのルールやセオリーは時代の流れによってすぐに変化し技術が廃れていきますが、認知心理学は根本的には大きく変化することはありません。認知心理学を拠り所にWebのUIを考えていけるWebデザイナーとしてもっと成長していきたいです。

## 参考サイト
- [目指せ秀才！コドモの優位感覚を見抜く～NLP:視線解析＋VAKモデル～【子育て科学】](http://kodokoko.com/2015/10/21/shisenkaiseki/)
- [amazonの書籍](https://www.amazon.co.jp/gp/product/4844367684/ref=oh_aui_detailpage_o04_s00?ie=UTF8&psc=1)