ユーザーが自然と目を向ける、視線誘導を意識したUIデザイン
Goodpatch Blogでは、人の錯視を考慮したUIデザインの手法「視覚調整」についてご紹介しました。
本記事でご紹介する「視線誘導」とは、情報設計に用いられるデザイン手法の１つです。今回は、UIデザインをはじめとするレイアウトにおける視線誘導の事例についてご紹介します。
目次
視線誘導とは
視線誘導とは、ユーザーの視線の流れを意図的にコントロールするために使われる手法の１つです。UIデザインはもちろん、イラストや写真、映像、漫画などアート・デザイン問わず様々な場面で使われています。
視線誘導を使うメリット
視線誘導を意識することで、ユーザーに見せたい情報の順序を意図的にコントロールすることができます。情報の正しい順序を無意識に導き出すことができるので、ユーザーはストレスなく画面を見続けサービスを利用し続けることができます。
情報認知のための視線誘導
視線誘導には大きく分けて２つの目的があります。
- ユーザーに情報を認知させるもの
- ユーザーの視線移動をサポートするもの
情報を認知させるための視線誘導は、ユーザーが注目している部分から注意をそらし、別の部分に視線を移動させる場合に行います。画面上において強調する部分を意図的に配置することで、正しい手順を導き出す目的があります。
視線移動をサポートする視線誘導は、ユーザーに対し次に何の動作を行えば良いかを知らせる場合に使います。モーションエフェクトを使うことで、スワイプする、タップするなどの行為を促すようなUIなどが当てはまります。情報の変化が激しいゲームUIなどに多く使われています。
今回は情報を認知させるための視線誘導に焦点をあてていきます。
グーテンベルグ・ダイアグラム
グーテンベルグ・ダイアグラムとは、表示媒体を4つの区画に分ける考え方です。活版印刷技術の発明者として知られるヨハネス・グーテンベルグの名が由来しています。欧文で書かれたテキストを読むときの人の視線に注目しています。この図式を以下の図で例えると、
❶上方左側が最初の視覚領域
❷上方右側が強い休閑領域
❸下方左側が終着領域
❹下方右側が弱い休閑領域
となっています。
この図式によると、均等に配置された情報を見るとき、視線は左上から右下に流れていくということを示しています。このように、人は均等に配置された情報に触れるとき一定のパターンに基づいて視線を移動させます。
Z型パターン
Z型パターンとはユーザーの視線が左上→右上→左下→右下の順に動くパターンのことです。グーテンベルグ・ダイアグラムと同様のパターンで、情報の強度が均一であるときに効果が表れます。新規のユーザーが初めて触れるデザインや全体の構成を見るとき、横組みのテキストなどに多く用いられ、アルファベットの「Z」のように動くことから『Z型』と呼ばれています。
F型パターン
F型パターンとはユーザーの視線が左下→右上→左下→右下の順に動くパターンのことです。
リピーターのユーザーが前回触れたデザインをもう一度見て、見落とした内容を確認する場合に多く用いられ、Webページを見るときも多くがF型になっています。アルファベットの「F」のように動くことから『F』と呼ばれています。
N型パターン
N型パターンとは、ユーザーの視線が右上→右下→左上→左下の順に動くパターンのことです。
主に日本語で書かれた新聞や雑誌など、縦組みの書籍に多く用いられ、アルファベットの「N」のように動くことから『N型』と呼ばれています。
大から小へ
上記の『Z型』『F型』『N型』パターンだけでなく、情報のかたちそのものを変化させることで視線を誘導する方法があります。
この２つの円形のように、小さい円形より大きい円形の方が画面上に現れる面積比が大きくなるため、視線が左から右へと移動します。このようにコンテンツのサイズに変化をつけることで、視線を意図的にコントロールする方法もあります。
同形、同色へ
それでは情報の優先度がほぼ同じだった場合にはどのように配置すればよいでしょうか。
均一に情報が配置されたとき、人は無意識に同形、同色を探し出し視線を移動させます。このように、同じようなコンテンツの数が多いときに同形、同色で並べることで視線誘導の効果が表れます。
数の順序
数字を使うことも大事な視線誘導の方法です。
数字を順に数えることは老若男女問わず、無意識に行う行為です。情報に数字をつけることで無意識的に数字を数えさせ、視線を数字にそって移動させることができます。
また、バラバラに散らばる情報でも数字をふることで順序を明確に示すことができます。しかし予測した視線の先に情報がない場合は、ユーザーのストレスにも繋がるため注意が必要です。
視線誘導を使ったUIデザイン
では、UIデザインにはどのように視線誘導が使われているでしょうか。
フリマアプリメルカリの決済画面にはZ型のパターンが使用されています。購入など手続きの最終工程を画面下に視線を誘導させています。
Twitterのタイムラインの画面には、F型のパターンが使用されています。横組みで文量が多い場合に重要な部分は、F型を適用することでコンテンツに集中してもらえる効果があります。
iPhoneの天気アプリには情報のかたちの大小で視線を誘導させるパターンが使われています。優先度の高い現在の天気や気温が最も大きく配置され、１時間ごとの天気→今週の天気と下に続きます。瞬時に知りたい情報が目に入ることで、ユーザーが情報を探す手間を省くことができます。
TEDのトーク画面でも、情報のかたちの大小で視線を誘導させるパターンが使われています。最新の動画が１番大きく表示され、その他の動画が小さく下に続きます。ユーザーが最も求めている情報を、最初に目に入るようなかたちで配置することで、動画へのアクセスを促します。
SpotifyのSearch画面では、曲のジャンルを全て同じ形で配置しています。それぞれの情報の優先度は変わらないため同じ形で表示し、均一に並べることでユーザーもストレスなく好みのジャンルを探すことができます。
さいごに
今回は視線誘導についてご紹介しました。視線誘導の手法は、ユーザーに対して情報の順序を認知させるものです。UIデザインだけでなく、様々なデザインにぜひ応用してみてください。
参考資料
https://www.domore.co.jp/mobilelab/design/visual-guidance
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
https://www.find-job.net/startup/iphone-ui-design