美しいUXデザインの背後にある心理学と神経科学

  • ブックマーク
  • -
    コピー

 デザインを学習していく中で、心理学や神経科学、を勉強することがより深い理解につながるということは、日々痛感しております。

 美しいデザインの法則を知るということ、それは美しいデザインを作ることに繋がります。

 いわゆる表面的なデザインでなく、なんでそれを人は美しいと感じるのか、なぜ使いやすいと思うのかには必ず理由があります。理由から逆算してデザインすることができれば、良いデザインが生まれやすいと予想できるのは当然ですね。すでに、膨大な数の実践と理論が世の中には存在しているのに、それを無視してなぜ無駄なデザインを産んでしまうのか? だからこそ、科学を勉強すべきです。

大将

デカルトが虹を数学的に分析しようと思ったのは、虹を美しいと思ったから、というのは私の好きなエピソードの一つです。

人間の脳は怠惰で偏見があり、近道をしようとする

 人間の認知に関するUXの研究は、そもそもデザインというのは、特に日本においては非科学的で、誤った仮定で満たされている可能性が高いと思います。

 認知というのは複雑であり、人に対し瞬間的な影響を及ぼします。だからこそ、誰かに尋ねると、「なぜ」を答えることができません。瞬間的、直観的だからです。あるいは、認知に対し多くの人は誤解や勘違いをしていることがあまりにも多いと私は思います。

 観察やインタビューなどの調査をすれば、ある程度のデータの収集をすることはできると思います。しかし、今の時代は視線追跡などの最新のテクノロジーを使うことで、研究者や本人が自身では知覚できない反応や好みをより細かく調査できます。
 トラフィックの多い製品の場合、ボタンの幅やテキストの色のコントラストなど、一見小さなディテールが数百万ドルの違いを生む可能性もあります。そのため、FacebookやGoogleなどの大手テクノロジー企業は、人々が製品をどのように使用しているかを研究するために神経科学ベースの技術を採用しているのが現実です。

 今回は、優れたUXを作成するために、デザインに役立つ科学的なヒントをいくつか紹介したいと思います。

 SUNABACOデザインスクールでは、表面的なデザインではなく、より本質的なデザイン思考を一ヶ月で学び、webデザインを含める全てのデザインができるようなカリキュラムになっております。

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

 人間の行動を動かすものの多くが潜在意識と言われています。人が新しいアプリやウェブサイトに遭遇してから一瞬のうちに、何百万ものニューロンが発火し、脳は何百もの潜在意識の決定を下しているのです。これは無意識下です。

大将

恋愛においても、女性は男性と出会って無意識のうちに一瞬で、この人が生理的に受け付けられるか、そうではないかを脳が判断しています。


 YouTubeUXの研究者であるJavierBargas-Avila氏は、調査の結果、露出後最初の17〜50ミリ秒でウェブページに対して美的反応を起こすと判断しました。
 まばたきには300〜400ミリ秒かかります。 つまり、瞬きよりも短い時間で、あなたは無意識に美しさを判断しているのです。
 この科学的事実は、動作に影響を与えることを示しています。たとえば、サイトの読み込みが遅い場合、脳が「無価値」として読み取る可能性が高まり、ユーザーはサイトの読み込みをそのまま待つのではなく、すぐにブラウザバックして他のサイトへ移ってしまうということが発生します。これはサイトのアクセス数に直結します。

 Facebookのような企業は、実はページ読み込みの調査に多大なリソースを投資しています。Facebookにログインしてもすぐに表示されない場合は、ユーザーはすぐに他へ移動していることがわかっているようです。しかし、何かしら最初に読み込まれると、コンテンツの多いニュースフィードが読み込まれるまでユーザーは待機する傾向があります。

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

  1. 高速、自動、頻繁、感情的、ステレオタイプ、潜在意識
     一つ目の思考は反応的であるということ。オブジェクト間の距離の決定や感情的な反応の決定など、複雑であるが故に本能的に認知が働きます。脳が怠惰なのは、この辺りの影響が強いです。
  2. 遅い、労力を要す、論理的、計算、意識的、まれ
     二つ目は分析的であるということ。適切な社会的行動を決定したり、価格や特性が異なる2つの製品を比較したりするなど、脳がより複雑な処理をします。

 脳は、新しい物事に直面するたびにその情報を再処理したり、新しい決定を下したりすることが苦手です。苦手というより、そこへ労力を使いたくないというのが正しいかもしれません。つまり、人間の意思決定の多くは一つ目の「反応的」に分類されます。意識決定は反応的に行われるのです。
 意思決定を迅速に行う場合、脳はスキーマやメンタルモデル(情報や相互作用のパターン)に過度に依存する傾向が強いです。一つ目の思考が行われている場合、二つ目の思考がアクティブになることはありません。必ずどちらかで判断を下します。人々は自分の脳の意思決定の気づいてないでしょうが、それらは全て行動や製品の認識に強く影響しているのです。

大将

自分自身の判断は自分の意思だと勘違いしている人があまりにも多いです。脳は自分の知らない間に都合の良いように判断していることが多いことをここで知っておきましょう。

デザインにおける心理学

 人間の脳は、その質量の約2%しか占めていないにもかかわらず、体の酸素のなんと25%を消費しています。
 脳は怠惰です。パターン認識とショートカットが発生するのは、脳が消費エナジーを抑えているからです。
 UXデザインが複雑なのはこのせいです。脳が何を好むのかを基礎から研究する必要があります。
 そのため最近では、神経科学者がUX研究に飛び込み、どうすれば潜在意識に訴えるデザインが作れるかの研究が日々進んでおります。
 注意と知覚は、視線追跡カメラで調べることができます。一方で、感情的な反応と覚醒は、皮膚センサーまたは顔の分析で判断できます。脳の電気的反応は脳波検査で測定できます。それぞれの反応について研究するメソッドはある程度まとまりつつあるのです。

 デザイナーにとって、誰かの興味を捉え、瞬く間に重要な情報を伝えることは不可能な作業のように思えるかもしれません。しかし、幸いなことに、科学的な事実を元にしたデザインを考えれば、ベストプラクティスも明らかにすることができるかもしれません。

識別しやすくする

 ウェブサイトやアプリを開いたときに、ユーザーからどのように見えるのか、どのように使われるのかを知ることができたら、デザインの方向性が決まります。
 例えば、製品はユーザーの求めるものなのか? これは高品質だと感じるのか? シンプルなのか? そのようなことは全て顧客が決めることです。そしてそれらは顧客にとって価値となります。
 一部の情報を前面中央に配置すると、他の情報と混雑しずらくなるでしょう。配置を考えることは、デザインにおいても重要です。

 多くの成功しているテクノロジー企業の製品をみると、よりシンプルで混雑の少ないインターフェースということに気がつくと思います。いわゆるミニマリストデザインと呼ばれますが、タスクの完了において優れたデザインであり、視覚的な明瞭さがオンラインおよびオフラインでの購入決定に影響を与えることが研究でも示されています。収益にも大きく関係してくるのです。
 また、視覚的にシンプルで綺麗なデザインの方がパフォーマンスが優れていることが科学的に証明されています。脳は怠惰なので、労力を使わずに識別できるものを好むのです。

なにができそうなのかを暗示する

 プライミング、つまり見たものからなにができそうなのかをわかりやすくユーザーに伝わるデザインは大切です。ユーザーが期待、予測した動きにそったインタラクションを発生させるのです。

 しかし、プライミングは両刃の剣です。伝えるつもりのない情報を伝えてしまった場合、ユーザーはこちらの意図しない動きをしてしまいます。たとえば、あなたの会社に掲載されている写真が、ゲームの写真ばかりだと、見た人はゲーム会社だと勘違いしてしまうみたいなことです。

怠惰な読者のために情報を整理してあげる

 視線追跡の研究は、製品と相互作用する人の視線を追跡することができます。画面の一部に焦点を合わせて、そこをどのくらいの時間見ていたのかを示すヒートマップ、または視線がどのように移っていったかを示すマップを作成することができます。それによって、ユーザーがこのデザインだとどこに注目し、どこに視線を移すのかを量的に観測することができ、最適なデザインを作成するために役立てることができるのです。

テキストを読みやすく

 45,237ページビューに関するニールセンノーマンの調査によると、人々はページ上のテキストの約20%しか読んでいないようです。さらに悪いことに、より多くのコンテンツを含むサイトでは、100語のテキストを追加するしても、その100語につき約4秒しか費やしませんでした。

 つまり、人々は記事の全てを読まないので、簡単にスキャン可能なテキストを用意する必要があります。

  • ハイライトされたキーワード
  • 意味のわかる小見出し
  • 箇条書き
  • 段落ごとに1つのテーマ
  • 結論から始める
  • 従来の文章の半分以下の単語数

色やコントラストを利用する

 テキストの構成とその配置だけがデザインの重要な要素ではありません。色彩理論、重み、およびコントラストを考え、それを利用することでユーザーを惹きつけることができます。
 NASAのコックピットデザインチームは、輝度(知覚される明るさ)を使用して、パイロットの注意を管理します。宇宙空間では細かく作業が決まっており、無駄な動きをしている時間がないため、作業に迷うわないように、次に宇宙飛行士がなにを行えばいいのかを一瞬でわかるように最新のデザインが支払われているのです。だから、コックピットのデザインチームは、色やコントラストを使用して、最も重要な要素を視覚的に際立たせているのです。

 輝度とコントラストは、特定の情報を強調したり軽視したりするために製品全体で使用できます。webデザインとかでは、ボタンなどのデザインで参照されることが多いでしょう。

 コントラストと輝度は最初のステップでしかありません。色彩理論では、全体の70%でベースカラー、25%でメインカラー、5%のアクセントカラーという割合が推奨されています。

 明るい色を使用すると目を引くことができるのと同様に、より落ち着いた色を使用すると、ユーザーはどの情報が二次的であるか重要性が低いかを判断することが簡単になります。たとえば、多くのWebサイトでは、ページのメインコンテンツから内容を切り離すために、フッター背景に色をつけて分離させていますね。
 機能や情報デザインの優先順位を決めると、ユーザーは最も重要な情報に集中することができます。

テストする

 デザインが機能しているかどうかを判断するために、何千万円もの視線追跡ソフトウェアや脳波を使う必要はありません。
 そのデザインがユーザーにとって理解できるかどうかを判断するための強力なツールに5秒テストというものがあります。
 5秒テストでは、サイトまたはアプリを5秒間表示してから、主題とデザインに関する質問するのです。その5秒間でどんな情報を得て、なにを感じたのかを色々な人に聞いていくことで、そのデザインをユーザーの脳はどう処理しているのかを確認することができます。その回答が製品の目的と機能からズレている場合は、デザインエラーにつながる可能性が高いと言えるでしょう。

デザインはユーザーに寄り添うもの

 デザイン心理学、脳、知覚について研究が進むにつれて、デザインは日々進化し続けます。そこで大事なのはデータです。神経科学と認知の研究方法が向上するにつれて、UXデザインに利用できるデータの種類と品質も向上していきます。

大将

れたUXデザインは魔法ではなく、科学です。

  • ブックマーク
  • -
    コピー

この記事を書いた人

大将

大将

エストニアの国立大学、タリン工科大学在学中に現地案内事業で起業。大学院では文学の数値解析の研究と小型人工衛星研究開発チームに所属。データサイエンティストとしてさまざまなプロジェクトに関わり、現在はフロントエンドの開発やVR教育やVR美術館などの創作や事業を行っている。元テニスコーチ。