2. Use Headings to Break Up Long Articles
A usability study described in an article by web content management expert Gerry McGovern led him to the conclusion that Internet readers inspect webpages in blocks and sections, or what he calls "block reading."
That is, when we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we're actively looking for.
An eye-tracking study conducted by Nielsen revealed an eye-movement pattern that could further support this idea that web users do indeed read in chunks: We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.
We can do several things to accommodate these reading patterns. One strategy is to break up long articles into sections so that users can easily skim down the page. This applies to block reading (because blocks of text are denoted by headings) as well as the F-shaped pattern, because we're attracted to the headings as we move down the page.
Below, you'll see the same set of text formatted without headings (version 1) and with headings (version 2). See which one helps readers quickly skip to the sections that interest them the most.
What you can do:
Before writing a post, consider organizing your thoughts in logical chunks by first outlining what you'll write.
Use simple and concise headings.
Use keyword-rich headings to aid skimming, as well as those that use their browser's search feature (Ctrl + F on Windows, Command + F on Mac).
3. Help Readers Scan Your Webpages Quickly
As indicated in the usability study by Nielsen referenced earlier, as well as the other supporting evidence that web users tend to skim content, designing and structuring your webpages with skimming in mind can improve usability (as much as 47% according to the research mentioned above).
What you can do:
Make the first two words count, because users tend to read the first few words of headings, titles and links when they're scanning a webpage.
Front-load keywords in webpage titles, headings and links by using the passive voice as an effective writing device.
Use the inverted pyramid writing style to place important information at the top of your articles.
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.
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.
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.
Series Supported by join.me
The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.