ユーザーの視線の“流れ”気にしていますか？【ユーザビリティTips】

　Webサイトは、ユーザーの視線の流れを想定して作ることで、ユーザビリティが大きく向上します。そこで今回は、ページ内の表を例に、視線を意識したサイト設計のヒントをご紹介します。（ユーザビリティ実践メモの中から編集部がチョイスした記事を転載しています）。

「視線」の流れを意識して、分かりやすい表をつくる

　弊社のユーザー行動観察調査では、アイトラッキング（ユーザーの視線分析）を利用していますが、ある程度ユーザー理解があれば、「認知的ウォークスルー」（ユーザーになりきってそのサイトを検証する）という手法でも、視線の流れを意識したサイト評価・設計ができるようになります。今回はWebページ内の表のつくり方を例に、「視線を意識したサイト設計」のヒントをご紹介しましょう。まず下記の例をご覧ください。

　このニュース一覧は、ぱっと見はきれいなのですが、実際にはユーザーの情報収集を妨げています。その理由が分かりますか？

　この例の場合、ユーザーはまず文頭を見て自分に必要な情報を探すのに対し、文章が中央揃えになっているため、視線を左右に動かす必要があり、情報収集の効率を下げています。

　そこで、文頭を左寄せにすると視線がスムーズに流れ、表が読みやすくなります。

　ただし、左寄せが万能なわけではありません。次の例をご覧ください。

　いかがでしょう？何かちょっと引っかかる感じがしませんか？

　この例では、数値の大小比較というシチュエーションなのに、一目で大小が分からないことが問題です。また、単なる大小ではなく、「どれがどのくらい大きいか」という関心を持っているユーザーの場合、桁数を把握するためのコンマが視線の流れをサポートすることが想定されるため、コンマの位置を合わせる配慮が必要となります（そもそもコンマ自体がない場合だと、桁数を誤解してしまう恐れもあります）。

　以下のように右寄せにすると、数値の大小が分かり、コンマの位置も揃うので、桁数自体も把握しやすくなります。

　みなさんも普段、Webサイトはもちろん、広告や新聞記事などを見る際にも、視線の流れを意識して「ユーザーはどんな風にこの画面を見ているのだろう」と意識してみてください。そこからサイト改善のヒントが見つかるかもしれません。