An Introduction to Visual Hierarchy
Updated: Aug 23, 2021
Visual hierarchy or hierarchical design is the principle of arranging website design elements in order to show their relative importance. It is based on the principle of Gestalt psychology that shows how humans tend to recognise a hierarchy of importance based on which visual elements stand out relative to others.
Web designers use this principle to intentionally elevate certain parts of a screen, using colour, size and placement to contrast elements and focus the viewer’s attention on the most important forms and actions.
Good web design utilises hierarchy to guide the viewer through the site, providing clear guidelines to the order in which the site should be read, and how the information should be processed. So a good hierarchical design avoids overwhelming the viewer with too much information at once, leading the eye through the page and clearly organising elements in a way that the human eye can make sense of.
Ultimately, of course, the aim is to lead the viewer on a journey and have them take action - Contact Us, Call Now, Buy Now, Add to Cart.
How to use visual hierarchy in web design
As we discussed in an earlier blog, one of the specific goals of visual hierarchy is to Attract the viewers attention, Intrigue the viewer to want to know more, and then finally have the viewer take Action. To this end, there are a number of building blocks that are available to designers when establishing hierarchy in a website. Some of the most important of these are size & scale, colour & contrast, and reading patterns.
Size & Scale
Size shows relative importance while scale gives a sense of perspective. In typography, the larger the font, the more the viewer’s attention will be drawn. Larger elements attract greater attention than smaller elements. It’s the reason why newspaper headlines appear in larger fonts, and major stories often have larger headlines than other articles on the same page. In any visual design, larger elements will not only be most noticeable, they will also carry the strongest message.
For multiple similar elements, increasing the size of one, relative to the others, will immediately draw the viewer into the larger one first. When looking at the cars below, the second immediately appears closer, more salient, and therefore more demanding of the viewers attention. Another consequence is that the other elements automatically take on less importance.
Scale is also used in visual hierarchy to convey messages about relative importance, size and perspective. For example, in the ‘Before’ image below it is impossible to tell the relative sizes of the diver and the whale, and in fact they appear to be the same size. By showing them to scale we get a better sense of the immensity of the whale, and using a human figure is a great way to do this without needing metrics like weight or length. In the ‘After’ image below, the whale dominates the image but it would not have the same impact without the scale provided by the human diver.
Don’t make everything the same size
If nothing stands out there is no focal point
If everything is important then nothing is important
Colour & Contrast
When two options are presented using the same colouring, there is no easy way for the viewer to determine if one is more important than the other. For example, in a registration process the final action might be ‘Register Now’ and a secondary action might be to allow the user to ‘Cancel’ and back out of the registration. If these options are presented with similar visual weight, they are deemed to be of the same importance visually and it is easy for the user to inadvertently exit out of the process instead of completing.
This is made even more confusing if the order of the buttons is switched so that the secondary action is placed on the left, as below. In this case, the chances of a viewer clicking the ‘Cancel’ button is increased even when they want to register.
Colour is useful in this situation to identify which of the options is the primary action. In colour psychology, red is the most powerful attractant, and that is why so many calls to action are red.
However, the misapplication of colour can have unintended consequences. For example, if we make the Cancel button red, we raise the visual importance of the button and increase the likelihood that a busy or careless viewer will click ‘Cancel’ unintentionally.
A much better way to apply colour to this situation is to add it to the primary call to action, making it stand out as the most important visual element. It is then much more likely to attract the viewer's attention and cause them to take action by clicking the correct ‘Register Now’ button.
Extending this idea to include contrast means that we can reduce the visual importance of the ‘Cancel’ button by lowering the contrast, further reducing the chance that a viewer will click it.
Make the important elements stand out using colour and contrast
Viewers will automatically be drawn to the element that is visually distinctive
Even elements of the same colour can be distinguished by using contrast
Use of colour, contrast and scale in visual hierarchy is underpinned by a psychological principle known as the Von Restorff effect which states that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. For example, even if all the elements are similar and of the same colour, you can distinguish the most important element using contrast alone.
But the most effective way of communicating hierarchy is using a combination of colour and contrast.
English speakers read from left to right and top to bottom, so for English language websites, it is important to recognise two key patterns used by viewers to scan and make sense of the page.
Eye-tracking technologies have identified the F-pattern as the primary method of scanning text-heavy screens. It follows the shape of an upper case F, starting at the top left hand corner and moving across to the top right, then scanning down the left hand side of the page in search of shorter headlines or subheading to then scan right.
Less textual design tend to follow a ‘Z’ shape, with viewers starting at the top left and moving horizontally across the top, then skimming quickly down diagonally to the bottom left corner, and finally across to the bottom right corner.
A good hierarchical design takes advantage of these patterns to place important information and elements in the appropriate places. It also helps to think about and establish a visual flow to your page. Most logos, for example, are placed in the top left hand corner. This is not only familiar to all viewers, it is the first place that the human eye lands on and so establishes brand recognition and improves navigation.
Putting it all together
Hierarchical design comes together for web designers in the Hero banner. In the example below, the Z reading pattern is evident with a traditional logo placement in the top left, navigation bar across the top to the right, the primary messages and CTAs in the centre, and then additional information and actions across the bottom.
Size and contrast is used to present the most important message first, the primary call to action is identified using a bright colour that contrasts with the much darker background, and the viewer is taken on a visual journey around the page in a simple and intuitive way.
In future blogs we will drill deeper into the techniques of visual hierarchy, looking at concepts such as negative space, alignment, proximity, leading lines and perspective. Next up in our blog series will be a post about the psychological fundamentals of UX.