Most people don’t read through the content we put on our websites. They skim and scan the pages, taking in headings, the beginnings of paragraphs, and first words of sentences. They’re looking for something that strikes their attention or matches the question or need they have. If they find it, they dig in and read more carefully.
To help our web visitors find what they’re looking for, we can create webpages that are easy to scan. Here are 10 “how-to” tips.
- Include a table of contents
- State the most important information in the first two paragraphs
- Chunk content in short paragraphs
- Put only one main IDEA in a paragraph
- Bold headings and subheadings
- Front load headings with significant words
- Use bullets, numbered lists, and numerals
- Don’t center text on the page
- Make your links meaningful
- Test your site with a few users
________________________________
1 | Include a Table of Contents
You can start webpages (especially longer ones) with a table of contents. This gives readers a quick snapshot of the content they’re going to find on that page. The items in the table of contents should match the major headings or sections of the page and be linked to those sections, so that users can rappel like rock climbers down the text.
2 | State the Most Important Information in the First Two Paragraphs
We have to state the essential message of the page first, right off the bat. Immediately. In the first two paragraphs. Why? Because web visitors give 80% of their attention to what’s “above the fold” on the webpage. “Above the fold” means the content they initially see when they land on the page (without scrolling).
Putting the most important information first means that web users will actually see it. Of course, doing so violates the rules of writing we learned in high school. We’re supposed to start with a nice intro, lay the foundation, give some background and context, and kind of ease into our topic.
But writing for the web is very different from writing for print. Giving a quick overview of the content in the first two paragraphs of a webpage “helps the reader get the point and purpose of a page instantly, letting the user make a quick judgement whether to read on for a bit more detail.”
3 | Chunk Content in Short Paragraphs
Short and concise paragraphs are easier to scan—and, importantly, they get twice as many eye fixations as long paragraphs. Web users also pay more attention to the first words in a sentence and to the first and last sentences in a paragraph. So put keywords or information-carrying words first, where they’ll catch the eye.
How short is short? Less than 100 words seems to be the conventional wisdom on how long web paragraphs should be. The content will drive how you chunk the information. Cut out what’s unnecessary to getting your point across. Start a new paragraph when you find yourself veering away from the one single point of the paragraph.
Want more info on how to chunk? Try our companion page Chunking Your Content .
4 | Put Only One Main Idea in a Paragraph
Rule of thumb from eye-tracking studies: Limit each paragraph to one main idea. Front load your message at the beginning of the paragraph, where it’s more likely to be seen. You don’t want readers to stop reading before they get to the heart of your message.
5 | Bold Headings and Subheadings
Headings and subheadings are one of the main ways that web readers skim the page for content of interest. This behavior turns each heading or subheading into a kind of landmark. Writing strong and clear headings and subheadings helps readers:
- grasp the content at a glance,
- skip what they’re not interested in, and
- settle quickly on what they’re looking for (if it’s there).
To write strong, clear, information-carrying headings, consider these suggestions:
- Make headers into questions that your web visitors often ask. Phrase the question as if they themselves were asking it (“Where can I have my child evaluated?”). Then answer the question, using the word “you” (“If your child is in school, you would ask the school to evaluate your child”).
- Write headers as action statements. Try to avoid starting headers with nouns, which are passive. Verbs are active and affirmative. Be crisp and clear in your language. Here are some examples:
- Make the headings stand out to the eye. Make them look different from the rest of the text by bolding them or putting them in a different color, font, or size.
- Keep headings short. Readers on the web see the first two words of a sentence or phrase most clearly. Consider starting with a keyword. For example: Cost: Will I have to pay for these services? (Psst: Also see #6 below.)
In sum, remember that web readers are usually looking for something, so use headers that help readers find it.
6 | Front Load Headings with Significant Words
Start your headings with content-significant words. Users scan down the left margin (remember the F-shaped reading pattern?), and they tend to note the first two words in a sentence or heading. It only makes sense to put the most important words where they’re likely to see them. An added bonus is that headings with keywords in them are easier for search engines to find and use.
Examples? Sure. We draw these from our article called Evaluating Children for Disability. Here are the first 6 headers in that webpage. These also appear in the table of contents that heads the page, with links to carry visitors down to sections of interest.
- Purposes of evaluation
- IDEA’s definition of “child with a disability”
- Identifying children for evaluation
- Giving parents notice
- Parent consent
- Timeframe for initial evaluation
7 | Use Bullets, Numbered Lists, and Numerals
The value of bullets is that they break down walls of words and can be quickly scanned by web users. While most of us don’t want to read a page of nothing but bullets, when they’re used well, bullets can truly serve our users’ need for grabbing information on the go.
Numbered lists accomplish the same goal. They are also easy on the eyes, and are great for providing instructions that involve going step by step through a task or process.
Here’s a surprise: Use numerals, instead of spelling out the number as a word (e.g., 7 as opposed to seven). Yes, we know that we’re supposed to write out the numbers 1-10, but that’s a rule from writing for print. Using the numeral on the web is recommended.
Since web skimmers are on a mission and moving fast, numerals speed them along, take up less space in their field of vision, and hold the exact same meaning as the longer number word that fades into that wall of text.
8 | Don’t Center Headings or Text on the Page
Centering text on the page is another artifact of writing for print that doesn’t work well on the web. Why? Because people scanning pay the most attention to content along the left margin. Only 30% of their attention goes to the right side of the page, so they are very likely to miss what’s in the middle.
In print, we use centered headings to show the hierarchy of ideas and content. Centered headings show a high level in the hierarchy. Because we sure don’t want our online readers to miss a key heading that shows them how the content is organized:
- keep all headings and subheadings to the left margin; and
- differentiate their relative levels of importance (and subordination) by using HTML codes that display the various levels in different sizes, colors, or fonts (that your web developer specifies in your site’s cascading style sheet).
9 | Make Your Links Meaningful
How you link text on your site is very important, if a bit surprising. Here’s a quick summary of what eye-tracking research has found about links and user attention:
- User do pay attention to links. So make those links visible! Underline them. Make them different in color from the main text. Make their color change once they’ve been visited by the user.
- Links aligned with the left margin get particular attention.
- Links embedded in the body of the text get less attention.
- Users want to be able to predict what kind of content they’ll find if they follow the link.
A note of caution: Links give users the option to leave and go elsewhere. Too many links, especially those embedded in content, can sidetrack readers from getting your main point.
There’s a lot we can say about the art of crafting your links and the value of doing so. A bit too much, frankly, for the scope of this article. The most salient points we’ve read include the following:
- Links that include content words give readers a sense of what they’ll gain or get by clicking on the link. Having the “information scent” helps them decide whether to follow the link or not (“am I going to find what I’m looking for there?).
- The first two words in the link are the most important for giving readers the information scent, especially if you use content words.
- Use action phrases for action links. Example: “Go to Accounts.”
- Be as clear as you can, even if it takes more room. Example: Instead of a link that says “Resources”, include words in the link that tell what kind of resources the user will find—“Find Other Organizations” or “autism articles on the web” or “Our Tools, Products, and Webinars.”
What about the oft-seen “Click here” as a link? No. Make that a strong no. Make link text descriptive. Example? Sure.
To see pictures of this rash, click here.
See pictures of this rash.
10 | Test Your Site with a Few Users
User testing can help us create pages that most of our users will find appealing and functional. Jakob Nielsen, a well-known web usability researcher, offers extensive articles and videos on his website about how to conduct your own user testing That subject is out of the scope of this article, but if it interests you, then click here. Only kidding!
Seriously, if you want to know more about how to conduct user testing on your site, explore Jacob Nielsen’s research and recommendations.
Want to read another section of Writing for the Web?
- How people read on the web
- Helping readers skim and scan (you’re here)
- Putting your essential message first
- Chunking your information
- Using headings and subheadings
- Writing in plain language