4. Use Bulleted Lists and Text Formatting
According to an eye-tracking study by ClickTale, users fixate longer on bulleted lists and text formatting (such as bolding and italics).
These text-styling tools can garner attention because of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases.
What you can do:
Consider breaking up a paragraph into bulleted points.
Highlight important information in bold and italics.
4.箇条書きとテキストフォーマを使ってください。
ClickTaleによる眼球追跡によると、人は箇条書き項目とテキストフォーマット(太い文字や斜め文字)に長く目を向けます。
これらの体裁は目立ちやすくまたパーツを分けたり重要語句を際立たすことにより読むスピードを速め、注目を集める事が出来ます。
できること:
段落を箇条書きのに分けること考えてください。
重要な太い文字、斜め文字情報を際立たせてください。
5. Give Text Blocks Sufficient Spacing
The spacing between characters, words, lines and paragraphs is important. How type is set on your webpages can drastically affect the legibility (and thus, reading speeds) of readers.
In a study called “Reading Online Text: A Comparison of Four White Space Layouts,” the researchers discovered that manipulating the amount of margins of a passage affected reading comprehension and speed.
5.文章のグロックごとに適切な間隔を入れる
文字や単語、行間や段落ごとの間隔は重要な要素だ。ウェブページの文字がどのように並んでいるかが、読みやすさ(つまり読むスピード)を大きく左右する。
「オンラインの文章を読む:余白のレイアウト4種類の比較」という研究で、研究者らは文の余白が変われば読解度や読むスピードも変わることを発見した。
What you can do:
・Evaluate your webpages’ typography for spacing issues and then modify your site’s CSS as needed.
・Get to know CSS properties that affect spacing in your text. The ones that will give you the most bang for your buck are margin, padding, line-height, word-spacing, letter-spacing and text-indent.
実践しよう。
・スペースの取り方についてページのレイアウトを評価し、必要に応じてサイトの CSS を修正する。
・スペースに影響を与える CSS のプロパティについて理解する。試す価値があると思われるのは、margin、padding、line-height、word-spacing、letter-spacing、text-indent である。
6. Make Hyperlinked Text User-Friendly
One big advantage of web-based content is our ability to use hyperlinks. The proper use of hyperlinks can aid readability.
What you can do:
・Indicate which links have already been visited by the user by styling the :visited CSS selector differently from normal links, as suggested by Nielsen, so that readers quickly learn which links they’ve already tried.
・Use the title attribute to give hyperlinks additional context and let users know what to expect once they click the link.
・For additional tips, read >Visualizing Links: 7 Design Guidelines.
6. ハイパーリンクをユーザーフレンドリーにする
ウェブベースのコンテンツは先進的なものであるが、その大きな理由のひとつは、ハイパーリンクが利用できることである。ハイパーリンクを正しく使うとリーダビリティーを向上できる。
実践しよう。
・すでにユーザーによって開かれたリンクを CSS セレクタ :visited を使って通常のリンクと異なるスタイルにする。どのリンクを試したか、読者に一目で分かるようにすることがニールセンによって提唱されている。
・title 属性を用いてハイパーリンクに補足情報を付加し、リンクをクリックすると何が起きるかユーザーに分かるようにする。
・さらなるティップスについて、Visualizing Links: 7 Design Guidelines を参照していただきたい。
7. Use Visuals Strategically
Photos, charts and graphs are worth a thousand words. Using visuals effectively can enhance readability when they replace or reinforce long blocks of textual content.
In fact, an eye-tracking study conducted by Nielsen suggests that users pay “close attention to photos and other images that contain relevant information.”
7.視覚効果を戦略的に使う
写真、チャートやグラフを用いれば、百聞は一見にしかずだ。長い文章をそれらの視覚効果に変えたり、もしくは長い文章を視覚効果で補うなど、視覚効果を有効に使えば、リーダビリティーは向上する。
実のところ、ニールセン氏が行なった視標追跡研究から、ユーザーは関連のある情報が含まれている写真やイメージ図に細心の注意を払っていることが示された。
Users, however, also ignore certain images, particularly stock photos merely included as decorative artwork. Another eye-tracking study reported a 34% increase in memory retention when unnecessary images were removed in conjunction with other content revisions.
What you can do:
・Make sure images you use aid or support textual content.
・Avoid stock photos and meaningless visuals.
しかし、ユーザーもまた特定のイメージ図や、特に飾りとして使われているにすぎない陳腐な写真などには目もくれない。別の視標追跡研究では、不要なイメージ図が他の内容修正とともに削除された場合、記憶保持率は34%向上していることが報告されている。
できること:
・使用するイメージ図は文章の内容を助け、サポートするものであること
・陳腐な写真や意味のない視覚効果は避けること