As humans we now spend a lot of time online, but our brains evolved many generations ago when survival was our primary purpose. To a large extent we use the same systems now to decide whether an animal is threatening us as we use hierarchies to decide where to click on a website.
This process means that we immediately look for relationships between objects before we notice the objects themselves. Our brains seek to categorize and establish what is important to know where to begin to interact with a website. It is to work with this hard wiring that designers establish hierarchies of information to help the viewer see what the designer needs them to see.
There are a number of tools that can be used to make this happen. If you glance at an unfamiliar website you will start to see what is happening.
Size
To show importance size matters! Headers and commands will be in larger text sizes than the explanations. Your eye will be immediately drawn to these areas of large text as you make the rapid decision of whether to stay with that site.
Color
Text in a different color from everything else will also catch you eye. While in the real world red is almost always used to represent danger, any text in a color that isn’t used anywhere else will draw your eye to it.
Contrast
This is a more subtle variation of color. If one piece of text is bright and another dark, but everything else is the same, the eye will be drawn to the text that stands out most from the background.
Alignment
Because of our need for finding patterns and relationships any element that is placed differently from the rest will also catch you eye. Think how quickly you notice a paragraph indentation that is wider or narrower than others on the page.
Repetition
Once again, our instinctive desire to find relationships in what we see to work out what is needed means we look for similarities. By keeping all the body text the same color and size we can quickly pick out those areas. Likewise as we understand the different levels of importance we start to scan the page to find the specific piece of information we came to find.
Proximity
We expect related information to be placed close together. Any site that constantly has you clicking away to “read more” or see a special offer is usually abandoned pretty quickly.
White space
With so many options available on a page, an item of great importance will usually be surrounded with extra space, usually white, so your eye is drawn to it. The opposite also applies, so when you see a lot of densely packed text or information, you are going to really want to read through it to find what you need.
Styles
Unlike the written page, websites will usually have many different text styles to show hierarchy. You may not immediate realize it, as only one or two fonts will be used, but the size, strength, spacing and color will have been carefully chosen so the eye can quickly pick related levels of information.
The next time you go to a new site look at it a little more critically and see if these features are there. Often some will not be present as the site owner may have overruled an element for another reason or the site designer used a template that didn’t allow for these distinctions. See how you feel when you encounter a site where the majority of these considerations have been met. Do you feel more confident about the reliability of the source? More likely to trust what is being said? More likely to buy from that site?