この表題「視線誘導」って何？と読者の方は疑問になると思うが、それを説明する前に、まず視線とはどんなものか考えて欲しい。

人の視線というのは同時に複数の内容に注目できなく、限られている範囲しか見ることができない。
テレビやパソコンはともかく、スマホとスマートウォッチのような小さい画面でも、スクリーンの情報を読み取る際には、ある順番に沿って回覧することとなる。

スクリーン上の内容をどんな順番で見るかはUX・UIのデザインによって変える事ができて、これこそが”視線誘導”ということである。
視線の動きを意識したUX・UIデザインは、ユーザーに見て欲しい重要な内容をもっと気づかせられる。売りたいポイントをユーザーに伝え、ユーザーの興味関心をつかむことができ、サービスを成功させることにもつながるだろう。

視線誘導は一般的に下記の3パターンに分けられる： F型、Z型、N型。

 

F型

・定義：ユーザーの視線が左上→右上→左下→右下→更に下の順に動くパターンのこと。
このパターンは次のZパターンと一見似ているが、左の内容が軸として、何回も見られる内容となる。
ページのトップ部分が良く見られるが、ページの下に行くと内容が飛ばされるがち。

F型の視線パターンを示す矢印と、ページ上部と左側に沿って赤い視線の跡が重なるWebページの模式図
Webページ3例のアイトラッキングのヒートマップ。視線が上部と左側に集中しF字状に分布している
F-Shaped Pattern For Reading Web ContentF-Shaped Pattern For Reading Web Content

・使う例：テキストの比重が高いコンテンツ、リスト型の構成、左にメニューが配置されてる場合

F型の視線の流れが当てはまるPC・スマホ画面のレイアウト例を複数並べた図

・ポイント：Fパターンに重要メッセージを上部に配置する、

 

Z型

・定義：ユーザーの視線が左上→右上→左下→右下の順に巡回するパターンのこと。

Z型の視線パターンを示す矢印と、カードが格子状に並ぶページ上を赤い視線がZ字に流れる模式図

・使う例：センタリング配置のUI、画像やカードが均等に並んでいるページ、内容がシンプルなUI（特にスマホの詳細ページUI）

Z型の視線の流れが当てはまる、カード配置やセンタリング配置のPC・スマホ画面レイアウト例

・ポイント：視線が左上と右下が止まるので、そこに重要なメッセージやアクションボタンを配置すべき。

 

N型

・定義：ユーザーの視線が右上→右下→左上→左下の順に巡回するパターンのこと。Zパターンを90°曲げるパターンになるが。Zと違うのが画像やカードが均等に並んでいるページには適用できない。

N型の視線パターンを示す矢印と、縦方向に上から下へ読み進め右の列へ移るページの模式図

・使う例：小説のような縦書きのUI、縦に3つ、３つ以上の列がある場合

N型の視線の流れが当てはまる、縦に複数の列が並ぶ画面レイアウト例3点

・ポイント：視線が左上と右下で止まるので、そこに重要なメッセージやアクションボタンを配置すべき。

今後UI・UXデザインする際に、視線を動きを考えてみたら、もっとユーザー体験のいいデザインができるかもしれない。

 

以上、簡単ですが３つのパターンに関して整理しましたので、参考にしてみて下さい！
それでは次回のブログもお楽しみに！