• 連載
  • 2016-02-29

Monthly pageview: 4

ユーザーの心をつかむインターフェイスの作り方


Webサイトを使いやすくするために人間の仕組みを知ろう。その1

この連載ではユーザーの心をつかむことをテーマに執筆していますが、今回はもう少し根源的な人間の仕組みといったところに視点をあててみたいと思います。

使いやすい、分かりやすいWebサイトの構築にあたっては認知心理学の理解が切っても切れない重要な要素となってきます。認知心理学とは人間が五感から得た情報をどのように処理するかを研究している学問で、特にWebサイトにおいては視覚から得た情報がどのように処理されるかという点を知っておくことが重要になります。

ユーザーの気持ちや行動を考えてインターフェイスを設計することも大事ですが、その前に人間の根源にある特性などを理解しておくことで誰でも直感的に操作できるインターフェイスを構築することが可能となるでしょう。

ここではいくつかの代表的な事例からどのようにインターフェイスに活かしていけばよいかを解説したいと思います。

視線解析

”目は口ほどにモノを言う”ということわざがあるように目は脳からつながってる器官の中で唯一、露出している器官で心理状態が現れやすい部分です。

これをもとに目の動きから心理状態を読み取ろうという研究があり、これによると人の目線と意識には下図のような特徴があるようです。

過去「視覚的記憶」「聴覚的記憶」「内部対話」 未来「視覚的創造」「聴覚的創造」「身体感覚」

ここでは特に時間軸に注目したいと思います。左右では過去を思い出そうとすると左、未来のことなどを想像しようとすると右に意識が向きます。

Webサイトは別に右にスライドしてくわけでもないのにページを読み進めていくとき無意識に右に進んでいるような感覚を持っている方は多いのではないでしょうか。

それは新しいページに行くときはリンクをクリックしながら「どんな情報があるのかな」と未来を想像するからですね。こちらを見比べてみてください。

ボタンの配置例図 (1)「この内容で送信」「戻って修正する」 (2)「戻って修正する」「この内容で送信」

前述の話を考慮すると(2)のケースの方が自然ということになりますね。逆にしてしまうとユーザーが進むつもりなのに[戻る]ボタンを押してしまうといったことを引き起こしかねないので注意が必要になります。

マジカルナンバー

「マジカルナンバー」とはいろいろシーンで特別な意味を持つ数字に使われることが多いですが、ここでは情報の数のことを指します。アメリカの心理学者ジョージ・ミラーの研究によると、普段の生活の中で人間が短期記憶で把握できるのは7個(個人差により+-2)程度だそうです。

実はこの数字がWEBサイトのインターフェイスを設計するうえで非常に重要になります。
ユーザーはサイトにアクセスして自分に必要な情報があるかを数秒で判断するといわれています。

つまりサイト全体の構造を7つ程度のグルーピングで整理しておかないと、ユーザはそもそもなんのサイトかもよくわからずに離脱してしまう可能性が高くなります。そのため特にサイトのトップページではひと目でサイトの概要がわかるようにしてあげる必要があります。

例えばとある企業サイトをつくろうとした時に以下のコンテンツを準備しようということになったとします。

「ごあいさつ、会社概要、企業理念、ブランドメッセージ、A事業、B事業、C事業、CSRの取り組み、社会報告、環境報告、中期経営計画、業績・財務情報、IR資料、IRカレンダー、新卒採用、中途採用、社員紹介、お問合わせ」

当然、これを並列にならべてはユーザは目的の情報があっても見つけられる可能性は低いでしょう。これを以下のように整理してあげれば「企業情報」「事業内容」「CSR」「IR情報」「採用情報」「お問合わせ」という6つのグローバルナビゲーションのサイトになり、ユーザは自分の必要な情報を見つけることができるでしょう。

- 企業情報・・・ごあいさつ、会社概要、企業理念、ブランドメッセージ
- 事業内容・・・A事業、B事業、C事業
- CSR・・・CSRの取り組み、社会報告、環境報告
- IR情報・・・中期経営計画、業績・財務情報、IR資料、IRカレンダー
- 採用情報・・・新卒採用、中途採用、社員紹介
- お問合わせ

ストループ効果

ストループ効果とは心理学者ジョン・ストループによって報告されたもので同時に目にする二つ以上の情報が干渉しあう現象のことを言います。

以下を見てもらうと分かりやすいと思います。

「黄色の背景に文字はあおと表示」「あかの背景に文字はきいろと表示」「みどりの背景に文字はあかと表示」「あおの背景に文字はあおと表示」された図

多くの方が一瞬、とまどったのではないでしょうか。もしかしたら文字ではなく色の方を言ってしまったかもしれません。この場合は「文字」と「色」という2つの情報が干渉していることになります。Webサイトでいえば以下のような例を見てください。

お問い合わせはこちらバナーの例  一つ目は、メールのアイコン+メールアドレス 二つ目は、電話のアイコン+メールアドレス

どちらが自然かは一目瞭然ですよね。適切なアイコンやマークなどを使用しないとユーザーを混乱させてしまうことになります。しかし適切なアイコンなどを利用すればこの情報の干渉はプラスの相乗効果となりユーザーにより早く正確に情報を認識させることができます。

今回紹介した事例はユーザビリティを確保するために非常に重要な要素なのでなるべく多くの事象を把握しておいてWebサイトを設計する際に考慮すると多くの人がストレスなく利用できるインターフェイスを構築することが可能となるのではないでしょうか。

次回もひき続いて認知心理学に関わるいくつかの事例を紹介していきたいと思います。


『顧客経験価値を120%に引き上げる』 顧客コミュニケーションを想定した オウンドメディアの構築法とは

オウンドメディアは顧客との対話を通じて継続的に発展していく特長のあるメディアです。
ダウンロードはこちら(無料)

このユーザーの心をつかむインターフェイスの作り方バックナンバー ─ユーザーの心をつかむインターフェイスの作り方記事─

あわせて読みたい ―関連記事―