TOP UX用語 ツール・フレームワーク・方法論 視線誘導

視線誘導 Visual guidance

目の動きの特性を使って画面上で誘導をかけること

代表的な視線誘導

①視線は上から下まで移動する

欧文文化は左から右へ、上から下へ視線が流れていきます。

グーテンベルク・ダイヤグラム

育った文化によって異なる右からよむ文化圏の人々は右から左へ誘導されていく

グーテンベルク・ダイヤグラムとは均等・均質に分布した情報を、欧文式の文章を読む訓練をしている場合、視線が移動する一般的なパターンを定義しています。

  • 上方左側を「最初の視覚領域」
  • 下方右側を「終着領域」
  • 上方右側を「強い休閑領域」
  • 下方左側を「弱い休閑領域」
  • 均等で同質な情報である(異質な要素がない)

ニールセン博士によれば、

  • ユーザーまず、水平に読み、コンテンツエリアの上部を、横に読み進むのが一般的である。この一つ目の要素がFの上の横棒を形成する。
  • 次に、ユーザーは視線を少し下に移動し、また水平方向に視線を動かす。はじめの水平移動よりも少し短い距離で視線が止まるのが一般的。これにより、Fの下の横棒が形成される。
  •  最後に、ユーザーの視線はコンテンツの左側を縦に動く。ゆっくりと上から下へと視線を移動させる場合は、ヒートマップ上でソリッドな実線となり、素早く視線を移動した場合には、斑な線となる。この最後の要素が、Fの縦の棒を形成する。

出典:こちら

Z型

視線の開始は左上→右上→左下→右下の順で移動します。
書籍やチラシの横書きのものによく見られます。

F型

webサイトなどを見るときに見られる視線移動です。
左上から左下へ下りながら、各記事を見ていくパターンです。

②大きいものから小さいものへ

見出しなどを大きくし、その記事を小さくすると、見出し→記事を自然と誘導できます。

③視線は近接するものへ移動する

視線は近くにあるものへ移動していきます。1つを目に入れたときに似た情報のものへ流れていきます。

④視線は同じ色や形へ流れる

人の視線は同じ形や同じ色を追う傾向があります。
同じ色や形を繰り返し使うことで全体に統一感は出る効果もあります。

UX DAYS TOKYO オーガナイザ/デジタルマーケティングコンサルタント 著書 ・ノンデザイナーでもわかる UX+理論で作るWebデザインGoogle Search Consoleの教科書 毎年春に行われているUX DAYS TOKYOは私自身の学びの場にもなっています。学んだ知識を実践し勉強会やブログなどでフィードバックしています。 UXは奥が深いので、みなさん一緒に勉強していきましょう! スローガンは「早く学ぶより深く学ぶ」「本質のUXを突き止める」です。

「UX用語」のカテゴリー