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:
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.
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).
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.
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.
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 users with cognitive disabilities process a page.
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.