「Webサイトにおけるユーザー体験(UX)はどこから始まるのか？」
Webマーケティングに関与しているひとなら、こんな問いを考えたことがあるかもしれません。

ユーザー体験は、おそらくコンテンツを読み始めたり、何かをクリックしたりする*「前」*から始まっています。

カナダのオタワにあるカールトン大学の人間中心技術研究所(Human-Oriented Technology Lab)の研究によれば、なんとユーザーが訪れたWebサイトの*第一印象(ファーストインプレッション)を決めるのにかかる時間は、たったの50ミリ秒だと言います。
(Googleの研究によれば、17ミリ秒だとも言われています。)
この結論は、人間が脳の大皮質に情報が届く前にWebサイトが自分にとって有益かどうかを「判断している」*ということになります。

このように、ファーストインプレッションは、Webサイトにとって生命線ともなる最重要項目です。
しかし、それにもかかわらずファイストインプレッションはそれほど注目されません。
そこで今回は、ファーストインプレッションがUXで問題視される根深い理由について紐解いていきます。

ファーストインプレッションを決めるのはたったの50ミリ秒

前述の通り、Webサイトにおいてファーストインプレッションを決めるのは50ミリ秒であることが、さまざまな研究により明らかになっています。
視覚がどのように我々のファーストインプレッションに影響するかという研究は、1968年にアメリカの心理学者ロバート・ザイアンスが行なった*「単純接触効果」(mere exposure effect)*にはじまります。

watch.jpg
画像引用元：pexels.com

単純接触効果は、マーケティングの文脈では広告やCMなどで、露出が多いほど接触が起きて、よい商品だと思ったり商品が欲しくなったりするという文脈で語られます。
しかし、裏を返せば、初めのうちは興味がなかったり、苦手だったりするようなファーストインプレッションを、最初の単純接触では500ミリ秒から50ミリ秒の間で決めてしまうというのです。

したがって、Webデザイナーが検討しなければならないのは、最初に表示される*「アバブザフォールド」(スクロールするブラウザの下の折り目よりも上の部分)*に重要な要素を入れ込むということです。
2016年以降ヒーローヘッダーが主流になったのは、こうした研究を踏まえてのことだとも言えます。

ビジュアルデザインの3つのレベル

level.jpeg
画像引用元：pexels.com

感情に向けたデザインというのは、オンライン上の世界では決して目新しいことではなく、Webの黎明期から研究されています。
著書『誰のためのデザイン？』で知られるカリフォルニア大学サンディエゴ校のドナルド・ノーマン名誉教授によれば、2005年に上梓した『Emotional Design』で、ビジュアルデザインにはカスタマーやユーザーの感情を喚起させるためのビジュアルデザインのレベルが3つあると言います。

1. 本能的段階 (the visceral level)

think.jpeg
画像引用元：pexels.com

本能的段階は、何かを見た時に脳が自動的に反応する段階についていいます。
この反応は、無意識下で突然びっくりしたり嬉しくなったりするのと同じ原因で、この反応こそが50ミリ秒でファーストインプレッションを決めてしまう生理的反応です。
本能的段階について考えてみることが、感情に向けたデザインを考える上での最初のステップになります。

2. 行動的段階 (the behavioral level)

behabior.jpg
画像引用元：pexels.com

ほとんどのUX上のトピックはこの行動的段階に関して語られます。
行動的段階とは、平たく言えば機能やユーザビリティに関して、どう認識して行動するか、ということです。
UXデザインとは、多くの場合「行動的段階」に関するデザインなのです。

例えば、ナビゲーションがしっかり明示されていて、簡単に欲しい情報まで遷移することができるWebサイトは、明確なビジュアルヒエラルキー(視覚的情報構造)があり、そのおかげでユーザーに積極的な感情を植え付けることができます。
一方で、情報が混雑しており、探したい情報がなかなか見つからないような場合には、フラストレーションが溜まってイライラしてしまうでしょう。
もちろん、このようなユーザビリティの低下は、いかなる犠牲を払っても避けるべきです。

3. 反射的段階 (the reflective level)

ref.jpeg
画像引用元：pexels.com

反射的段階とは、ビジュアルデザインが**「イメージ」**として刷り込まれてしまう段階のことを言います。
つまり、この段階で持たれた印象というのが、そのブランドをどう認知しているかと同じになります。

例えば、*「スウォッチ」*という言葉を聞いて、どんなことを思い浮かべるでしょうか。
腕時計の会社で、スイスの時計産業を大きく変えた会社だと思い浮かべるでしょう。
しかし、一方でスウォッチ本社によれば、スウォッチは腕時計の会社ではなく、時計を通して喜びを売っている会社だといいます。
おしゃれでカラフルな時計を思い浮かべれば、その主張も納得できるかもしれません。

一方、同じ腕時計でも、*「カシオ」*の腕時計は、幾分か実用的に感じるのではないでしょうか。
これは、反射的段階よりも、行動的段階に重きを置いているからです。
日常的なシーンに溶け込んではいるものの、過度な主張はしていません。

ビジュアルデザインが反射的段階にまで到達しないと、強力なメッセージをユーザーの脳裏に焼き付けることができません。
Webデザイナーにとっては、ビジュアルデザインの3つの段階のそれぞれをチェックリストとして活用しながら、最適なレイアウトをデザインしていくことが重要です。