ユーザーの動きを誘導するコツ|Webデザインの考え方や注意点

>

インターネットユーザーの目線の動きの特徴

ホームページ制作をする際に注意が必要な点はいくつもあります。

中でも、「ページに訪れたユーザーの動き」は非常に重要。

会社や企業、個人がホームページやブログを更新する。

その目的は、集客、販売ではないでしょうか?

つまりは、ホームページやブログに訪問してくれる人が多くても、実際に何も行動(アクション)を起こさない状態では意味がありません。

今回は、ユーザーの視線の動きにおけるポイントを3つにわけてご案内していきます。

  1. パターン化する。
  2. 自分のサービスと照らし合わせる
  3. 意図をもって構築する

この流れが実現できるようになっていくことが大切です。

ネットユーザーの目の動きを理解する

インターネットユーザーの目線の動きの特徴

ユーザーの視線の動き1.上下運動

Webサイトの目の動き

人の視線の動きで最も簡単なのが、「上から下」に移動をさせる。

  • 読書をする
  • 新聞を読む
  • 雑誌を読む

紙媒体の場合は、縦書きのものもまだまだ数多く存在します。

つまり、文字の流れに沿って、上から下に視線を動かすという動きがあります。

グーデンベルグ・ダイヤグラム

グーデンベルグダイヤグラム

この内容は、通称「斜め読み」と呼ばれる読書方法。

活字を斜めにキーワードだけを拾って入れていきます。

すると、1ページの中身がある程度わかってくるという認識。

  1. 最初の視覚領域で数文字を確認
  2. 最終領域で結末を確認
  3. 中間となる空間で、文末には意識は強くなります。
  4. 中間となる空間で、文の始まりでは意識は弱くなります。

スマートフォンでは非常にわかりやすいです。

例えば、

  1. 冒頭文と呼ばれる最初の50文字程度を読む。
  2. 「まとめ」や関連記事、カテゴリー等を観察する
  3. 中間部分にある見出しを確認する

この流れである程度文章の構成と中身を探していくというのがよくあるパターンです。

Z型

Webレイアウト|Z型

Z型は、ユーザーの視線の動きがローマ字のZに似ていることからこう呼ばれています。

通販サイトのように、画像が多いギャラリーサイトではよくあるのが、このパターン。

  1. 最初の紹介と商品の並びなどの詳細を眺める。
  2. 右上から左下までの画像を眺める
  3. 最後に並んでいる関連商品や続きを見る等の操作を見る

このような動きになるのが特徴です。

F型

Webレイアウト|F型

アルファベットの大文字「F」のカタチに沿った目の動きをとらえたパターン。

この資格の動きには、試験や手続き等の案内ページが代表的です。

  1. ページ内に記載のある流れを理解する
  2. 上から順に説明を熟読する

このように省略をせずに最初から最後まできちんと読むという意識が働くと、人はF型で文字を読もうとしているのです。

 

ユーザーの目の動きをコントロールするコツ

hpでユーザーの目の動きをコントロールするコツ

どうすればユーザーは伝えたいものを見ようとしてくれるのか?

この答えとして、形の大小に注目する。

例えば、文字のフォントサイズを変更する。

ブログやホームページだけではありません。

週刊誌や月刊誌にも必ず工夫があります。

それは、

  1. 大見出し
  2. 小見出し
  3. メインキーワード
  4. インパクトのある一文

こうしたパーツだけ他よりもサイズを大きくすることで人の目を惹くことが可能です。

中間位にメインを配置する

メインを配置するのはどこ

人間は、インターネットサーフィンをしている時、最初に目に留まったものをまず最初に手にすることは少ないです。

なぜか?

周辺の情報を見てからその場に戻ってくることを考えているからです。

つまり、メインを最初に出すことはメリットがありません。

では、最後にしたらどうでしょうか?

この答えとしては、

「最初から最後まで見るか?」が重要になります。

最後まで見ない人も当然出てきます。

そうした時、最初に見た商品よりも中間に出てきた商品がインパクトがあった。

「この商品は、かなりお得、欲しい情報だ。」

こう認識すると、人は行動を起こしやすいのです。

つまりは、すべての情報を均一に並べるのではない。

インパクトを与えられる要素を配置から工夫する。

これが行動を起こさせるきっかけにつながるのです。

同型、同色を使う工夫

Webデザイン|色の選び方

人は、同じ形と同じ色を見ていると流れに沿ってみることが多い。

しかし、一部に特殊的なものがあるとどうなるのか?

インパクトがある物だけを見てしまい、他が全く見向きもされない。

これでは、その商品が相当自信がある内容でなければ、比較や検討の候補を生み出すこともできなくなってしまう。

  1. 考えさせる。
  2. 多少の色やフォントサイズでインパクトを与える
  3. 全体的には同じ雰囲気で見せる

このようにしておくと、その中で、集中して探すことが可能になります。

By