Skip to Main Content

Writing for the Web

Writing content that is accessible, optimized for search, and otherwise informative and easy to read.

Visual Hierarchy

Knowing how people read online, we can use techniques to make our content stand out, or to help draw the eyes to areas of the page that might get overlooked. The way we guide our users to the information they need on a page is through visual hierarchy. The tools we use are:

  1. Scale - making something larger than its surroundings will make it stand out more
  2. Color - using splashes of color sparingly will also make something stand out
  3. Contrast - as an extension of scale and color, creating dramatic changes between one thing and another can draw attention, like bold text next to normal text in a lighter color 
  4. Alignment - using symmetry and predictable spacing helps our eyes group related things together
  5. Proximity - moving things closer together or farther apart is another way we help our eyes group content together

Example course reserve pages

Below are examples of a course reserve page from three different university libraries. The headlines, paragraphs, buttons, and images are outlined as boxes and the colors converted to grayscale to show color contrast. 

Course reserves page with evenly aligned blocks and come contrast
Course reserves page with blocks of different sizes and contrast
Course reserves page with several high contrast blocks

Hierarchies found in the above examples

Looking at the examples above, some have a clear block that stands out from the rest - either because of size or contrast (the box being significantly darker than the others).

  • Some take advantage of the F-shaped gaze pattern. In the second example in the middle, the top rows appear larger than the rows further down the page, and the block with the most contrast is on the left edge. Presumably, the most important information is in those larger rows.
  • The third example on the right is harder to follow: it appears the content is in vertical columns, but the equal contrast level of the darkest boxes forces our eyes to read horizontally.

Below are the same three pages, but this time the blocks of content have been blurred out to show color. You can also see how lines of text naturally form boxes and relationships to the other text boxes around it. Each page uses some combination of the five principles above.

  • What stands out about each page?
  • Each page has a way for faculty to request reserves - can you guess where it is?
  • Think about users who are colorblind as well - does the addition of color change what stands out? Would you be able to differentiate the green and red buttons in the third example if you could not see their color?
Course reserves page using color and contrast to create hierarchy
Course reserve page using color and scale
Course reserves page using color and proximity to direct the user

Why is this important?

When we view a webpage, our brain looks for patterns and shortcuts to make sense of the information presented to us. This occurs within seconds. When we can't find clear, distinct patterns, we get frustrated and will leave a page without finding the information we need or completing the task we set out to do. 

Accessibility

Grouping content in clear, distinct sections reduces the amount of work our brain needs to do to figure out what to do next. Using generous white space (the empty space between blocks) helps group related content together, and also gives places for our eyes to rest. These practices help our brains process a page, and are particularly important for users with cognitive disabilities.

Use color carefully

Notice how color can change the hierarchy of a page. When you use color to direct attention to a part of your page, you should couple it with another element of visual hierarchy like scale. In the example on the left above, you'll notice that the headlines on the page use color (red), size, and contrast (the headlines appear darker than the text on the grayscale version). 

In the example on the right however, the light blue area disappears into the text in the grayscale version. The color does not provide enough contrast to distinguish it from other elements of the page. If the information in the blue box is important, it may get overlooked by a user who is colorblind.

Further Reading