Web サイトのページを科学的にデザインする: 視線追跡研究から得た 23 の重要な教訓 - Christina Laun アイトラッキングに関する研究はネットワーク設計の分野で非常に人気がありますが、これらの研究結果を具体的かつ実行可能な運用設計にどのように変換するかはまだ困難です。ここでは、Web サイトのデザインを改善するためのヒントとなる視線追跡の調査結果からいくつかのヒントを紹介します。 1. 画像に比べて文字の方が魅力的 意外に思われるかもしれませんが、Web サイトを閲覧するときにユーザーの目に直接留まるのは画像ではありません。誤ってクリックスルーしてサイトにアクセスするユーザーのほとんどは、画像ではなく情報を探しています。したがって、Web サイトのデザインで最も重要な情報セクションを強調することがデザインの第一原則です。 2. 最初の目の動きは、Web ページの左上隅に焦点を当てます。 結局のところ、ユーザーが Web を閲覧するこの習慣は、左上隅が主要な操作中心であり、最も重要なコンピューター アプリケーションの設計に使用されることを想定しています。 Web サイトを構築し、Web サイトのデザインを検討するときは、この形式を維持するように努める必要があります。自分の個人的な特徴を維持し、成功する Web サイトを構築したい場合は、ユーザーの習慣を尊重する必要があります。 3. ユーザーが Web ページを閲覧するとき、まず Web ページの左上と上部を観察し、次に下に読んで右側のコンテンツを閲覧します。 ユーザーの一般的な閲覧パターンは「F」の形をしています。読者の関心を確実にするために、Web サイト コンテンツの重要な要素がこれらの重要な領域に集中していることを確認してください。見出し、サブタイトル、注目のトピック、重要な記事をここに配置して、読者が読みたくなるようにします。 4. 読者はバナー広告を無視する 調査によると、たとえバナー広告で Web サイトをサポートしていても、読者はほとんどのバナー広告をほんの一瞬しか無視しません。広告を通じて収益を上げたい場合は、広告スペースを革新し、Web サイトの広告フォームを合理的に構成する必要があります。 5. 派手なフォントと書式設定は無視されます なぜ？ユーザーはこれらは広告であり、必要な情報ではないと考えるからです。実際、研究によると、ユーザーは、多くの色で埋められた派手なフォント形式では、視覚的な手がかりが無視するよう指示するため、必要な情報を見つけるのに苦労することがわかっています。ウェブサイトを清潔に保ち、派手な外観のせいで重要な情報が無視されないようにしてください。 6. 数字の代わりに数字を使用する 数字のリストの代わりに数字を使用すると、読者はサイト上で実際の情報を見つけやすくなります。初めてサイトを閲覧する読者に向けて書いていることを意識して、必要な情報を簡単に見つけられるようにし、興味を引き続けられるようにしましょう。 7. フォント サイズはブラウジング動作に影響します あなたのページに対する人々の考え方を変えたいですか? Web ページのフォント サイズを変更します。大きなフォントはブラウジングを刺激し、小さなフォントは集中して読みやすくします。ニーズに応じて、2 つの比率を合理的に構成してください。 8. 興味深いコンテンツに出会ったとき、ユーザーは字幕をもう一度見るだけです。 字幕の固定形式に過度に固執せず、関連性があり興味深いものにしてください。字幕にキーワードを含めて、検索エンジンを効果的に活用して読者を呼び込むこともできます。 9. 人々はほとんどの場合、ウェブの小さな部分だけを閲覧します ユーザーが閲覧する際に情報を提供して、できるだけ早くターゲットを絞り込むと、これを有利に利用できます。特定のセクションを強調表示したり、項目のリストを作成したりして、Web ページの情報を見つけやすく、読みやすくします。 10. 短い段落は長い段落よりも表現力が豊かです Web 情報は、高速ブラウジングを重視するほとんどの非接続ユーザーに提供されます。文脈に左右されない限り、電子商取引 Web サイトのこの商品説明のように、情報は短い段落と文章で構成してください。 11. ビジュアルロックによれば、1 列形式の方が複数列形式よりも表現力が優れています。 ウェブサイトの訪問者を過剰な情報で圧倒しないでください。ほとんどの場合、シンプルさの方が強力です。複数列のコンテンツはユーザーに見落とされやすいため、これらの気を散らす要素を排除する必要があります。 12. Web ページの上部と左側にある広告がより目を引きます。 Web サイトに広告を埋め込む必要がある場合は、視覚的な注目を最大限に集めるために、ページの左上部分に広告を組み込むようにしてください。もちろん、ユーザーがこれらの広告に気づいたからといって、マウスでクリックするわけではありません。したがって、広告の注目を集めるために元の Web サイトのデザインを犠牲にしないでください。 13. 最高のコンテンツの隣に広告を配置すると、注目を集めることができます 広告の視認性とクリック率を高めたい場合は、広告を最も興味深いコンテンツの隣に配置し、Web ページのデザインに組み込むことができます。このようにして、ユーザーは必要なものを見つけることができ、広告の効果を向上させることができます。 14. さまざまなテストで、人々はテキスト広告を最も注意深く読みました。 前述したように、平均的なインターネット ユーザーは、広告であることがすぐに明らかなコンテンツを見ることに多くの時間を費やしません。これがテキスト広告のパフォーマンスが非常に優れている理由です。コンテンツから気を散らすのではなく、ページの残りの部分と溶け込むため、読者にとって視覚的な刺激が少なくなり、この形式の広告がよりうまく読まれる可能性が高くなります。 15. 大きな画像ほど注目を集める Web ページで画像を使用する場合は、大きいほど良いです。人々は、細部がはっきりと見え、情報を得ることができる画像を見る傾向が高くなります。使用する画像が記事の内容と関連していることを確認してください。そうでない場合は、見落とされる可能性が高くなります。ほとんどのリーダーは高速接続を備えているため、サイトでは大きな画像を自由に使用してください。 16. クリーンで鮮明なクローズアップ画像は視覚的な注目を集めます おそらく、これらの抽象的な芸術的な画像はあなたの Web サイトを面白く見せるでしょうが、読者の注目を集めるわけではありません。これらの画像を使用する必要がある場合は、鮮明で読みやすいものであることを確認してください。本物の「人物」の画像は、いわゆるモデルの画像よりも「優れている」ことに注意することが重要です。 17. 注目を集めるタイトル Web ページを閲覧するとき、読者が最初に目につくのはタイトルです。読者が Web サイト全体をスムーズに検索できるように、Web ページ上のすべての関連リンクが明確かつ効果的であることを確認してください。 18. ユーザーはボタンやメニューを見ることに多くの時間を費やします したがって、慎重な設計を維持するために余分な時間を費やす必要があります。結局のところ、それらは読者の目を引くだけでなく、Web サイトのデザインの重要な要素です。 19. フォーム形式により、読者の注意持続時間を延長できる コンテンツと段落を分割し、広範な形式を使用して記事を表現することで、読者の閲覧率を確保できます。数字やその他の記号を使用して記事の重要な内容を強調すると、Web サイトのナビゲーションが容易になり、ユーザーが必要な情報をより早く見つけられるようになります。 20. 大きなテキストブロックのレンダリングを避ける 調査によると、平均的な Web ブラウザでは、テキストがどれほど重要でよく書かれていても、大きなテキスト ブロックを読むのに時間はかかりません。したがって、これらの大きなテキストは小さな段落に分割する必要があります。重要な場所を強調表示し、クリック可能なボタンを配置すると、ユーザーの注意を高めることもできます。 21. 注目を集めるフォーマット テキスト内で太字、大文字、色付きフォント、および下線を使用すると、ユーザーはテキスト内で表現されている最も重要な情報を取得しやすくなります。使用しすぎるとページが読みにくくなり、読者が怖がってしまう可能性があるため、使用する場合は注意が必要です。 22. 空白を上手に活用する Web ページの隅々まで埋め尽くしたくなるかもしれませんが、実際には、サイトのスペースの一部に余裕を持たせたほうが良いでしょう。 Web サイトに情報が過負荷になると、ユーザーが圧倒され、提供されたコンテンツの多くを忘れてしまう可能性があります。そのため、Web ページをシンプルにして、読者が休むための視覚的なスペースを残しておきます。 23. Web ページの上部に配置すると、ナビゲーション ツールがより適切な役割を果たします。 理想的には、読者がサイトを開いたときに最初のページを閲覧するだけでは満足せず、興味のある他のコンテンツを見るためにサイトをスクロールしてもらいたいと考えています。ナビゲーターを Web ページの上部に配置すると、ユーザーはこのツールを使用して必要なターゲット コンテンツを簡単に見つけることができます。