記事

アイトラッキング調査で判明した8つの原則

2/3

ただし、読みやすさに加えて、目立つデザインの要素をヘッドラインにもたらす必要がある — 大きく、そして、ボールド体で綴ると良いだろう。

私は時々ヘッドラインに視覚的な飾りを用いる:

画像を見る

しかし、ほとんどの場合、大きな活字書体を用いる:

画像を見る

原則 #4: 情報を塊に分ける

「コンテンツを短い段落に分けて、見出しを用意し、箇条書きを使い、そして、番号付きリストを利用するべし」と言う鉄則を聞いたことがあるのではないだろうか。

この鉄則には、直感が関係している。単純に、ビジターは巨大なテキストの塊を消化することが出来ないのだ。

下のアイトラッキングのヒートマップは、ページ上の注視時間を表しており、情報を消化可能なサイズの塊で提供する必要性を指摘している。

明らかに、ビジターは塊を見る。このページは、必ずしも、レイアウトの良い見本とは言えないが、強力な視覚的要素を持つ見出し — 中央への配置、目立つ色、考え抜いた空間の構造 — をビジターが見る、と言う考えを実証している。

原則 #5: 多くの余白を設ける

余白(ネガティブスペース)は、ウェブデザインにおける重要な要素の一つである。アイトラッキングの調査が、この点を実証している:

画像を見る

上の例では、余白を持つ開放的なレイアウトが、スムーズに注視を導き、データを効率良く吸収させてていることが分かる。

余白は、スペースの無駄遣いに見えるため、何か配置したくなる気持ちは分かる。しかし、ページの残りの動きを促す効果があるため、実は貴重な存在である。人間の目は、ページの様々要素から、「休む」場所を求める。また、次に向かう場所を把握する必要もある。

そこで余白が役に立つ。

原則 #6: ページの左側は重要

このアイトラッキング調査は、ユーザーが、ページに滞在する間、ページの左側を見ることが多いと指摘している。

画像を見る

多くの言語では、テキストが左から右に向かうパターンが採用されている。ウェブデザイン、そして、ウェブページを読む習慣において、この閲覧パターンは、深く根付いている。

ウェブページをデザインする際、または、コンテンツを配置するさは、重要なコンテンツを左側に置き、ページの左側を最大限に活用すると良い。

原則 #7: バナーを排除する

ウェブバナーは無視される。バナーへの注目の低下は、バナー広告が黄金時代を迎えた頃から現れ始めた。

バナー広告の効果は消え始めた。単なる広告でしかなかったためだ。その後、注目を集めるために、震えるバナーの利用が始まった。しかし、システムのエラーにしか見えない作品もあった。また、「100万人目の訪問を記念し、黄金のフェラーリを贈呈する」と宣伝する広告も現れた。

クリックする気になるだろうか

「バナーブラインドネス」と呼ばれるこの現象は、アイトラッキングの初期の研究で、特に話題に挙がることが多かった。ヤコブ・ニールセン博士は、1997年にバナーブラインドネスの存在を発見していた。

現在、バナーブラインドネスは、インターネットの知識、そして、ユーザビリティの常識として、受け入られている。とても重要度が高く、Wikipediaの記事が作られるほどだ。バナーが無視されると言う指摘が信じられないなら、以下のアイトラッキングの調査結果を見てもらいたい。

画像を見る

サイトを収益化する方法が他にないなら話は別だが、基本的には、バナーを利用するべきではない。

原則 #8: 人物写真は有効

LinkedInの調査を始めとするユーザビリティの調査では、人物の写真の効果が裏付けられている。たとえ写真であれ、他の誰かを見ると、– 通常は — 魅力、理解、あるいは、識別において前向きな心理の反応を促す。

人物の顔写真を持つページは、双方向的な情報のやり取りと閲覧を促し、直帰率を低下させる効果がある。

人物写真に関する調査で得られた4つの重要な見解を挙げていく:

  • デザインの要素として人物写真を利用する — ホームページで人物の画像を利用するべきだ。人は他の人を見る習性があり、その結果、ページに長くとどまるためだ。
  • Aboutページで写真を用いる — 容姿が分かると、信じてもらい、信頼してもらい、そして、取引を行ってもらえる確率は高くなる。
  • LinkedInのプロフィールで顔写真を用いる — すると、信頼感が生まれる。
  • Googleオーサーシップの確立に励む — SERPでは、オーサーシップの画像を持つエントリにクリックが集まる。

結論

ウェブサイト、コンバージョン、事業、そして、製品を、アイトラッキングの調査に注目するだけで、改善することが出来る。

あわせて読みたい

「ホームページ」の記事一覧へ

トピックス

  1. 一覧を見る

ランキング

  1. 1

    コロナ感染者増加の主因は街の「人流」ではなく、PCR検査への「人流」

    自由人

    05月10日 08:22

  2. 2

    「人権派弁護士」が牙をむく時。正義感の暴走、池江璃花子選手への中傷は異常だ

    音喜多 駿(参議院議員 / 東京都選挙区)

    05月10日 09:51

  3. 3

    変異株の脅威を煽る小池都知事の発言に潜む明確な誇張

    青山まさゆき

    05月10日 08:25

  4. 4

    「結婚=幸福」という同調圧力 - 山口真由

    幻冬舎plus

    05月10日 08:15

  5. 5

    「もっと早くワクチン接種を!」

    コクバ幸之助

    05月10日 08:11

  6. 6

    変異株は「全く別のウイルス」 スーパーサイヤ人みたいなもの

    中村ゆきつぐ

    05月09日 08:22

  7. 7

    ネット署名 『人々の夢と希望をつなぐため、東京五輪の開催を支持します』立ち上がる

    和田政宗

    05月08日 21:34

  8. 8

    東山紀之は近藤真彦を守り続けた…痛烈批判の裏の「40年間の愛憎」

    NEWSポストセブン

    05月10日 08:46

  9. 9

    TBSが五輪テスト大会をライブ放送 競技場に飛び込む「オリンピックより命だ」のシュプレヒコール

    田中龍作

    05月10日 08:37

  10. 10

    東京五輪「開催反対」でアスリートが〝差別〟される裏側 - 新田日明 (スポーツライター)

    WEDGE Infinity

    05月10日 08:45

ログイン

ログインするアカウントをお選びください。
以下のいずれかのアカウントでBLOGOSにログインすることができます。

コメントを書き込むには FacebookID、TwitterID のいずれかで認証を行う必要があります。

※livedoorIDでログインした場合、ご利用できるのはフォロー機能、マイページ機能、支持するボタンのみとなります。