【読む】インタフェースデザインの心理学❶

備忘録。以前読んでいた本の気になった箇所だけめも。

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針 Susan Weinschenk

第一章 ｜ 人はどう見るのか

＜003：人はパターン認識で物を識別する＞

目と脳が刻々と入っている膨大な情報を素早く理解するのはパターンを上手く利用しているため。たとえ、パターンと呼べるほどのものがなくても、目と脳はパターンを見つけたがる。

★ ★　 ★ ★　 ★ ★ 　★ ★

このように★が並んでいたとき、8つの丸でなく、4対の丸に見えるのは、脳が点と余白の組みをパターンとして認識しているから。

●視覚野には横線、縦線、端、斜め40度といった特定の図形パターンだけに反応する細胞がある。
●人が目の前にあるものを識別するときはジオン（幾何形体）と呼ばれる基本的な立体を基準にしているらしい。
（例えばコーヒーカップなら円柱とカーブした円柱、トランクなら直方体にカーブした円柱、など）
●24個のジオンを組み合わせて三次元の物体を固定しているらしい。

【 Point 】
●本能的にパターンを探すので、できるだけグルーピングや余白によってパターンを使う。
●アイコンはシンプルな絵にすると、ジオンを見分けやすくなり、物を素早く容易に認識される。
●三次元より二次元を使う。目からの情報は二次元で脳に伝わる。
三次元だと認識や理解に手間取ることも。

---------------------------------------------------------------------

＜006：人は過去の経験と予想に基づいて画面を見る＞

横書きの日本語なら、ユーザーは画面を左から右に読む傾向があるが、一番左上から見始める人はいない。ロゴや余白、ナビゲーションバーなど、今関心のある事柄とは関係が薄いことを知っているので、画面の中の方（意味のある情報に）を見る傾向がある。

内容的には本の表紙のところと言いたいところだが、コンテンツエリアの左上って感じか。その上のロゴの金赤ベタが目立っているのもあるのか。まぁでも確かにコンテンツエリアを見る。

●画面を一瞥したあとは、自分の使う言語で標準的な読み方で移動するが、画面上他の場所に、大きな写真（特に顔が写っている）や動き（gifバナーやビデオ）など、注意をひくものがあると、標準的な読み方から逸脱することも。
●サイトを見たりアプリを使うときは、どような情報がどこに表示されるはずだという、あらかじめ構築された「メンタルモデル」に基づいて行動する。amazonでよく検索を使って買い物をする人は、画面がロードされるとすぐに検索フィールドを見る。

【 Point 】
●一番重要な情報（もしくは注目してほしい情報）は画面の上から1/3までの場所か中央に置く。端を見ない傾向にあるから。
●画面やページは普段読むときのパターンで移動できるように。ある作業をするのに、画面上で大幅な移動を繰り返すようなパターンは避ける。

---------------------------------------------------------------------

＜009：人は近くにあるものを同じグループだと思う＞

二つのものが近接していると、人はそれらが関連していると思う。左右に並んでいるとより、結びつきを強く感じる。

【 Point 】
●線や囲みを使って各要素を分離する前に、要素同士の感覚を調整する。それで十分なら、ページの視覚的なノイズを減らせる。
●関連のない要素は感覚を大きくとり、関連のある要素の感覚は詰める。

---------------------------------------------------------------------

＜012：文化によって色の意味が変わる＞

世界のさまざまな地域の人々を対象にデザインする場合は、他の国や地域の文化における色の意味にも配慮画必要。

デビット・マキャンドレスのカラーホイールhttps://informationisbeautiful.net/visualizations/colours-in-cultures/

●色が精神状態に影響を与えることは研究で立証されている。米国では、オレンジ色は刺激が強く落ち着かないきぶんになるり長居をしないことから、ファーストフード店に有効とされている。
●ただし、気分が左右されるほどの効果を得られるのは、その色に囲まれている場合であって、コンピューターの画面にその色がある程度では効果は見込めない。

【 Point 】
●色は見た人が思い浮かべる意味に配慮して慎重に選ぶ。
●自分のデザインと対象となる主な文化圏をいくつか選び、想定外の連想を招かないように、上記掲載の文化のカラーチャートで確認しておこう。