デザイン心理学と素晴らしいUXの神経科学

この記事の音声バージョンを聞く

特定のデザインが目を引き、血液を送り出す理由についての科学があります。

人間の脳は怠惰で偏見があり、近道をしがちです。

人間の認知に関するユーザーエクスペリエンスの研究は、どろどろで非科学的であり、誤った仮定で満たされている可能性があります。おそらく、それは怠惰な脳のせいです。

認知は複雑であり、多くの要因が腸の反応や瞬間的な印象に影響を及ぼします。 あなたが誰かに尋ねるとき、「なぜあなたはそれをするのですか？」 彼らが答えることができないか、あなたが彼らの反応を誤解する可能性が高いです。

神経科学を入力してください。

観察やインタビューなどの調査方法では、UXの研究者と参加者が推測する必要があることがよくありますが、視線追跡などの最新のテクノロジーにより、研究者はほとんど知覚できない反応や好みを調査できます。

トラフィックの多い製品の場合、ボタンの幅やテキストの色のコントラストなど、一見小さなディテールが数百万ドルの違いを生む可能性があります。 そのため、FacebookやGoogleのようなテクノロジーの巨人は、人々が製品をどのように使用しているかを研究するために神経科学ベースの技術を採用し始めています。

反応性のある「速い思考」の紹介から始めて、優れたユーザーエクスペリエンスを作成するために神経科学の力を活用するのに役立つ、設計者向けのヒントをいくつか提供しましょう。

デザイン心理学：速い思考、遅い思考

人間の行動を駆り立てるものの多くが潜在意識であることは周知の事実です。 人が新しいアプリやウェブサイトに遭遇してから数ミリ秒で、何百万ものニューロンが発火し、脳は何百もの潜在意識の決定を下します。

私は「正しい」場所にいますか？ このサイトを信頼する必要がありますか？

YouTubeUXの研究者であるJavierBargas-Avilaは、2012年の調査で、露出後最初の17〜50ミリ秒で人々がWebページに対して美的反応​​を起こすと判断しました。

それを概観すると、まばたきには300〜400ミリ秒かかります。 あなたの製品は、一瞬のうちに裁判、判決、判決を受け取ることができます。

これらのインプレッションは登録されない場合がありますが、動作に影響を与えます。 たとえば、サイトの読み込みが遅く、脳が最初に読み込まれたアイテムを「トピック外」として読み取る場合、ユーザーはサイトの読み込みを待つのではなく、すぐに移動することができます。

Facebookのような企業は、要素の読み込み順序の調査に多大なリソースを投資しています。 誰かがFacebookにログインし、通知バッジが表示されない場合、すぐに移動する可能性があります。 バッジが最初に読み込まれる場合、コンテンツの多いニュースフィードが読み込まれるまで待つことがあります。

ノーベル賞受賞者のダニエル・カーネマンの著書「Thinking、Fast and Slow」は、人間の思考と意思決定を2つのシステムに分割して、違いを説明します。

システム1：高速、自動、頻繁、感情的、ステレオタイプ、潜在意識。

システム1の思考は反応的であり、オブジェクト間の距離の決定や感情的な反応の決定など、複雑であるが本能的な認知に責任があります。 あなたの怠惰な脳は一般的にデフォルトでシステム1の思考になります。

システム2：遅く、労力を要し、論理的で、計算し、意識的で、まれです。

システム2の考え方は分析的であり、適切な社会的行動を決定したり、価格と特性が異なる2つの製品を比較したりするなど、より複雑なシナリオに適用されます。

脳は、新しいシナリオに直面するたびに情報を再処理したり、新しい決定を下したりすることを望まないため、人間の意思決定の多くはシステム1、つまり「速い思考」に分類されます。

迅速に意思決定を行う場合、脳はスキーマやメンタルモデル（情報や相互作用のよく知られたパターン）に過度に依存する可能性があります。 システム1の思考が行われると、システム2が有効になることはありません。 人々は彼らの脳の意思決定の速記に気づいていないかもしれませんが、それは彼らの行動と製品の認識に強く影響します。

デザインにおける心理学の科学

人間の脳は、その質量の約2％しか占めていないにもかかわらず、体の酸素のなんと25％を消費しています。 脳は生存メカニズムとして怠惰です—パターン認識とショートカットは、状況を意識的に処理するために費やされるエネルギーが少ないことを意味します。 脳は物事を識別し、それらにラベルを付け、それらが再び関連するまでそれらを無視します。

パターンと怠惰な意思決定に対する脳の好みは、生存を容易にするかもしれませんが、UXデザインをより困難にします。 研究対象が知覚さえできない何かをどのように研究しますか？

最近、いくつかの神経科学技術がUX研究に飛び込み、研究者が「速い思考」を刺激するものに光を当てるのに役立っています。

注意と知覚は、視線追跡カメラで調べることができます。 感情的な反応と覚醒は、皮膚センサーまたは顔の分析で判断できます。 脳の電気的反応は脳波検査で測定できます。

デザイナーにとって、誰かの興味を捉え、瞬く間に重要な情報を伝えることは不可能な作業のように聞こえるかもしれません。 幸いなことに、神経科学が問題の診断に役立つのと同じように、一般的な解決策やベストプラクティスも明らかにすることができます。

神経科学のユーザーエクスペリエンス研究から学んだいくつかの一般的な教訓は、デザイナーがデジタル製品を設計するときに採用できるものです。

心理学のヒント＃1を設計する：識別を容易にする

誰もがウェブサイトやアプリにアクセスし、それがどのように見えるかをある程度期待しています。 その期待に近づき続けることは、設計者が即座の潜在意識の意思決定から利益を得るのに役立ちます。

あなたのアプリやウェブサイトを開いた人は知りたがっていますa）これは私が探しているものを持っていますか？ b）これは高品質ですか？ デザインをシンプルに保ち、ブランド、サービス、製品を前面に出し、中心に置くことは、人々が自分自身を方向付けるのに役立ちます。

一部の情報を前面に配置するということは、他の情報が混雑しないようにすることを意味します。 デザインを整理することは、コンポーネントを再配置することと同じくらい重要です。

テクノロジー企業間で、よりシンプルで混雑の少ないインターフェースへの動きに気付くでしょう。 これらのミニマリストデザインは、タスクの完了においてより複雑なデザインよりも優れており、視覚的な明瞭さがオンラインおよびオフラインでの購入決定に影響を与えることが示されています。

視覚的にシンプルでクリーンなデザインの方が優れていることが科学的に証明されています。 怠惰な脳は、サイトの目的を即座に把握し、実行するアクションを理解できます。

デザイン心理学のヒント＃2：今後の予定を示す

プライミング、または今後の情報や相互作用のために誰かを準備することで、ユーザーが新しい情報を理解して反応する能力を向上させることができます。 UIの要素、特定のインタラクション、プロセスのタイミングなどを期待するように誰かをプライミングできます。

たとえば、Yelpは追加の画面を使用して、サードパーティのサイトにアクセスするためにYelpを離れるユーザーに警告します。 追加のコンテキストは、新しい設計と情報アーキテクチャを期待するようにユーザーに信号を送るのに役立ちます。

プライミングは両刃の剣です。 伝達するつもりのない情報は、意思決定に影響を与える可能性があります。 たとえば、あなたの写真会社が赤ちゃんの写真だけを取り上げている場合、あなたが幼児の顧客だけにサービスを提供しているという仮定に人が誤ってスナップする可能性があります。

デザイン心理学のヒント＃3：怠惰な読者のために整理する

アイトラッキング研究は、製品と相互作用する人の視線を追跡することができます。 画面の一部に焦点を合わせて費やした時間を示すヒートマップ、または目がページを飛び回る様子のマップを作成できます。

業界やアプリの種類を超えて、脳は一般的にFパターン（またはEパターン）の情報をスキャンすることを私たちは知っています。 その人は上部の情報を見て、右側を読んでから、ページを下にスキャンして関連情報やアイコンを探します。

Fパターンを壊す（たとえば、重要な情報を右下隅に配置する）と、見つけにくくなります。

あなたのテキストを飼いならす

45,237ページビューに関するNielsenNormanの調査によると、人々はページ上のテキストの約20％しか読んでいません。 さらに悪いことに、より多くのコンテンツを含むサイトでは、100語のテキストを追加するごとに約4秒しか費やしませんでした。

人々が一語一語読まない世界では、ニールセン・ノーマンはスキャン可能なテキストについて次のガイドラインを採用しています。

• ハイライトされたキーワード
• 意味のある小見出し
• 箇条書き
• 段落ごとに1つのアイデア
• 逆ピラミッドスタイル—結論から始めます
• 従来の文章の半分（またはそれ以下）の単語数

カラーポップとコントラストを使用する

テキストの構成と場所だけがデザインの重要な要素ではありません。 色彩理論、重み、およびコントラストを使用して、ユーザーの注意を向けることができます。

NASAのコックピット設計チームは、輝度（または設計の知覚される明るさ）を使用して、競合する情報で混雑している領域でパイロットの注意を管理するのに役立ちます。 コックピットの設計チームは、色とコントラストを使用して、最も重要な要素を視覚的に際立たせています。

輝度とコントラストは、特定の情報を強調したり軽視したりするために製品全体で使用できますが、ほとんどの場合、ボタンまたは召喚状のデザインで参照されます。 下の赤い例のボタンでわかるように、左上隅のボタンは最も飽和していますが、コントラストが最も高いため、最も明るく「感じ」ます。

コントラストと輝度は最初のステップにすぎません。 色彩理論では、60％の確率でドミナントカラー、30％のセカンダリカラー、10％のアクセントを使用して、製品のカラーのバランスをとることを提案しています。 この内訳は、目を引くものの背後にある神経科学と一致しています。 アクセントカラーの使用量が少ないため、目を引きます。

明るい色を使用すると目を引くことができるのと同様に、より落ち着いた色を使用すると、ユーザーはどの情報が二次的であるか重要性が低いかを判断するのに役立ちます。 たとえば、ほとんどのWebサイトは、ページ上の他の情報からの分離を示すために、より中間色のフッター領域を使用しています。

機能や情報デザイナーの優先順位を下げると、ユーザーは最も重要な操作や情報に直接集中できます。

デザイン心理学のヒント＃4：ガットチェック

幸いなことに、デザインが機能しているかどうかを判断するために、何千ドルもの視線追跡ソフトウェアや脳波は必要ありません。

5秒間のテストは、設計がすぐに理解できるかどうかを判断するための強力なツールです。

5秒間のテストでは、参加者はサイトまたはアプリを5秒間表示してから、主題とデザインに関する質問に回答します。 画像を参照することができず、参加者は「印象」を与えます。参加者が想定したのは、製品の目的と機能、そして何をするか、どこで次のステップを探すかです。

あなたの製品はあなたのユーザーが望むすべての機能を持っているかもしれませんが、怠惰でパターンを愛する脳がそれを即座に把握できない場合、それは先に進みます。

「マインドリーダー」としてのデザイナー

デザイン心理学、脳、知覚についてさらに学ぶにつれて、デザインの規範は業界全体で変化し続けます。 接続スレッドはデータです。神経科学と認知の研究方法が向上するにつれて、UXデザインで利用できるデータの種類と品質も向上します。

優れたユーザーエクスペリエンスデザインは魔法ではなく、科学です。 神経科学。

この記事は、以前はFacebookで、現在はAirbnbで、スタンフォード大学のd.schoolのフェローであるUX研究者のCaitriaO'Neillと共同で作成されました。

•••

Toptal Designブログでさらに読む：

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法