Writing for the Web
As far back as 1997, web usability expert Jakob Nielsen claimed that people don't read on the web. Most all of the research that we've seen since then supports the premise that users tend to scan web pages for information. Knowing this should affect the way we write for the web.
Writing for the web is about making your writing easier to read and use, not dumbing down your ideas. It's also means thinking about your content from the user's point of view.
- Use the inverted pyramid model for organizing your page. Answer who, what, when, where, how, and why in your first sentence or two, and use the paragraphs that follow to include colorful details and less important information. Readers will scan and scroll, especially if they can tell there's content that interests them lower on the page. It's still a good idea to ensure that the first thing they see is the content you most want them to see!
- Use subsections to chunk information. Breaking down information into "bite-sized" pieces helps the reader more easily digest new information.
- Position critical content above the fold. The "fold" is that imaginary line where the bottom of your screen cuts off a page. Content can fall below the fold, but anything critical should fit on that first screen.
- Use one idea per paragraph and keep it short. As in newspapers, one-sentence paragraphs are perfectly legitimate on the Web.
- Consider anchors or accordions for long pages. When you have a lot of information that belongs together on a single page (for example, descriptions of various student organizations), you can create scannable elements that lead to more information, if desired.
- Structure similar content areas in similar fashion, whenever possible. A consistent approach will reinforce the readers' sense of context within your site. For example, all course listings should contain the same information presented in the same way.
- Be succinct and use short sentences, whenever possible. If a shorter, simpler way to say something exists, say it that way. Don't say "Communicate with our team" when "Contact us" will do just fine. Five to 10 words per sentence is ideal.
- Write descriptive, concise page titles. A good page title is brief, descriptive, and refers to the contents of the page. It contains the most important information at the start of the title and uses short, concise words.
- Skip leading articles in page titles. Shorter microcontent is more scannable, and you don't want your content to be listed under "T" in a confused mess with many other pages starting with "The."
- Use common wording. Rather than thinking about new and different turns of a phrase, employ the words that users would mostly likely use to describe or search for information. Incidentally, using those words in your copy will also boost your pages in search engine rankings.
- Make navigation labels clear. Your navigation labels should be to the point and easy to grasp. Users care more about clear than clever.
- Use active voice. Rewrite any sentences that begin with "it is" or "there are," choose strong verbs, and eliminate passive sentences.
- Use authentic voice and tone. Authentic voice sounds true and genuine, the way we speak in a conversation. Readers pay attention and listen to writing that sounds like a person is talking. Use inviting and professional language. Write to your readers in the second-person narrative: Address your audience directly, using "you" and "your."
- Introduce acronyms appropriately. If you must use an acronym, handle it as you would on paper. Spell it out in the first usage on each page and then use the abbreviation thereafter.
- Provide context to the page. Remember that you're in a nonlinear medium, and it's likely visitors will reach your page directly from a search engine. Thus, top-level pages in particular should accommodate that visitor who may need context. This is why the "Admission" page has introductory copy even though an "About" page with introductory copy also exists. (Of course, you don't want to restate everything, so be brief.)
- Avoid "Welcome to our site" and "fluffy" introductions. Readers typically avoid the generic, "feel-good" material and, instead, go directly to more actionable content. As Jakob Nielsen suggests, "Kill the welcome mat and cut to the chase." You can also dispense with "On this web page you will find...." The only time you'll need to explicitly state what is on the page is when the page is lengthy and dense.
- Make your pages actionable. You should give your users options to learn more or take a next step. If your entire page contains no hyperlinks or calls to action, you may be missing multiple opportunities to engage your audience.
- Make your text scannable:
- Use page headings and subheadings. Write headings so readers know exactly what the page is about without reading it word for word. As readers scan down a page, they read the beginnings of headings more than the ends.
- Highlight key phrases and words to draw visitors’ attention.
- Use bulleted lists to pull out key ideas.
- Use formatting for emphasis sparingly. Try to draw attention to everything and you'll effectively draw attention to nothing.
- Do not use the underline format. When it comes to online communications, underlining is associated with hyperlinks.
- Use the Web Style Guide. A style guide provides consistency from page to page and throughout the site. See Miami's Web Content Style Guide.
- Create hyperlinks that hint about the information they're leading to. Links should be appropriately descriptive of content so users know they are on the proper path to finding the information they're looking for. Ensure that descriptions explicitly describe what users will find at the destination. Also keep in mind that URLs used as hyperlinks can be convoluted and nonsensical to a screen reader.
- Use straightforward wording. A clever, but somewhat obscure, link name can cause frustration and confusion.
- Use hyperlinks to provide background information. This allows you to keep the reader focused on the current context of information.
- Avoid excessive hyperlinking. Fundamentally, embedded hyperlinks disrupt the flow of content by encouraging the reader to leave the page. For this reason, try to limit the number of times a reader is prompted to change destinations. Embedded links within the text can be visually distracting as well.
- Guard against irrelevant hyperlinking. Just because you use a word that happens to be the name of another page doesn't mean that it's relevant. Be sure to check the content of the linked page to ensure that it's relevant and will actually help the reader.
- Do not use "Click Here." The oldest web design rule is to avoid "Click Here" as the anchor text. Many reasons for this exist. "Click Here" is a waste of words since they alone don't offer any information about where the link leads. Secondly, only mouse-users do, in fact, click. Lastly, screen readers often read the link text alone, which, in this case, makes the link meaningless. For this reason, linking "Get directions" is a better approach than using "To find directions, click here."
- When creating a link to a page, make it match the title of the page it's linking to. Clicking "Admission" should get you to a page titled "Admission"—not "Getting In" or "Forms & Applications." Content labels have more latitude but the relevance between the name of the hyperlink and the page it links to should be readily apparent. (Otherwise, readers get irritated).
- Hyperlink phrases rather than words, whenever possible. Because users search for swaths of color, they'll find a hyperlink of two or more words more easily than a one-word link.
- When linking to PDFs (or other external documents), signal that you're doing so. For example, it you're linking to a PDF, include "PDF" after the file name. PDFs in Cascade must be remediated for accessibility. Alerting users to file size is not as important these days, but you might consider adding it for very large files. (See the following examples.)
- Admission_Application.pdf (44MB)—This contains the actual file name.
- Board of Trustees Meeting Minutes (PDF 44MB)—This link describes the document; it does not use the actual file name.