『続・インタフェースデザインの心理学』は研究データに基づいた心理学だった

<img src="https://images-na.ssl-images-amazon.com/images/I/51MAdqdFLwL._SX258_BO1,204,203,200_.jpg">
オライリーから出版された『続・インタフェースデザインの心理学』を読んだので軽くレビュー。
続とついている通り、2冊目です。この本は2012/7/14に発売された『インタフェースデザインの心理学』の続編で、2016/8/5に発売されました。

発売されて2年弱経過した2018年4月に読んだので掲載されている研究データが若干古くなってるという懸念点はあるものの、総論としては読んでためになったと思っているので、新たな発見や業務に取り入れられそうな点といった観点でまとめていきたいと思います。（自分の備忘録でとしても...）

## スマホが要らなくなった時代にも使える本


この本はいわゆる、アプリやWebのUIに特化した本ではなく、

- 『人間はどう情報を読み理解するのか』
- 『人間は他人や技術とどう関わり合うか』
- 『世代、地域、性別はデザインにどう影響するか』 

といったマクロ的な視点で述べられており、理由付けとなる様々な研究データを提示しながら解説してくれています。
現在、事業会社のWebデザイナーである私にとって、WebのUIを考慮するにあたり**人間という原点に立ち返って**デザインするといった、視野を広げてくれるような本でした。

さらにはWebだけにとどまらず新しいインタフェースをデザインする際にも大いに役立つ知識かと思います。
科学技術が急速に進歩する現代において新たなテクノロジーが誕生したとき、新しいインタフェースのデザインを担当することがあるかもしれません。
たとえばVR。

- 手のひらに映像が投影されてスマホと同じように操作ができる
- コンビニの冷蔵庫を開けると商品にオーバーラップする形で商品名や価格などが表示される

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tamakino/20180423/20180423211225.png" width="450">

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tamakino/20180423/20180423211222.jpg" width="450">


いつ、どのようなデザインをするのかは未知数ではありますが、その必要性がでてきたときにもこの本の知見を生かしてデザインをすることができるのではないかと個人的に思っています。

それでは個人的に気になった内容を紹介していきます。

### <font color="Salmon">◆人は曲線を好む</font>
角が立っている四角形のデザインよりも円形を好む傾向があるのはなんとなく理解していますが、なぜ？と問われると説明するのが難しかったりします。
マサチューセッツ総合病院の研究チームによるとロゴやソファーの比較画像で角張っている画像より丸みを帯びている画像の方が好まれたという論文が発表されています。この傾向は脳のスキャンでも明らかになっているとのことです。

### <font color="Salmon">◆中心視野で見るべきものは周辺視野で決めている</font>
> ぱっと視界に入ってくるもので無意識にやっていること。それは「中心視野」と「周辺視野」という２つの「視野」があり、それを同時に動かして（マルチタスクして）いるのです（要約）

たしかに言われてみればそんな気がする...と思いますが、実際に脳の視覚野の処理量の割合をみても中心視野と周辺視野を同時にかつ高速に処理できるようになっているそうです。
となると、周辺視野にも配慮したWebページを設計することが重要になってきます。ページ内の情報設計やマージンの扱い方でユーザーに伝えるべきことを適切に伝えて、周辺視野で情報を補完できるような構造を意識したいです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/225425/e4905f63-4f06-d609-814c-8e5646cc2feb.png" width="650">
たとえば[コチラ](http://mediashop.daimaru-matsuzakaya.jp/hajimekata/)のサイト。
サービス名称をセンターに配置して両サイドにイメージ画像をスクロールさせるようなUIになっています。
まず目に入ってくるのは「はじめかた研究所」という名称ですが、なにを？の部分を周辺視野から情報伝達できるような設計になっています。
このような周辺視野を十分活用したサイトを提案する場合、根拠となる研究データを提示しながら説明したらより説得力が増すかと思います。


### <font color="Salmon">◆危険を冒す可能性がある意思決定に際して男女で異なる反応をする</font>
これちょっとびっくりしたんですが、ストレス下で瞬時に決定をしなければいけない場合、安全牌な方を選択するのは女性、対してチャレンジングな方を選択するのは男性という調査結果がでたそうです。あくまでも全員がそうではないと思いますが、そういった傾向があるということでしょう。
デザインに取り入れるとしたら、例えば商品の宣伝LPを作るときでしょうか。
メインターゲットの性別が男性に寄っているのであれば、リスクが高くても大きな収穫の可能性がある選択肢を提示し、女性ならばリスクの低い選択肢を見せるようなデザインにしてあげると購買意欲が高まりそうです。

### <font color="Salmon">◆自信が決断の引き金になる</font>
私はランチメニューで何を注文するのか結構迷うタイプです。前日何を食べたのかを思い出してなるべくかぶらないことを考慮しつつ、料理の味をイメージしながら検討します。即決できる場合もあるし、2~3分悩む日もある。一度決断したものの、同伴している人が何を頼むかによってまた悩んだりもします。

決断をするまでにかかる時間の大小は重要な決定事項か否かで変わってくるのでしょうか（ランチメニューは大して重要ではない）
この本によると自信がもてるタイミングになったときに決断するので、決定事項の大小ではないと述べられています。
「決定に要する時間が確信に与える影響」について行った研究では、
> 時間が経過し決定がされないと、脳のネットワークが難しい問題だと判断。決定が難しいものだとなると、良い決定ができるかどうか、決定する準備ができているのか否かについての意思決定ネットワークの自信が減っていきます。

こうなると余計に時間がかかり、また自信がなくなっていき...という悪循環になりますね。
なので意思決定を促したい場合は、時間の経過に意識を向ける必要があります。

### 「登録」や「購入」ボタンに至るまでの情報設計
ユーザーの意思決定を促すような場面でいうと、「登録」や「購入」などが身近な決定事項でしょうか。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/225425/3d13c9b4-5612-05ad-dea5-8a20df59f78c.png)

”自信が決断の引き金になる”ならば、この「買い物かごに入れる」ボタンを押す前にユーザーの確信をもたせて、決断までの時間を短くできるよう工夫しなければいけません。
この本が述べていたポイントは以下の2点

- 情報を小さなチャンクにまとめることで、意思決定を促進
- 証拠を集めたことを示す視覚的なフィードバックの提示

情報を小さなチャンクにまとめる...というのはレストラン予約サイトでいうと、店舗情報、口コミ、写真などのひとまとまりで、証拠を集めたことを示す視覚的なフィードバックはたとえば、見終えた項目がdisabled状態になっているとかでしょうか（集めた情報の種類に関するチェックリストの提示でも伝わると思います）

もちろん証拠の量でも決断に繋がる自信にはなりますが、時間かけさせてしまうと決断が遅れてしまうので、そこのバランスを上手く調整することが重要ですね。

## あとがき


今回、4つの指針を紹介しましたがその他に96個もあります。
どれも新しい気付きを与えてくれるものだったので、Webデザイナーとして一度目を通してみるのもいいと思います。

## 参考URL
- [続・インタフェースデザインの心理学](https://www.oreilly.co.jp/books/9784873117713/)
- [「5年後、誰もスマホを使わなくなっている」byジャック・マー](http://tamakino.hatenablog.com/entry/2018/04/24/080000)