web-dev-qa-db-ja.com

テキストの列はウェブサイトの読みやすさを損ないますか?

新聞や雑誌の複数のコラムに分割された記事を読むのに問題はありませんが、これはWebに引き継がれていないようです。

私は最近、2列のテキストを含むWeb上の記事に出くわしました。右の列に焦点を合わせるのは非常に難しいと思いました。 CSSを少しいじってみましたが、色、フォントサイズ、列のギャップ、行の高さを調整した後でも、適切に焦点を合わせることができず、目が左に流れ続けました。

私の頭脳は、Web上の記事のメインコンテンツであるテキストの1列に慣れているだけですか?

また、この記事は長いため、左側のコラムを読み終えて右側を読んだ後、一番上までスクロールする必要がありました。これは私が思うほどユーザビリティに悪いのでしょうか?一番上までスクロールしなければならないのは明らかに無駄です。

8
Bill Criswell

見なくてもテキストのレイアウトの正確な問題が何であるかを理解するのは難しいのですが、こちらの記事( レイアウトのテキストの列を利用するための実用的なヒント )が述べていることですWebサイトで複数の列を使用する

今日目にする多くの印刷およびWebデザインでは、メインのテキスト要素にシンプルな1列のデザインを採用しています。ほとんどの印刷された本は、ページごとに1列のテキストを使用しますが、これは常に傾向とは限りませんでした。古いハードカバーの本の多くは、ページごとに2列のテキストを備えていました。辞書や年鑑などの本では、複数の列形式が今でも一般的に使用されています。ページを下にスクロールしてもタイプが読みやすいように、Webサイトのタイプには単一の列を使用することをお勧めします。

複数列のレイアウトは、印刷プロジェクトや電子書籍リーダーなど、一度にすべて表示できるアプリケーション用に予約するのが最適です。複数列のレイアウトは、新聞や雑誌の出版社やニュースレターで最も一般的に使用されています。

この学術論文( Is Multiple-Column Online Text Better?It Depends! )は、単一および複数の列の使用によって読み取り速度がどのように影響を受けるかについて述べています。

この研究の目的は、複数の列とテキストの正当化がオンラインの読解にどのように影響するかを、読解速度、理解力、および物語のパッセージの満足度の観点から調査することでした。この研究の結果は、2列の完全に位置合わせされたテキストの方が、1列の完全に位置合わせされたテキストよりも読み取り速度が大幅に速いことを示しています。事後分析では、この形式から最も恩恵を受けたのは最速の読者であることを示しました。

遅い方のリーダーは、1列の左揃えの条件で、最も速い読み取りと最高の読み取り効率を示しました。これは、非常に短い線が、各注視点で最適な量の情報を取り込む読者の能力を妨げていたためと考えられます。 Gutherie&Wigfield(2000)は、遅い読者は文の始まりに関するすべての情報を、最後まで読む前に短期記憶から失う可能性があると主張しています。遅い読者も、同じ理由で、複数の行の長さの条件で「自分の場所を維持する」ことが困難だった可能性があります。

以下に示すのは、これからの複数の列にわたる相対的な読み取り速度のグラフです 記事

enter image description here

あなたのコメントに関して

また、この記事は長いため、左側のコラムを読み終えて右側を読んだ後、一番上までスクロールする必要がありました。これは私が思うほどユーザビリティに悪いのでしょうか?

目を下から上に動かしながら画面の中心点に突然移行し、読み取り中に左端からではなく中心点からスキャンを開始する必要があるため、間違いなく同意します。段落ごとのテキストの最適な量については、これからの抜粋をチェックしてください article 読みやすさについて

テキストのブロックは長すぎたり広すぎたりしてはいけません。

段落が長くなると、余白が少なくなるため、読みにくくなります。空白は段落の形を与え、視覚的な方向付けのように機能し、場所を見つけやすくし、次の行の始まりを見つけやすくします。より多くの小さい段落を使用すると、Webコンテンツに特に適しています。これは、独自の段落に配置するか、新しい段落を開始することにより、より有用なフレーズを微妙に強調できるためです。

同様の理由で、長い行(長い段落)は、狭い行よりも遅く、読みにくくなっています。約100文字の行は、一口サイズのきちんとしたテキストのチャンクを示し、簡単にデコードできます。また、次の行の先頭までスキャンするのが非常に簡単になります。

7
Mervin