Writing for the Web

Let’s figure out the best way to convey information, no matter who our audience is.

How people read online

When reading online, people: 

  • Skim and scan for the information they need 
  • Pay the most attention to information at the top of the page
  • Only read about ⅓ of the words on the page
screenshot of a webpage with a heatmap displaying how users read the webpage, with red showing how users typically read in an F pattern.
A recent instance of the F-pattern on Investopedia.com.
Source: Nngroup 2020

Understand your audience

  • Who is your audience, and how do they talk about the subject
  • What questions do they have, and how they would phrase them
  • How they describe things, and what words they use 
  • Apply that understanding to your writing

Organize your content

  • Answers to primary questions should be front and center
  • Focus on your primary messages and what matters the most to your users
  • Less important content comes next
  • Save the least important content for last

Plan your content before you write!

Content planning example

Name of pageRemote Access to Resources
Primary audienceEmployees
Secondary audienceUpper management
Content goals
As a researcher who is working remotely, I need to know how to find the library’s electronic resources since I can’t access the physical materials
Primary message(s)The Library can provide a lot of support remotely, and depending on what you need, there are ways to find what you need through our intranet pages
Secondary message(s)While we aren’t staffing our physical location, we are working hard to make sure our electronic resources are available and up-to-date
Call(s) to action
Contact the library if you have a research question or submit a request if we don’t have access to what you need

Headings

Once you organize your content, break apart the words with headings so that scanning becomes an easy and helpful task. Take this blog post as an example, each section is broken up with Headings.

Voice and tone

  • Write like you talk!
  • Write how you would respond to someone on the phone or in person
  • Say “I”, “we”, or “us”
  • Use active voice
stick figure person kicking a ball
Passive voice: the ball is kicked by the boy (the subject does not perform the action)
Active voice: the boy kicks the ball (the subject performs the action).
Source: Polished Paper, LLC

Keep it short and simple

  • Use lists
  • Make use of parallel grammatical structure wherever you can
  • Support active space between lines, headings, and paragraphs
    • give your content room to breathe!
  • Cut unnecessary text
    • meaningless modifiers (please note, keep in mind)
    • redundant instructions (fill out the form below)
    • adverbs (very, helpfully)
    • weakening phrases (maybe, perhaps)
  • Re-think how you’re using screenshots on web pages

Meaningful links

  • Users should have a good idea of where they’ll end up when they select a link
  • This is critical for visually impaired users who use a screen reader and may skip through the text to read links
  • Don’t use…
    • Click here
    • Learn more
    • Click for details
    • Full URL in the text (unless it’s needed in a reference list)

Alternative text (Alt text)

  • Text substitute for audio, visual, and other non-text content on web pages
  • Ask yourself:
    • What is this image doing here?
    • If I couldn’t use this image here, what would be in its place?
    • alt text should be accurate, equivalent, and succinct
  • Let’s work through an example together (adapted from WebAIM)
Painting of George Washington crossing the Delaware River
In this painting, the artist Emanuel Leutze used light, color, form, perspective, proportion, and motion to create the composition.

The alt text for this image needs to be more descriptive based on the context of the caption. “Painting of George Washington” isn’t adequate, given that the user is most likely more interested in the painting itself rather than the subject. Rather than describe the painting in the alt text, I’ve written “Painting of George Washington crossing the Delaware River” which provides enough context to allow the user to identify the image. I intend to go into detail about the painting in the body text.

Accessibility in action

All the tips shared here and in my other blog posts are not only useful for communication but also will help you create accessible web pages. Minor changes have broad impacts, as these web user stories show.

Does color really matter in data visualization?

Simulation of the normal (above) and dichromatic (below) perception of red and green apples
Source: Alex Wade

Yes, color matters!

There are many different ways to present your data and information and it’s important to remember the role color plays in the interpretation of results. Many programs apply default color settings to your figures, but those colors may not be the best choice. Color vision deficiency (CVD) affects a significant percent of the population, with red-green color vision defects being the most common, though there are various types of CVD or color blindness. Contrast, saturation, and hue are important options to consider when choosing colors for your figures. In the left image, there is a depiction of the normal (above) and dichromatic (below) perception of red and green apples. In the image below, we can see how specific colors look to those with CVD.

Colors optimized for color-blind individuals

Screenshot of Figure 2 from the Nature article linked in the image. It's a table with 6 columns. 1st column: color; 2nd column: color name; 3rd column: RGB (1-255); 4th column: CMYK (%); 5th column: P; 6 column: D. Each row has a color block, name of the color, how that color is represented in RGB and CMYK, and how people with protanopia and deuteranopia see that color.
P and D indicate simulated colors as seen by individuals with protanopia and deuteranopia, respectively.
Source: Wong, B. Points of view: Color blindness. Nat Methods 8, 441 (2011). https://doi.org/10.1038/nmeth.1618

Data can be misinterpreted without careful color choices. Many studies (examples: 12) have shown how color can lead to data misinterpretation, even for those without color vision deficiencies.

Tools you should use when creating visualizations

There are resources available to assist you in making your visualizations more accessible. Authors of a 2018 PLOS One article developed a Python module that creates a new CVD-optimized colormap. PlotTwist, a web app for plotting and annotating continuous data, also has CVD-friendly palettes. Tableau has tips and palettes for creating graphics. A 2019 Materials & Design article discusses how to improve data visualizations in the physical sciences (with a focus on materials science), including choosing the best color map. TPGi’s free color contrast checker tool has a CVD simulator. Publishers, such as ACM, are advising authors to submit visualizations that can be interpreted in greyscale, as well as providing CVD-friendly color palette tools.

The next time you create a visualization or graphic – remember: there are more choices than “Roy G. Biv“, and the vendor defaults are not always the best option.