デザイナーが理解していると役に立つ、心理学の 5 つのコンセプト | アドビ UX 道場 #UXDojo
Nitzan Klamer によるイラストレーション
UX デザインは、ビジュアルデザインの枠を超える多様で広大な領域です。デザインは、美しくてエレガントな表現を生み出す、純粋に芸術的な作業だと考える人もいるかもしれません。しかし、インターフェイスに関しては、美的に優れたデザインだからといって、その成功が保証されるわけではありません。デザインの成否を決めるのは、体験の各ステップにおいて、ユーザーが何を考えそれをどのように受け止めるか次第です。成功するデザイナーは、美しいだけでなく、ユーザー体験を左右する人間の心理を知っている人たちです。
ユーザーの心理を理解すれば、デザイナーは直感的で合理的な体験を実現できるようになります。ユーザーは、使いやすくて効率的なサイトやアプリを快適に感じることでしょう。もし、デザイナーが「美しいもの」をつくることだけに集中し、ヒトの心理面をおろそかにしたら、その製品は失敗する可能性が高くなります。幸いなことに、デザイナーの意思決定の指針となる、デザイン心理学の原則は数多く存在します。そうした心理学を理解すれば、ユーザー体験の背後にある心理に忠実な美しい体験を生み出す際の力になるでしょう。
HCI (Human-Computer Interaction design)
全てのデザイナーが最初に知っておくべき、最も基本的なデザインに関わるコンセプトは、ヒューマンコンピュータインタラクション(HCI)です。HCI は、コンピュータサイエンス、デザイン、心理学の 3 つの分野のコンセプトと方法論を統合したものです。これらの概念が一つとなり、アクセシブルで使いやすく効率的なインターフェイスの作成に取り組むデザイナーを導きます。HCI の目標は、コンピュータをより人間らしく動作させることにより、ユーザー体験をより自然なものにすることです。
HCI は、コンピュータサイエンス、認知心理学、デザインから構成されている 出典: Quora
HCI の実践者たちは 1980 年代に登場し、人々がコンピュータとどのように関わるのかを観察し始めました。そしてすぐに、ユーザーの心理とメンタルモデルを考慮するようになりました。デジタル時代の進展に連れて、ラップトップ、タブレット、スマートフォン、ウェアラブルなど、さまざまな形態のコンピュータが発売されてきましたが、この製品の進化は、HCI から UX デザインへの発展を促しました。多くの意味で、HCI は UX デザインの先駆けと言えます。
現在の HCI は、ユーザー中心設計、UI デザイン、UX デザインなどの領域に重なる幅広い分野です。HCI の専門家はより学問的な視点を持つ傾向がありますが、UX デザイナーはより実務的で、モバイルアプリや ウェブサイトなどの製品やサービス構築に携わっているのが一般的です。テストを反復して改善を繰り返すプロセスは UX デザインの主要な原則となっていますが、これもHCI からの派生のひとつです。
インタラクションデザイン
インタラクションデザインもデザイナーとして知っておくべき概念です。インタラクションデザイン(IxD)は、人間と製品の関わり方のデザインです。ユーザーのデジタル製品やサービスとの接し方を理解する際、その背後には心理学が存在します。以下は、心理学の観点からのインタラクションデザインに関わる 5 つのトピックです。
- アフォーダンスとシニフィアン
ここでのアフォーダンスはある機能の明らかな動作を示すもので(例:ドアを開けられることが伝わる)で、シニフィアンはそのアフォーダンスを示唆する視覚的な手がかり(例:ドアノブ)です。シニフィアンがないと、ユーザーがアフォーダンスを認識できないことがよくあります。UI においては、クリック可能なボタンの形状はアフォーダンス、「送信」というテキストはシニフィアンです。 - 学習容易性
ユーザーがインターフェイスの使い方を理解するのにかかる時間の長さです。もし学習曲線が長すぎた場合、ユーザーは体験を放棄し始めるでしょう。体験の一貫性と予測しやすさは、ユーザーが製品の使い方を素早く習得する助けになり、その結果としてより快適なユーザー体験を実現します。 - ユーザビリティ
ユーザビリティはインタラクションデザインの基本です。ユーザーの成功のためには、まずユーザーが使えるインターフェイスでなければなりません。そのために、不要なステップの削除、情報アーキテクチャの調整、視覚的階層の変更などを行います。 - フィードバック(とそのタイミング)
フィードバックなしでは、ユーザーと製品のインタラクションは成立しません。マイクロインタラクションからサウンド通知まで、ユーザーは自分がどのように製品とコミュニケーションをとっているのかをフィードバックから理解します。また、フィードバックに関しては、その応答時間が重要です。理想的には、ユーザーにインターフェイスを制御していると感じさせる合図を 0.1 秒以内に出すべきです。メールが送信されたときにシュッと音が鳴ったり、アップロードが完了するとピッと音がするのはそうしたフィードバックの例です。 - 目的主導のデザイン
ユーザーの目標達成を実現する製品が成功する製品です。ユーザーが何を求めていて、そこにどのように到達したいのかを理解することが、目的主導型デザインの根本です。そのためにユーザー調査の実施は非常に重要で、ペインポイントや、デザイン対象のペルソナを特定するのに役立ちます。ユーザーを理解し、彼らの目的と抱えている不満を把握すれば、目的達成につながる解決案のデザインに役立つでしょう。
インタラクションデザインが UX デザインとどのよう関係にあるかを示すベン図 出典: Dan Saffer
ヒックの法則
ヒックの法則は、提示される選択肢の数や複雑さが増すほど、ユーザーの判断に時間がかかることを伝えます。選択肢からの刺激が多いほど、ユーザーの意思決定は困難になります。例えば、圧倒されるほどメニューの長いレストランに行ったことはありませんか?その際は選ぶのに時間がかかったのではないでしょうか?
UX デザインにおいても同様です。ユーザーに滑らかな体験して欲しければ、一度に提示する選択肢を減らすよう心がけるべきです。目的の達成に必要な選択肢だけに絞り込むということです。そうすれば、製品全体を通じて、効率的かつ合理的にユーザーを導くことができます。広範なユーザー調査は、デザインに取り入れるべき重要な機能を特定するために最適な方法です。
長いプロセスや複雑なプロセスを、より少ない選択肢の画面に分割することも、ヒックの法則をデザインに取り入れる手法のひとつです。チェックアウトのプロセスを、ショッピングカート>配送情報>支払い情報>確認と送信、のように複数の画面に分割するのはその好例です。また、おすすめの選択肢を強調して、選択肢でユーザーを圧倒しないようにするのも、ヒックの法則の活用と言えます。最後に、オンボーディング体験を段階に分けて提供すると、新規ユーザーの認知負荷を最小化できます。
選択肢の数が増えるほど、意思決定にかかる時間は長くなる 出典: echTarget
フォン・レストルフ効果
「孤立効果」とも呼ばれるフォン・レストルフ効果は、複数の同質なものと 1 つの異質なものが提示されたとき、他とは異なるものが記憶されることを予測します。つまり、他と異なる要素を配置するとそれが目立つため、記憶される可能性が高くなるということです。
フォン・レストルフ効果は、赤いリンゴが目立ち、記憶されることを予測する 出典: SiteW
UX デザインにおけるこのコンセプトの典型的なユースケースは、大きくて美しいボタンの使用です。コールトゥアクション(CTA)ボタンは目立たせたいため、他の全てのものから際立つようにデザインしなければなりません。CTA ボタンの見た目次第で、コンバージョンは左右されます。そのため価格設定を説明するページでは、フォン・レストルフ効果の活用が一般的です。
おすすめの価格パッケージには固有の青色の CTA が配置され、ユーザーを誘導する 出典: Dropbox
製品ページも、フォン・レストルフ効果が広く取り入れられている場所です。ベストセラーや新商品を強調するために、選択肢を制限するヒックの法則と組み合わせて使われることも良くあります。
「Best Seller」というラベルを付けて、ユーザーの選択肢を限定しつつ、他の選択肢から切り離すことができる 出典: Revolve Clothing
視覚認知のゲシュタルト原理
ゲシュタルト心理学の視覚認知の原理は、人間の目がどのように視覚的要素を認識するかを描写します。この原理の目的は、複数の要素を見た人が、それらを別々の要素ではなく、統一された塊として認識する仕組みを説明することです。これは、心理学とデザインが密接に関連していることを示すとても優れた例です。UI のデザインを始める際に、間違いなくすべてのデザイナーが知っておくべき知識です。
視覚認知に関する主なゲシュタルトの原理には以下のものがあります。
- 類似: ヒトの目は、デザインに類似した要素を見つけると、その要素の間に関係を構築します。類似性を表現するには、形状、色、サイズなどの基本的な性質の使用が効果的です。
形、大きさ、色により類似性を表現できる 出典: Interaction-Design.org
- 連続: ヒトの目は、デザインに含まれる線や曲線、あるいはそれに類するものを追う傾向があります。ユーザーは、分離して配置された視覚的要素として見るよりも、連続して流れるように目で追うことを好みます。
ヒトの心はシェイプや線の隙間をつなぐ 出典: UX Misfit
- 閉合: ヒトの目は完全な形を見ることを好み、隙間を埋めようとします。視覚的な要素が完全でない場合、ユーザーは欠けた情報を補い、完全な形状を知覚することができます。
形状の間の空間は心が自動的に埋めて認識する 出典: Eye Can Learn
- 近接: 単純な形状を一緒に並べると、より複雑なイメージを作り出すことができます。
脳は近接によって 2 つのグループを知覚する 出典: Smashing Magazine
- 図と地: ヒトの目は、背景から図形を分離しようとします。
前景と背景がそれぞれ 2 つの横顔と花瓶のように見える 出典: Wikipedia
- 対象と秩序: デザインはバランスが取れて、完全な形であるべきです。ユーザーは、無意識のうちに全体像を認識しようと時間と労力を費やします。
自転車の車輪とマンホールの蓋から構成されるバランスの取れた円 出典: Canva
心理学の理解はデザイナーの力になる
デザインにおける心理学の重要性を理解したなら、実戦で活用するためのツールを手に入れたも同然です。
HCI の基礎は、合理的で効率的なインタラクションの指針として役立ちます。インタラクションデザインを深く理解すれば、ユーザーの振る舞いの背後にある心理を利用できます。ヒックの法則、フォン・レストルフ効果、ゲシュタルト原理などを適用することで、デザイナーはデザインに関わる視覚認知の心理に踏み込めます。UX デザインの領域に含まれる心理学の要素を理解することが、最終的には、デザイナーとしての成功にも関わることになるでしょう。
この記事は Design Psychology: 6 Concepts Every UX Designer Should Know(著者: Justin Morales)の抄訳です