Webデザイン

UI/UXデザイナーが知っておくべき心理学の原則

心理学がデザインに大きく関わってる理由がここにあります。

Mako Mizuno

英語記事を翻訳し紹介しています。元の記事は読みたい場合は下記のリンクを確認ください。 The Psychology Principles Every UI/UX Designer Needs to Know

心理学は、アプリのユーザーエクスペリエンス(UX)の大部分に使われています。私たちのデザインがどうユーザーに捉えられているかを理解することで、デザインの完成度を高め、アプリをユーザーの目的のためにもっと効果的にすることができます。 ユーザの認識を知るために、私が考えるもっとも重要なデザイン原則と、実際よく目にする実例を踏まえながら紹介したいと思います。まずはフォン・レストルフ効果から始めましょう。

フォン・レストルフ効果

孤立効果としてもよく知られているフォン・レストルフ効果は、似たような物体が多数あった場合、他と異なった物体が記憶に残りやすい効果です。

何か思い当たることはありませんか?

これが、アプリやWebサイトでCTA(行動喚起)が他のボタンと比べて異なっている主な理由です。

image フォン・レストルフ効果の例

CTAが何をするのかを明確に理解してもらうために、またそれをアプリやWebサイトを使用している時に呼び起こすために、デザイナーはユーザーにシンプルなボタンとCTAを差別化して欲しいと考えます。

系列位置効果

系列位置効果は、リストの中の最初と最後が1番記憶に残りやすい傾向がある効果です。

image 左からTwitter、Medium、ProductHunt

最近では、多くのアプリがハンバーガーメニューの使用せず画面下に配置する、またはナビゲーションバーを採用し、ユーザーがもっとも使用頻度の高いボタンを画面の左か右に配置しています。上記の画像は人気あるiOSアプリを例にしています。どのアプリも系列位置効果を考慮して、ホームボタンとプロフィールボタンを左右に配置しています。

認知的負荷

認知的負荷は、人の作業記憶に使われる精神的な努力の総量に言及します。簡単に言うと、あなたが特定の目的を完了するために行う必要がある思考の量です。

認知的負荷理論は3つのタイプに区別されています。

  1. 課題を遂行されるために必要とされる認知的負荷(課題内在性負荷)
  2. 課題と関係がない認知プロセスによる負荷(課題外在性負荷)
  3. 課題のために使われる認知資源(学習関連負荷)

今回、私がUXデザインにもっとも応用できると考える課題内在性負荷と学習関連負荷について触れたいと思います。

課題内在性負荷

課題内在性負荷は、特定の教育テーマに関連した困難な部分です。それはマイクロコピーとコピーが優れたユーザーエクスペリエンスでは大きな役割を果たす主な理由です。

例えば、アプリの何も情報がない状態の時は、私たちはユーザーに目的を完了させるように促します。ここにあるように、ユーザーが指示に従いやすようコピーは短く、簡潔で、適切な言葉を使用する必要があります。

image 左から Stayful、 Serist、Lucidchart

学習関連負荷

学習関連負荷は、情報や概要構造を処理することに特化した認知的負荷です。 この概要は、情報のカテゴリーとそれらの間の関係を整理する考えのパターンを表します。

私たちがデザインパターンを使用する1つの理由は、それらが私たちに予めプログラミングされているからです。もし、ユーザーがデザインパターンをすでに理解して識別することができるなら、新しいパターンを認識し使用することも簡単でしょう。

ヒックの法則

ヒックの法則は、ゲシュタルトの法則同様、大変馴染みがあります。 さらに、理解し実行するのがとても簡単でシンプルです。ヒックの法則は、意思決定の時間が選択の幅によって異なることを表しています。選択の数が増えれば、対数的に意思決定に時間がかかります。

ユーザーエクスペリエンスデザインのリストにヒックの法則を応用した例です。

image ヒックの法則の例

近接の法則

近接の法則は、知覚の体制化のゲシュタルトの法則の1つであり、物体の距離が近い、または近接状態にある場合、同じグループだと考える法則です。簡単に言うと、私たちの脳は、物体の距離が離れているものより、距離が近い方が同じ関連したものと認識しやすいということです。このようなクラスタリングは、私たち人間が自然に組織化、グループ化する傾向があるために生じるのです。

image 近接の法則の例

上記の例を見ると72個の丸が並んでいます。それぞれの物体の距離からグループになっていることが分かります。さらに、画像の左側に36個の丸のグループ、右側に12個の丸のグループが3つあることにはっきりと気が付くでしょう。

この例はUIをデザインする時、コンテンツをグループとして一緒に考える場合に必要だと明確にし、同じようにコンテンツを一緒に配置するときは、ユーザーがそれぞれを自然と関連したものと考えてしまうかもしれないため、注意することが重要だと思います。