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.
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.
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.
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.
ウェブベースのコンテンツは先進的なものであるが、その大きな理由のひとつは、ハイパーリンクが利用できることである。ハイパーリンクを正しく使うとリーダビリティーを向上できる。
実践しよう。
・すでにユーザーによって開かれたリンクを CSS セレクタ :visited を使って通常のリンクと異なるスタイルにする。どのリンクを試したか、読者に一目で分かるようにすることがニールセンによって提唱されている。
・title 属性を用いてハイパーリンクに補足情報を付加し、リンクをクリックすると何が起きるかユーザーに分かるようにする。
・さらなるティップスについて、Visualizing Links: 7 Design Guidelines を参照していただきたい。
ウェブコンテンツの大きな利点にハイパーリンクがある。適切なパイパーリンクの使用は文を読みやすくする。
できること:
・Nielsenの提案に従い「:visited」を使ってどのリンクがすでに訪問されたか未訪問のリンクとの区別を表示する。それによってユーザーはどのリンクをすでに踏んでいるか判断出来る。
・リンクに関係のあるタイトルをつけることによってユーザーが分かりやすくなる。
・詳しくは>Visualizing Links: 7 Design Guidelines
インターネットを利用したコンテンツの大きな利点の一つは、ハイパーリンクを利用出来ることである。ハイパーリンクを適切に利用すればさらに読みやすくなる。
出来ること:
・Nielsonが提案しているように、訪問されたCSSセレクタを通常のリンクと異なるデザインにして、ユーザーがすでに訪問したリンク先を示す。そうすれば、読者はどのリンク先をすでに試したのかすぐにわかる。
・タイトルの特性を利用して、ハイパーリンクに文脈を追加し、リンクをクリックすると何が起きるのかユーザーに分かるようにする。
・さらなるヒントとして、Visualizing Links:7デザインガイドラインを読んでほしい。
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.”
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.