心理学から学ぶ！心地よいUXデザインを作る方法
心理学や神経科学からUXデザインを良くする方法について紹介。ユーザー体験を最大化するためにUXは欠かせません。1990年代のインターネット初期の事例から現在に至るまでWebサイトのデザインなどどう変遷してきたのか、必見です。是非ご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。
過去10年の巨大企業のWebサイトを見てみると、その変わりように驚くだろう。
初期のWebのスクリーンには、できるだけ多くの情報が詰めこまれていました。現在のWebサイトは、高度な研究と徹底的な計画のもとにデザインされたものであり、正しい場所かつ正しいタイミングでオーディエンスの注意を捉えるように設計されています。
最先端の神経科学と心理学的研究を使って芸術であったものを科学に変えようと試みている企業は、日に日に増えつつあります。
ウェイバック・マシン(Way Back Machine)で1990年代のWebのページを見てみると、メジャーなブランドのWebサイトのデザインがひどかったことにショックを受けるでしょう。1997年のアップル(Apple)のサイトを見てみましょう。
これが世界のデザインの頂点の昔の姿です。そして、これが現在の姿です。
Webデザインは、実に大きな進歩を遂げてきた。
この20年強で一般的なデザインのスタイルは大きく変化しましたが、これ以外にもWebデザインの変化をもたらしたトレンドがあります。
最先端の科学的な研究と技術をテクノロジーに利用するということの最先端にあったのが、「Webデザイナー」です。
こうした変化は、タブレットPCやスマホ、進化し続けるソフトウェアなどがもたらす、これまでとは異なる方法によるWebの閲覧方法に対応するために必要なものでした。しかし多くのデザイナーは、神経科学や心理学的研究で得られた成果をWebに導入し、ユーザーにとってより直感的に、より理解とナビゲートがしやすく、究極的にはオンライン世界を過ごしやすい場所を作ろうとしているのです。
では、Webデザイナーは神経科学や心理学における最新の研究を使ってデザインのインパクトを最大化するにはどうすればよいのでしょうか。
ここに取り上げたのは、オーディエンスの脳に直接訴えかけるようなサイトのデザインに役立つ5つの最新の発見です。
01．オーディエンスの注意を捉える
注意は、数十年にわたり神経科学が取りつかれてきたものであり、Webは注意を獲得するための新しいテクニックやアイディアの重要な実験場となってきました。
注意の期間が短くなっていることは、良く知られています。インターネット上の注意の期間の平均は、いまでは5秒を切っています。人は一瞬でサイトを判断し、必要な情報がそこでは得られないと判断した途端にサイトを離れてしまいます。
アイ・トラッキングは、長い間神経科学者が注意の測定に用いてきたツールです。ある一点をどれぐらいの時間注視していたかで、それが重要であるか否かを判断します。
このアイディアをさらに一歩進めたのが、アイクアントというグループです。彼らは眼のトラッキングデータを使って予測アルゴリズムを作り、測定対象のサイト上でアイ・トラッキングを使うかわりにそのサイトのデザインをアイクアントのサイトにアップロードすれば、オーディエンスが対象サイトをどのように理解し、どこに注目したかを瞬時に答えてくれます。
下の画像は、ジャストファブ(Justfab)というショッピングサイトのオーディエンスがどのパーツに注目したかのデータを表しています。
ここでは数千人の参加者にドイツのあるWebサイトを見てもらい、注意を惹くものとそうでないもの、人々がサイト上の異なるアイテムをそれぞれどれぐらいの間見ていたか、さらにユーザーの眼を引くものは何だったかについての巨大なデータセットが作成されました。
ここで明らかになったのが、何色であるかを問わずサイト上の色のコントラストが人の目を引くことで、サイト上のエッジの数はデザインが煩雑であるか否かを示し、ボールドのテキストやグラフィックのかたまり、そして人の顔がつねに注意を引くということだったのです。
このページで取り上げたのは、ユーザーの眼を引きつけるために人の顔とボールドのテキストを使っているアマゾンの例です。
ソフトウェアを使い、ビジュアルの明確さが経済上の決断にどう影響を及ぼしたかも研究しました。
研究の参加者に食べ物が明示された場合、参加者は購買を決断する傾向が多く見られた。
最新のアイ・トラッキング用ツールやソフトウェアは一般人には手が届かないかもしれませんが、人々が何をクリックしているかを見つける良い方法がいくつかあり、これで自分がデザインしたサイトを見てみると良いでしょう。スモミ（SumoMe）のヒートマップは、サイトを訪れたビジターがどこをクリックしているかを正確に示してくれるので、ビジュアル的な明確さを確保して最大限の注意を獲得するようにテキストやボタンを配置し直すことができます。
脳の注意を獲得する
コントラストやグラフィックに富み、人のイメージが多く使われたデザインは、脳の注意を獲得する。ただし、これがつねに正しいとは限らないことをデザイナーは理解していなくてはなりません。クールなグラフィックで誰かの注意を引くということは、それ以外に対する人の注意を逸らしているということでもあるのです。
02.フィッツの法則を使ってボタンを完璧に配置する
デザイナーがテキストやグラフィック、重要な情報をページに配置するのにアイ・トラッキングが役立つように、科学を使ってボタンがページのどこにあるべきかを決定するのに役立つテクニックがあります。
Canvaを使えば、簡単にいい感じの大きなボタンを使いやすい位置に配置できます。これらのボタンのサイズや位置には、偶然が入る余地はありません。ボタンは必要なときには簡単にアクセスできますが、それ以外のときは邪魔になりません。大きなサイズのおかげでCanvaデザイナーはカーソルでボタンを見つけることができます。
Canvaのデザイナーが知っていたかどうかは不明ですが、彼らはここにフィッツの法則を使っています。ポール・フィッツはアメリカの心理学者で、急速で目標を定めた人間の動き、つまりオンラインでボタンに手を伸ばすときと全く同じタイプの動きの定量化に初めて成功した人物です。
フィッツの法則は、人間の動きにかかる時間は、目標までの距離を目標の大きさで割った数値に比例するとしています。すなわち、目標が近くにあるほど、あるいは大きいほど早く動けるということを意味します。
これは当然だと感じられるかもしれません。ボタンを近づけるか大きくすればいいのでしょうか。必ずしもそうではないのです。ここが公式の複雑なところで、大きいことがいつも良いとは限りません。ボタンを大きくするのは良いことなのですが、ボタンが大きくなるにつれ性能の向上度合は下がってしまいます。小さいボタンは20％大きくなると性能も等しく向上しますが、大きなボタンにはこれが当てはまりません。
フィッツの法則で最適なWebボタンのサイズを確実に決めることは出来ませんが、MITのザ・タッチラブ(The Touch Lab)にはこれが出来るようです。
タッチラブの研究によれば、Webボタンの最適な幅は48ピクセルで、大人の指先の幅にほぼ同じである。
Webブラウジングの50％以上はモバイル機器が占めているため、デザイナーはカーソルとタッチの両方に対応したデザインをしなくてはなりません。
フィッツの法則は、配置の重要性も示しています。ひとつのボタンから次のボタンに早く移動してもらいたいという場合は、ボタン同士が近接している必要があります。これは、チェックアウトやサインインなど、ユーザーがある手順に従い、ボタンを押してから次に進まなくてはならないという場合に極めて重要になるのです。
アマゾンは入力フィールドとボタンをうまくまとめて配置し、次への動き確実にしやすくなるようにしています。
最近、デューク大学の神経科学者たちがWebサイトのボタンのように位置も大きさも異なるターゲットを定め、動き、到達するという場合に、脳がどのようにしてこのような動きに正確に対応しているかに注目しはじめました。彼らは脳が実際の動きが始まる前に動きを計画し、身体の動きの制御を行う一次運動野の脳細胞が、信号を発する率がターゲットのサイズに比例することを発見しました。
ターゲットが大きくなるほど信号の発信率が高まった。
デザイン上の動きを計測するアプリで手に入れやすいものは少ないですが、UCバークリー校のサイトとこのサイトは、フィッツの法則を計測できるという優れものです。ここでは、Webデザインに使われているものと同じターゲットのサイズとそれらの距離をテストすることができます。その結果からターゲットへの到達のしやすさあるいは難しさが分かるので、そのデータを使ってデザインを改善することが可能になります。
完全な脳のボタン
到達しやすさのためにボタンを大きくすると、大きくなるほどにその効果は低減します。最適なWebボタンのサイズは48ピクセルで、人の指の幅にほぼ同じです。
つねにボタン同士の位置関係を考えておかなくてはならなりません。ページの端から端に行くのにジャンプしなくてはならないようなサイトをデザインしてしまうと、ボタンが大きくても動きは困難になります。一連の流れに沿ってボタンをクリックしなくてはならないシステムをデザインする場合、どのページでも見つけやすいようにボタンは同じ場所に配置すべきです。
03. シンプルに、親しみやすくする
第一印象は重要です。実は、第一印象は人が気づくよりもはるかに速く形成されています。スイスのバーゼル大学の心理学者のグループがグーグルと協力して、Webサイトを訪れた人の第一印象が、どれほど速く形成されるのかの発見を試みました。
第一印象はどれほど速いのでしょうか。
Webサイトのデザインについての美的な決断は、17ミリセカンド(17/1000秒)以内に行われる。
比較のために、瞬きにかかる時間は、150ミリセカンド以上です。Webサイトが好きかどうかは、瞬きの10分の1以内で決まってしまいます。実に速いのです。
研究者たちは、実験の参加者にWebサイトを17ミリセカンド(瞬きの１/10)から1000ミリセカンド(1秒)までの異なる時間の間見せ、サイトについての意見を聞きました。そのWebサイトは「ビジュアル的複雑性」および「プロトタイプ性」に分類されるものでした。ビジュアル的な複雑性が低く、プロトタイプ性の高いデザインは、つねにビジュアル的に魅力があると評価されています。人は、どうしても慣れ親しんだシンプルなサイトを好んでしまうのです。
ホールデザイン・スタジオ(Whole Design Studio)のホームページは、この事実を完全に証明しています。爽やかで美しいデザインですが、Webページとしては理解可能です。
アレッサンドロ・ギウアのデザインはシンプルだが、プロトタイプ性が低いので、最初の17ミリセカンドでビジターは興味をなくしてしまうでしょう。
これには明らかなデザインの関連性があります。デザイナーはエンベロープ（外側）を強調することでオーディエンスに今までに見たことのないようなものを見せようとしますが、これは人が実際にサイトにとどまるかどうかを台無しにしかねない効果を持ちます。
この決断は数ミリセカンド以内の短時間で行われるため、大多数の人々は素晴らしくアバンギャルドなデザインをじっくり眺めるということはありません。よりシンプルで典型的な配置とデザインのサイトは、ビジターにより強くビジュアル的にアピールし、ビジターはより長い時間サイトに留まることになります。
複雑な脳のためのシンプルなサイト：極めて短い時間でサイトについての決断を下す人間の能力は驚異的です。人は速やかに決断を下します。デザイナーは、自分のデザインのエンベロープを強調したがるでしょうが、典型的なデザインのWebサイトから離れれば離れるほどサイトに留まる人は少なくなります。デザインをクリーンでシンプルにし、ユーザーがクラシックだと思うWebデザインをいじくり過ぎないことが肝心です。
04. サイトはソーシャルでエモーショナルに
フランスの哲学者ルネ・ジラールは、すべての人間は「模倣欲求」によって動いていると言いましたが、フランスの神経科学者たちも彼の説を肯定しています。
模倣欲求は、他人が何かをしない限り人が何かを欲することはあまりないというアイディアです。すべての人間の欲求は、他人によって惹起されます。2015年にWebデザインに携わっている人間は、違う名前でこれを知っています。すなわち、社会的証明です。基本的に人はまず他人が何をしているのを見てから、行動を起こすことが多いのです。
パリを基点とする神経科学者たちが、この模倣欲求に関連する神経の動きに注目しました。研究への参加者には、同じ物がふたつ見せられました。最初にある物を単独で見せておき、二度目には他人の欲求のゴールとしてそれを見せました。参加者の欲求は、どの場合でも他人が欲した物が高くなりました。
このタスクを行っている間中、参加者の脳はスキャンされていました。神経科学者は、他人の行動の理解を担う脳のミラーニューロンシステムがビデオを見ることにより活性化し、これによりものの価値を決定するヴェントラルストリアトプリフロンタル・ネットワークが活性化したことを発見しました。
Webサイトに社会的証明を付加する方法は数多くあります。なかでもベストなのは、既存の顧客による評価を使ってブランドの良さを訴求することです。これが効果的なのは、その評価が新規の顧客と同じ価値観を持つ人々によってされたものだからです。互いに良く似た人同士であるから、彼らが欲するものが同じであることが分かることによってミラーニューロン、すなわち脳の価値判断システムが活性化します。
これはヘルプデスクのソフトウェア会社であるデスク．コム(Desk.com)のサイトで、他のウェブ会社のCEOに対する社会的証明にユーザーによる評価を使っています。
感情は、特に広告においてはオーディエンスを確保するための素晴らしい方法である。
特にあらゆる広告において、エモーショナル(感情的)な要素のないデザインは、忘れられやすいです。しかしエモーションやエモーションが顕な人を加えると、そのデザインは脳にとってはるかに魅惑的で興味深いものになります。
顔の表情がすべての文化において共通であることは、研究により明らかになっています。それゆえ、笑顔の女性を見た場合に、
人は瞬時に彼女がどう感じているかを理解し、彼女の感情を旅に結びつけ、さらにユーバーというブランドと結びつけることになります。
デザイナーは、つねに人間の社会的および感情的な側面への引き金になるものをサイトに加える機会を求めなくてはならない。
ユーザーによる評価や推薦、会員数などの社会的証明をWebサイトに加えるのは簡単です。人と感情をサイトに加えることにより、ユーザーはサイトのデザインにより親しみを持ち、ブランドとユーザーを結びつけることによって他のサイトのユーザーと差別化します。
05. 流れに沿って進む
人はある決まった方法でWebサイトを読むため、その流れに逆らうと、人々が望む親しみのあるデザインに対する欲求を満たせないサイトになってしまいます。
新聞の全盛期には、「ビロウ・ザ・フォールド」というコンセプトがありました。新聞は売店で二つ折りされるため、折り曲げた部分より下にあるストーリーの重要性は低く、読まれる率も低いと考えられていました。
Webサイトの時代になっても、この不動産価格的な問題は生き続けています。
マーケティングビデオ会社のウィスティア(Wistia)は、特にビデオの場合「アバウブ・ザ・フォールド」がいまだに現実であることを発見しました。彼らはページを７つのゾーンに分割し、各ゾーンにおけるビデオの再生率をテストしました。
予想通り、ビデオはページの下部にあるものより最上部にあるもののほうが再生される回数が多かったのです。また、場所により急激に再生率が降下することも分かりました。ビデオは、ページの上部になければ再生されなかったのです。
ウィスティアは、自社のサイトでもビデオを前面中央に配置し、このアドバイスを実践しています。
重要な情報をすべて前面に配置することに加え、デザインではビジターはWebページをスキャンするという事実も考えておかなくてはなりません。
人はどのようにWebサイトを読むのかの研究では、人の眼の動きとそれが固定する点が明確にFの形を形成することが明らかになりました。まず人はヘッドラインを読みます。続いて最初のパラグラフの一行目の文章を読み、その下にあるサブヘッドを次々に読んで行きます。眼の動きのヒートマップ上でこの動きが明確なFを形作るのです。
心理学者のアリック・シグマンによれば、Webページをスキャンしているとき、人が真に探し求めているものは、ドーパミンなのだと言います。
この過激なスキャン行動の理由は、人間がすぐに手に入る報酬、気分が良くなるような何かを求めているからだとシグマンは示唆しています。ドーパミンは脳における報酬の薬物であり、人が求めているものを獲得するとドーパミンが放出されます。わずかな情報やゴシップ、ニュースあるいは笑いをWebサイトで得ると、喫煙者や中毒者が欲しいものを得たときのようにWebサイトのユーザーも少量のドーパミンを得るのです。
人がインターネット中毒になる理由は、これだ。ドーパミンの高騰が人を中毒者にするのだ。
Fパターンには、Webページを非常につまらなく見せてしまうという問題があります。優れたデザイナーであれば、研究の成果を利用しつつ驚異的なデザインを実現することも可能です。アイゼトル(iZettle)のページを見てみましょう。
一見このサイトはFパターンではないように見えますが、実はFパターンなのです。メインのテキストは最上部にあり、眼の動きはそこから行動喚起部まで下がっていきます。デザイナーは背景に大きなイメージを使うことにより、この動きをビジュアル的に興味深いものにしています。
脳の流れのためにデザインする
あらゆるWebデザインにおいて、重要な情報は誰もが見ることができる最上部に置くべきです。テキストの多いサイトをデザインするときは、サブヘッドを使ってテキストを分割するか、イメージを使って分割すると良いでしょう。こうすると、読者は自然に焦点を合わせるポイントを見ることになります。
次に必要なものは何か
現代はWebデザイナーにとって、またデザインの変化を支える研究にとって刺激的な時代です。これからのトレンドは、タッチやボイス、ジェスチャーなど今までとは違うユーザーインターフェースに向かうでしょう。
人間にとってより直感的な方法でコンピュータやWebとやり取りする世界、そしてポイント・アンド・クリックから触覚によるコントロールの世界に進むという場面には、完全に新しいデザインの機会が待ち構えています。
その向こうには何があるのでしょうか。フィッツの法則の研究に携わった科学者たちは、機械の制御に関する次の大きな変化がどうなるかについてコメントしています。それは、マインドコントロールです。
脳波を読み取れるヘッドセットはすでに市販されていて、思考で直接機器類を制御することが可能になっています。これからの10年でこれらはさらに洗練され、まったく新しいデザインの領域が開けるはずです。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でもアプリのデザインができるようになるアプリUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
