Warning: reset() expects parameter 1 to be array, boolean given in /home/users/2/mods.jp-makoto-tanaka/web/wordpress/wp-content/themes/xeory_base/lib/functions/head.php on line 143
このエントリーをはてなブックマークに追加

読了: 約 3 分

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

最近、心理学からのデザインへのアプローチ方法を勉強しているのでそちらを少し纏めていきます。
認知科学や心理学というところからインターフェースを創っていくという所、最近では人間中心設計などともいわれ、
アート的に創るのではなく、しっかりユーザーに使ってもらえる根拠のあるデザインをして、使って頂きましょうというものです。
少し長いので、10章に分けてご紹介します。


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

インターフェースデザインの心理学を読んだメモ

下記書籍の構成

読んだ箇所で気になるところをピックアップして、そこから広げていきます。

1章 人はどう見えるのか

人は見た目が9割なんて本が一時期売れたことがありましたが、
脳は約半分が目から入ってくる情報の処理をしている担当していると言われているそうです。

画面上に点滅するものがあると、なぜ気になるのか

対象のあらましを掴むのに、周辺視野が使われる。
ウェブページで広告が点滅していると気になってしまうのがこれによるもの。

※周辺視野:視野(目で見える範囲)=中心視野と周辺視野があり、中心視野は対象を直視して詳細に見るときに使う領域、
周辺視野は視野のそれ以外の領域、つまり、見えてはいるものの直視してはいない範囲のこと。

ポイント

・コンピュータの画面を見るときは周辺視野を使う。それによって得た情報に基づいて、ページの概要を掴む
・周辺に配置する情報によって、ページとサイトの狙いを明確に伝えられるようにしたほうが良い。
・画面の特定の部分に注目してほしいとき、点滅するものや動画を周辺視野に置かない。

人はパターン認識で物を識別する

ポイント

・人は本能的にパターンを探すので、パターンをできるだけ使う。グループ化や空白によってパターンを作る
・アイコンはシンプルな図形の組み合わせに。そのものを素早く容易に認識してもらえる。
・三次元より二次元のもの。目から入ってきた情報は二次元の形で脳につたえられる。

人は過去の経験と予想に基づいて行動する

ポイント

・一番重要な情報は画面の上から1/3までか、画面中央に
・重要なことは端におかない。
・画面やページは普段読むときのパターンで移動できるようにデザインする。
※amazonの検索等がそれに該当する。まず検索する習慣ができている。

人は手がかりを探す

ポイント

・デザインをするときにはアフォーダンスに配慮する。手がかりを示せば、閲覧者がその行動をとる確率が上がる
※アフォーダンス:環境内に存在する取り得る行動の全て

・オブジェクトを選択したとき、アクティブになっているときには陰影で示す。
⇒最近は平面のデザインが多く、使われなくなってきている。

・不適切なアフォーダンス・キューは使わないように注意
・スマートフォンやタブレットなどタッチ式の危機を対象にデザインするときは、
ポインタを対象の上にもっていったときだけ現れる手がかりは使わないように
CSSのcursor:pointerなどのことですね。

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

ポイント

・1つのグループだと認識してほしい場合は近くに配置
・線や囲みを使って各要素の分離やグループ化をする前に、まずは要素同士の間隔を調整する。ページ上の視覚的なノイズを減らす

文化によって色の意味が変わる

ポイント

・自分のデザインの対象となる主な文化圏をいくつか選び、想定外の連想を招かないように、
InformationisBeautiful.netに記載されている文化のカラーチャートで確認

少し長くなりましたが、少しずつ追記していきます。

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'