デザイン

事例で学ぶ、UI/UXデザインを行うときに役立つ心理学の原則

心理学の原則をもとに人々がアプリケーションで正しく認識し、目的を達成するためのデザインについて考えていきます。
avator
Misaki Akimoto
2019-1-20

この記事は、Thanasis Rigopoulos、The Psychology Principles Every UI/UX Designer Needs to Knowを翻訳・再構成したものです。配信元または著者の許可を得て配信しています。


アプリやウェブサイトでのUI/UXデザインは、心理学の原則をもとに設計されていることがよくあります。デザインがユーザーからどのように認識されているかを把握することで、ユーザーが目標を達成するためのベストな方法を考えることができます。

今回は、ユーザーを理解するために役立ついくつかのデザイン原則を実践例とともに紹介していきます。

フォン・レストルフ効果から考えるCTAボタン

フォン・レストルフ効果(孤立効果)は、大多数の中で異なった特徴を持っているひとつが記憶に残りやすい心理のことを指します。

サイト内でCTA(Call-to-Action)の表示がそのほかのアクションボタンと見た目が異なるのは、この効果を利用しているためです。

(※Call-to-Action:Webサイトで訪問者にとってもらいたい行動に誘導するボタンのこと。シェアボタンなどがそれに当たる。)

Von Restorff Effect Example

CTAボタンの用途とその他のアクションボタンとの違いについてユーザーに気づいてもらう。そして、アプリケーションの使用中はボタンの用途について覚えておいてもらわなければなりません。

系列位置効果から設計するユーザーアクション

何かを覚えようとするとき、はじめのほうに覚えたことと最後のほうに覚えたことが「思い出しやすい」というような経験はありませんか。まさにこれこそが系列位置効果です。

この効果は文字情報だけでなく、視覚・聴覚・臭覚などにも認められるものとされ、「覚えにくい英単語は最初と最後に覚える」といった学習法は、実際に有効であるとされています。

From left to right, Twitter, Medium, ProductHunt

これは、最近のほとんどのアプリケーションがハンバーガーメニューを捨てて、ボトムまたはトップバーのナビゲーションを配置し、最も重要なユーザーアクションを右もしくは左に置くことの理由だと言えます。 上記の画像は、一般的なiOSアプリケーションの例ですが、それぞれ ホームプロフィールの項目を系列位置効果をもとに左右に配置しています。

ユーザーのストレスを軽減させる認知的負荷を考える

ウェブサービスやアプリにおける認知的負荷とは、デザインやUIからプロダクトの提供価値や機能を理解するまでに情報を脳内で処理するステップの数を指します。

ユーザーは、「よくわからない」と感じてしまった段階でそのサービスから離れてしまいます。自力で処理しなければならない情報量が多すぎるためです。このような「認知的負荷が高い」状況では

1. 選択肢が多い 2. 考えることが多い 3. 不明瞭であること

という特徴があるといえます。ウェブサイトやアプリを作る上では上記のような状況を防ぎ、「認知的負荷」をできる限り少なくすることが必要です。 UXデザインを考えるときに活用できる認知的負荷を小さくするためのプラクティスを確認していきましょう。

ユーザーの焦点を絞ったわかりやすいガイド

優れたUXデザインを作る上でマイクロコピー(ボタンの文字など非常に細部の箇所のコピーのこと)やキャッチコピーが非常に重要な役割を担っています。

アプリ内でコンテンツが空の状態の時はたいてい、ユーザーに求めるタスクを完了するように促します。ここでは、ユーザーが簡単に指示に従うことができるように、コピーを短く、シンプルに、適切な単語で表現することが大切です。

ユーザータスクに焦点をあて、ゴールを明確にすることで目的を達成するまでのステップと時間を削減します。

From left to right, Stayful, Serist, Lucidchart

ユーザーが知覚できるデザインパターンを利用

人間がガイドなしでも感覚的に知覚できるようなデザインパターンを利用することを心がけます。そうすることでユーザーが既に理解(経験)しているパターンを識別し、新しいものと区別しながら学習することが容易くなるためです。

ユーザーの意思決定を左右するヒックの法則

ヒックの法則は、人の意思決定にかかる時間は、選択行為における情報量に比例するため、選択肢の数が増えると意思決定に時間がかかることを意味します。

UXデザインに活用されているヒックの法則の代表的な例はリストの表示方法が挙げられます。

Hick’s Law Example

UI上でグルーピングを示したいときに利用できる近接の法則

近接の法則は、距離が近いもの同士を同じグループだと認識するという法則です。私たちは、それぞれの要素数が異なっていても同じグループと認識します。

Law of Proximity Example

上の例では、72個の円があります。我々はグループ間の距離に基づき、グループ内の円を認識します。 今回の例であれば、

  • 左側の36個の円のまとまり
  • 右側の12個の円が3つ並ぶまとまり というように無意識にグルーピングをするのではないでしょうか。

これは、UIを設計するときにユーザーが自然とそれぞれの関係性を理解できるようにまとめる必要があることを指しています。

まとめ

ウェブサイトやアプリを初めて利用するとき、ユーザーはサービスの利用価値や機能、操作性について無意識のうちに思いを巡らせています。 ユーザーへ「心地よい」UI/UXを提供したいとき、人間の特性や行動パターンを理解するためにも心理学の観点からデザインのアイデアを得るのも一つの手段として役立つと思います。 ユーザーがボタンひとつ押すシーンでも、彼らがボタンを押すまでに巡る思考のプロセスや気持ちに寄り添い、デザインをしていきたいものです。

心理学
UIデザイン
UXデザイン
デザインパートナーをお探しではありませんか?
オハコはデザインと実装の力で、サービスをゼロから形にするデザインコンサルティング会社です。 サービスの成長から逆算し、最適なプロジェクトをデザインします。
デザインについてのご相談は下記よりお問い合わせください。
avator
Misaki Akimoto
プロダクトマネージャー/ Product Huntをチェックするのが日課です^^