流し読みしやすいデザインと、成功するサイトの関係 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
十年以上にわたり、デザイナーたちはウェブサイトへのトラフィックを増やし維持する技術に磨きをかけてきました。最良の戦略のひとつは、読んで共有する価値のあるコンテンツをつくることです。そうすれば、サイトへの参照によるトラフィックを増やし、興味と関心を持つ読者を呼び込むことができます。しかし、そうやって惹きつけた読者をしばらく滞在させるにはどのようにしたら良いのでしょうか？
ここで重要になるのが流し読みの容易さです。最も重要で関心の高い情報を簡単に見つけられるようにすることで、より優れた体験が提供できます。顧客をより幸せにできる企業が市場シェア獲得しがちな今の世界では、優れたユーザー体験が企業の評判や、おそらくビジネスにも影響を与えることでしょう。
そこで、コンテンツをいくつかの流し読み可能なセクションに分けることを提案します。この記事では、いくつかの一般的な流し読みのパターンと、コンテンツを流し読みしやすくしてユーザー体験を向上させるためにできることを紹介します。
なぜ流し読みのしやすさが重要なのか？
この記事で流し読みのしやすさと呼んでいるものは、ターゲットのユーザーにとっての、言葉を読んで理解することの容易さです。よりUXデザインらしい定義としてUX mattersは、「より多くの人がコンテンツを読まないという事実を埋め合わせる執筆とフォーマット技術の総合的な効果」と定義しています。「人が読まない」の部分について説明する前に、この定義のもうひとつの重要な部分である「執筆」について説明します。
考慮すべき最も重要なものはコンテンツ、すなわち言葉そのものです。読者はすぐに要点を知りたいと思っています。調査によれば、十分な教育を受けた専門家でさえ、長々と続く説明や記述を望んでいないことは明らかです。簡潔で流し読み可能なコンテンツは、要点を明確にしてメッセージを伝え、すぐ次に進むのに役立ちます。
出典： ニールセン・ノーマン・グループ
流し読みしやすいサイトは、サイトの価値をより効果的に伝達できます。そのため、訪問者がサイトに留まり、そのコンテンツにより深く関わりを持つようになる可能性が高まります。
人々が流し読みする理由
サイトのための人とコンピューターのインタラクションデザインを検討する際に、念頭に置いておくべき非常に重要な点があります。
ニールセン・ノーマン・グループが行なった独創的な研究によると、ウェブページを1語ずつ読む人はわずか16%に過ぎません。さらに、テストユーザーの79%は新しいページを目にしたとき、全て流し読みしていました。その理由は次のとおりです。
- コンピュータの画面表示は読みにくく、印刷物を読むよりも1/4遅くなる
- インターネットは、クリックし、フォローし、シェアするメディアだと印象付けられているため。人々は何かをしている必要性を感じ、それを探そうとする
- 読むべきものや訪れるべきサイトは無数に存在し、個々に注意が注がれる時間は短い
- 人々は求めている情報のために労力を費やしたがらない。複数のことに注意を払いながら、あるタスクを完了しようとしたり、何らかの事実を見つけようとするのはよくあること
一般的な流し読みのパターン
幸いなことに、インターネット上のサイトやページを流し読みする人にはいくつかのパターンがあることが研究によって示されています。これらの傾向や振る舞いを知ることで、流し読みしやすいコンテンツをデザインする際に、整理された考え方を持って始めることができるでしょう。
F形
F型は最も一般的なパターンです。まず、セクションまたはページの上部を左から右にスキャンします。次に、ページを少し下に移動し、再度左から右にスキャンします。最後に、セクションまたはページの左側を上から下にスキャンします。
アイトラッキング調査の結果は、ユーザーの目の動きが大文字のF型になることを示した 出典:ニールセン・ノーマン・グループ
スポット型
スポット型のパターンは、一見どちらかといえば不規則に見えるかもしれません。しかし、これは理にかなった動きです。読者の目は、2つの要因のいずれかに基づいて単語あるいは単語の塊の間をジャンプします。ひとつ目の要因は、（複数の）単語が読者の注意を引くようにスタイル設定されていることです。もうひとつの要因は、テキストが読者の達成しようとしているタスクに不可欠な情報に近いこと（特定の日付や住所のように）です。
アイトラッキング調査の結果は、ユーザーがページをスキャンする際に3つのホットスポットに焦点を合わせていることを示した 出典:ニールセン・ノーマン・グループ
レイヤーケーキ型
レイヤーケーキのパターンは、読者の注意がページの見出しと小見出しに最初に集中するケースを示しています。アイトラッキング調査によると、読者は探している情報を見つけるまで、これらの見出しを追い続けます。目的に近い見出しを見つけると、より密接に、より深いレベルの関心を持って読むようになります。
このパターンは、水平の線とその間の空白の重ね合わせに見え、レイヤーケーキ（内部が層になっているケーキ）に似ています。
ニールセン・ノーマン・グループ
アイトラッキング調査の結果は、ユーザーの焦点がページ全体に散らばっていることを示している 出典:ニールセン・ノーマン・グループ
コミット型
コミット型は流し読みではなく、ページ上のすべての単語を読み取ります。インターネット上の大半の読者はサイトを流し読みしますが、中にはサイトののコンテンツに高い興味を持っている人もいます。彼らには学ぶ意欲があります。情報源とブランドを信頼し、自分が求めている情報を得るのに適切な場所にいると信じられるときに、人々は最も意欲的な読者になります。
アイトラッキング調査の結果は、ユーザーの注意がページ全体に渡っていることを示している 出典:ニールセン・ノーマン・グループ
他のパターンは、多数の画像またはデータが密、または不明瞭なパターンで表示されるページコンテンツで起こります（たとえば、ジグザグ型、徹底的なレビューなど）。
コンテンツを流し読みしやすくする方法
一般的に、ほとんどのユーザーは、ウェブサイトを訪れたときには特定のタスクを実行することを想定しています。典型的なタスクには以下のようなものがあります。
- ユーザー・インタフェース内であるタスクを実行
- 何かをする方法を学ぶ
- 特定のトピックに関する事実の理解やアドバイスの発見
ユーザーまたは閲覧者がページを流し読みしてタスクを実行するために必要なものを見つけることができれば、優れたユーザー体験のデザインに成功していると言えます。流し読み可能なテキストの価値は過去数十年にわたって詳細に研究されてきました。そのため、オンラインコンテンツをデザインする際に考慮すべきUXのベストプラクティスのリストが確立されています。コンテンツを流し読みしやすくするために、次のベストプラクティスのいくつかをデザインに組み込んでみましょう。
1. 読みやすい記述方法で書く
長いテキストブロックをより短いセクションに分割します。パラグラフごとに1つのアイデアをカバーすることを目指しましょう。それ以上含めると読者の注意を失う危険があります。もし読者をパラグラフの最初の数語で惹きつけられなければ、その先に書かれているすばらしい知見やアイデアに読み進むことはないでしょう。
2. 認識しやすい視覚的階層を確立する
視覚的な階層構造を使ってページのコンテンツの整理、配置、スタイル設定を行うと、コンテンツを認識し理解しやすくできます。視覚的階層の主要なゴールは、ユーザーが個々のコンテンツの重要度を確認できるようにすることです。太字、斜体、ハイパーリンクなどのテキストスタイルの違いを利用して、強調したいコンテンツに読者の注意を引くことができます。（これはスポット型に最も効果的です）
視覚的階層を決定するに考慮すべきその他の重要な要素は次のとおりです。
- サイズ： 大きな要素ほど注意を引きます。
- カラー： 明るい色が目立ちます。
- コントラスト： 明確な違いが好奇心を惹きつけ、関心は明るい方の要素に向けられます。
- 近接： 近くに配置されている要素は関連していると見なされます。
3. ホワイトスペースを有効活用する
読者がテキストや画像に集中するには、周囲に十分な余白が必要です。小さなスペースにあまりにも多くのコンテンツを詰め込むと、読者は圧倒されてしまいます。
十分なスペースがない場合は、ページ要素を正しく読み取れなくなります。そのため、ユーザーが見つけたいものを見逃してしまうリスクが生まれます。ヘッダーとセクションの間、段落の間、画像やビデオなどの視覚要素の前後に十分な区切りがあることを確認しましょう。
4. 画像と動画を使用する
視覚要素は、ムードを設定したり、メインのメッセージを伝えるのに役立ちます。また、視覚的な階層を確立する上で大きな役割を果たし、テキストの内容を理解しやすくします。視覚要素は言葉よりも速く認識されるため、重要な情報をすばやく伝えるために役立ちます。
5. 箇条書きリストと番号付きリストを作成する
リストは、関連するデータや情報を整理するための優れた方法です。また、箇条書き自体が読者の関心を引く視覚的な要素となります。
流し読みの容易さは、ユーザー体験を向上させる
サイトを訪れた訪問者が、ランディングページのすべての単語を読むことはおろらくないでしょう。ですが、ウェブサイトの流し読みをデザインの優先事項にする準備ができていれば心配はありません。コンテンツの流し読みのパターンと、サイトをスキャンしやすくするためのベストプラクティスを把握しておけば、優れたユーザー体験のデザインに有利になります。素晴らしい体験は、より幸せな訪問者を生み、より幸せな訪問者はビジネスの成功に貢献するでしょう。
この記事はImproving Website Scannability for UX Design Success（著者:Will Fanguy）の抄訳です