Webデザインに触れるすべてのユーザーは(少なくともシンギュラリティが到来するまでは)人間であり、なにかしらの心理学的法則の対象です。何十年もの研究において、心理学者と哲学者は今日に至るまで有効な人間の本質を観察し続けており、有能なUXデザイナーであれば、彼らの研究に目を向けるのが賢明でしょう。
疑うまでもなく、UXに心理学を適用することはシームレスで楽しいユーザー体験を提供する上で最適な選択です。人間の心理に注意を払わないWebサイトを閲覧することは、(VoxのJoe Posner氏が述べているように)押し戸を引いているようなもので、自身のせいでなくとも自分が愚かだと感じてしまうものです。
幸運なことに、あなたのデザインが心理的に適切なのかを試すために、臨床試験をしたり論文を書く必要はありません。既に心理学者がやっているからです。ここではUXデザインを考える際に頭に留めておきたいいくつかの原則を紹介します。
ヤコブの法則:馴染みのあるデザインにせよ
UXについての心理学の最初の原則は、目新しさと巧妙さのバランスに関するものです。新米のデザイナーはしばしば、芸術的個性を出すため、ないしは競合のWebサイトより目立つためにサイトのデザインを一から再構築しようとします。こういったクリエイティブなタイプの人間には悪い知らせですが、ユーザーは新しい体験が好きではないということは広く知られています。
Nielsen Norman GroupのJakob Nielsen氏がこの原則の提唱者で、Webサイトに関してユーザーは、馴染みのある体験を好むものであると述べています。このことは、同グループが2008年に行ったアイトラッキングの実験にも関連しています。ほとんどのネットユーザーは大抵同じようにページを読み、情報を消化しているというものです。
具体的には、ユーザーはWebサイトのトップを横に読み、目線を少し下げてさらに横に読み、そしてスクリーンの左側を上下するように読む傾向があるという結果でした。多くのデザイナーが消費者のこの動きを防ぐため、箇条書きや画像を用いて異なるデザインにしようとしますが、普通でありふれたデザインでよいのかもしれません。もしこの法則に逆らって、他のサイトと一線を画す変更を加えるのであれば、当然目立ちはしますが、よいアイデアではないかもしれません。
もちろん、馴染みのあるデザインといってもすべてのデザインをFacebookやあなたの最大の競合から猿真似するべきだというわけではありませんが、そういったサイトがどのように顧客のニーズを満たしているかには気付くべきでしょう。あなたが直面していることと同様の問題にどのようにアプローチしているかがわかるでしょうし、逆にいまひとつな部分もみつかるかもしれません。そうした箇所には違うアプローチをすることもできるでしょう。
これは、Q&A・フォーラムサイトのQuoraのページですが、別のフォーラムサイトRedditを含む多くのサイトが採用しているスタンダードで一般的な検索バーの配置を真似ています。フォーラムサイトのヘビーユーザーや初心者、一般的なネットユーザーにも直感的に理解できるつくりとなっています。
ヒックの法則:選択肢をしぼる
これは複数の選択肢がある中から一つを選ぶのにどれだけ時間がかかるのかについての法則で、Hick-Hymanの法則としても知られています。選択肢を増やすほど決断までの時間は(指数関数的ではなく)対数的に長くなると指摘しています。
簡単に言うと、選択肢が1つだと決断は0秒ですが、選択肢の数を追加していくと初めのうちは決断時間が急激に長くなり、そのあとは徐々に変わらなくなっていくというものです。このことは、選択肢が多すぎると決断が非常に難しくなることを示しています。
UXにおいてはなにを意味するのでしょうか? WritinityとLast Minute WritingのUXデザイナーであるSioarse Key氏は次のように述べています。
「初めから多くの選択肢を与えることはユーザーを惹きつけるのではなく、混乱させ苛立たせてしまうことになりかねません。これは選択肢の数を制限しろということではなく、選択肢を分岐式にすることでシンプルにみせろということです。ハンバーガーナビゲーションメニューをイメージするとよいでしょう。Wes McDowell氏が書いているように、分岐を進んでいくにつれてより具体的になっていく方がわかりやすいのです。」
FacebookはアプリにHick-Hymanの法則を適用し、携帯電話の小さいスクリーンに表示されるオプションの数を制限し、スペースを最大化しています。
ミラーの法則:シンプルに保つこと
UX心理学の3つ目の原則は、プリンストン大学の心理学教授George A. Miller氏によって提唱された、私たちの記憶できる容量についての法則です。極めてシンプルに言うと、人は一般的に一度に7つのことしか頭に置いておけないということです。多くを覚えていられるが引っ張り出すのに時間がかかる長期記憶ではなく、一時的にではありますが積極的に出し入れができるワーキングメモリについての説明です。
この原則をUXデザインに照らすと、ページをシンプルにまとめよということになるでしょう。もし最初のページで7つを超えるコンセプトを紹介してしまうと、次のページに進むまでに少なくとも一つは忘れてしまいます。ヒックの法則と似ていますが、サイトを潜るほど小分けした情報が出てくるようにしましょう。より心地よいユーザー体験のため、4つから7つのグループに情報を分けましょう。
Dogtimeのこちらのブログポストはミラーの法則をよく活かしています。SNSシェアボタンとギャラリー、画像、パラグラフでひとつにまとめられており、4つで1グループとなっています。右のBreed Finderについては欄外に隔てられています。そうすることでユーザーはそこまで気が散ることもありません。
ゲシュタルト原則:スマートなグルーピングを
情報のグルーピングと言えば、Draft BeyondとResearchpapersukのデザインブロガーであるAlexa Farqad氏がゲシュタルト原則について次のように語っています。
「1920年代当時、ドイツの心理学者が人間は乱雑な情報からパターンをみつけることに非常に長けており、それを日常的に実行していることを発見しました。たとえば、線や点が集まって見覚えのある形に近くなったときに想像でスペースを埋めたり、同じ色や形のものをみるとお互いの距離に関係なくグルーピングするのです。」
上の有名な画像をみたとき、壺のイメージを認識しながらも、人の脳は自然に2つのスペースを2つの顔にグルーピングします。これがゲシュタルト原則のよい例です。
有名なWebサイトでゲシュタルト原則が利用されている例は数多くあり、そのほとんどにおいてユーザーは知らないうちにグルーピングしています。この原則は、私たちがどのように形や色を認識するのかを利用して、ユーザーにデザイン要素を連想(または切り離し)させることができる可能性を示しています。デザインの対象がダッシュボードであれ、ランディング・ページであれ、インフォグラフィクスであれ、この原則は効果を発揮するでしょう。
ほぼ絶え間なくアップデートを続けているにもかかわらず、Amazonはアップデート時につねにゲシュタルト原則に注意を払っています。このイメージですが、様々な記事にリンクしている「Discover Amazon」のクリップアートボタンが長方形でグルーピングされており、上の長方形との間にスペースが存在します。このグルーピングとスペースが忙しないページにゆとりをもたらし、ユーザーが探しているものをみつける助けにもなっています。
フォンレストルフ効果:強調は賢く
続いての心理学法則はホラー映画のタイトルにありそうな響きですが、フォンレストルフ効果もまた私たちの脳が似たものをグルーピングする性質についての法則です。この法則によると、私たちは見た目の近いものをいつもグルーピングしますが、一番異なる見た目のものをよく覚えているそうです。
UXデザインにおいては、ユーザーに特定の要素を覚えてもらう際にフォンレストルフ効果は有効です。ある商品がセール中であることを伝えたいが、サムネイルが他の商品と変わり映えしない場合、その商品だけ太字で強調することができます。一方で、強調する商品を増やし過ぎると強調されていない商品が目立ってしまいます。この心理学的法則から言えるのは、「強調は賢く」ということでしょう。
ここではユーザーにプレミアムプランを売り込むことで悪名高いMemriseを紹介します。この画像では、Annual(年間)プランを他より大きくし、「Subscribe now(いま登録する)」ボタンを他と違う色とすることで差別化したうえで、小さく50%オフのタグを設置してAnnualプランが最適のプランであると強調しています。
メンタルモデル:一からやり直しはしない
馴染みについてのもう一つの教訓である、メンタルモデルを紹介します。これは大きな心理学的トレンドで、特定の物事が真実であると一般に認知されるのは、経験則に基づいているということを説いています。「経験則に基づいている」というのがポイントで、ここでいう真実とはしばしば論理的でも心理学的でもなく、単に「以前からそうであった」ために真実となるのです。
このことはUXデザインにはどう関わってくるのでしょうか? スマートフォンで記事を読むとき、スクロールしませんか? それがメンタルモデルをデザインに活用した例です。記事は物理的に携帯の下に続いているわけではないので、スクロールしたりフリップしたりタップする本当の理由ではありえません。記事は下に続いているとメンタルモデルが教えてくるため、スクロールするのです。
さらに言うと、メンタルモデルはテクノロジーによってつねに更新されていきます。左右へのスワイプはTinderが登場するより前にはありませんでした。もし左右のスワイプが逆に機能するアプリを開発したとすると、ユーザーを混乱させるでしょう。つまり、広く知られている慣習には従いましょうということです。
こちらは教育SNSのEdmodoのスクリーンショットです。Facebookのレイアウトを模倣しており、ほぼそのままとなっています。生徒はFacebookと同じ位置にあるボタンをクリックすることで「いいね」や投稿のシェアができますし、設定やメニューも同じ場所となっています。メンタルモデルに頼った結果、Edmodoは人気のプラットフォームとなったのです。
まとめ
当然、これらすべての法則に従ったサイトでもユーザーが混乱することはあり得ます。法則も完璧ではありません。しかし、ユーザーの立場に立ち、あなたのデザインがどのような誤解を生む可能性があるかをみつける役には立つでしょう。結局のところ、私たちは皆人間なのですから。