What is Visual Hierarchy?
Visual hierarchy is the principle of arranging elements in order of their relevance or importance on a page. The average person will spend 8 seconds watching any design to determine whether it's relevant. That means for every webpage - Poster, article, Website - you have a 8 Second (+/-) window to give the viewer the main information.
From menu and logo placement, through to the positioning of buttons and icons, everything is arranged and formatted in such a way that is pleasing, digestible and in line with the psychology of visual hierarchy.
If you visit a website, and find it difficult to find what you are looking for, it’s likely that the website doesn’t have a clear visual hierarchy.
What are the principles of Visual Hierarchy?
The 8 principles of visual hierarchy are:
- Positioning
- Size
- Colour
- Contrast
- Alignment
- Proximity
- Typography
We all want our clients or users to have a positive experience when interacting with our content or product. This is what designers are talking about when they say “UX” - user experience. Part of providing a positive user experience is making sure that content is easy to find and in a logically structured way that will follow pre existing schemas the user might have.
Visual Hierarchy and Positioning
All humans regardless of culture read top to bottom, with the vast majority reading from left to right.
In recent years we've been able to take the principle of reading left right and evolve it further. Typically there are two patterns that the human eye may follow when absorbing information quickly, whether it’s an illustration, website, or printed article.
Two common paths: one that’s Z-shaped and one that’s F-shaped
F - Pattern
The F (Also for fast!) was a pattern found to be popularised by NNGroups eye tracking study when studying the eye movements of hundreds of users looking at web pages. The F pattern was found to be applied when reading text heaver pages (Very much like this one)
A reader will scan the page in an F or ‘E’ format: Firstly across the top of the page to read the headerlines, and then down the left hand side of the page looking for key headers, numbers or bullet points.
Z - Pattern
The Z pattern reading focuses on pages or other documents similar to Ads or posters whereby information may not be presented in a block paragraph format.With a Z Format pattern the user initially scans horizontally across the page where the important information is likely to be before moving diagonally across to the lower section of the page.
Having this knowledge with the designers and created a life composition of most important information in the corners and orientating the other information across the subsequent top and bottom bars
Visual Hierarchy and Size
Size - When it comes to design - Size really does matter!
You are more likely to pay attention if someone is shouting - now there might not be any auditory aspects to a site, but the size and scale of elements can have a very similar effect. We rely on size and scale to convey a sense of hierarchy. Size can help to find sections and form an organisation within the text or image that the user is looking at.
Increasing an element's size (in terms of dimension) or its scale ( its size relationship in relation to other elements) is by far one of the easiest ways to emphasize it and draw attention to it. This article for example, the title ‘Elements of Visual Hierarchy’ is a larger font than the rest of the text signaled where to begin the article
Similarly the reverse can be applied throughout design. Creating elements that are smaller in size or in comparison to other neighbouring objects can deemphasize them and draw the focal point away from them.
Consider the terms and conditions on an offer or deal - companies do not necessarily want to draw attention to them, so they design in a small and subtle mannerism.
Visual Hierarchy and Colour
When we think about the psychology of colour, we typically start to think about blue inciting a sense of calm and red triggering a stress response. In visual hierarchy, we can extrapolate the psychology of colour to further encourage our users to behave in a desired way. For example, we can use colours to sign-post our users to the most valuable or important information on a site. We can use bright colours to attract attention to calls to action, and we can utilise contracting colours for contrasting themes or arguments throughout our content.
The human attention span has decreased, and as designers, we are in a constant fight with an increasingly fickle attention span to grab the attention and incite action. You can use visual hierarchy to incite action by:
- Use contrasting colours for contrasting points or themes throughout content.
- Save a colour of your brand’s colour palette (we would recommend the most eye-catching one!) for calls to actions and buttons
- Emphasise that really important information in the same colour throughout your content.
Visual Hierarchy and Contrast
So we’ve had a look at why colour is so important, now it’s time to take a look at it’s younger sister, contrast.
As your users interact with your website more and more, they will become more and more comfortable and familiar with your brand. Contrary to popular belief, venturing outside of your brand guidelines isn’t always a bad thing. In fact, utilising assets and colours that are contrasting to your brand guidelines is another way to signpost important or essential information to users.
One of the best mediums that uses this strategy is magazines. Every article on the cover of a magazine is just as important as the other, they’re all fighting for your attention. More often than not, you’ll notice that the individual articles on a magazine cover will typically vary in font, size and colouring.
By using varying fonts, colours, sizes and tones throughout your copy and content, you can encourage the user to engage with more of your content than by maintaining a consistent brand style throughout.
Visual Hierarchy and Alignment
Exploring more of the visual hierarchy family tree, I’d like to introduce you to their distant, jaunty cousin; Alignment.Whilst it’s important to keep your content digestible, readable and comfortable for a user to engage with, there’s nothing to keep you from being a bit scandalous and breaking the rules of alignment. Standing out from the crowd is no bad thing, especially when it comes to those key pieces of information or data that you want your users to really pay attention to. So what does this look like in practice?
Well, you could...
Format key information with a central alignment instead of a left handed one.
“Align a quote from the right hand side. Users in the west will typically read from left to right. Aligning occasional pieces of information to the right is a good way to grab attention without making the reader uncomfortable.”
Kyra Gorham - Creative Brand Design
What’s good for the goose is not always good for the gander, so it might take you a few tries to find what feels right for you and your brand, so have a play around. Before publishing content, run it past trusted friends and colleagues first. A/B testing doesn’t always have to involve expensive task forces and think tanks.
Visual Hierarchy and Proximity
Since 2020, and the beginning of covid space and social distancing have been used more than ever before, but within design the principles have been applied since the 1800’s.
In Gestalts theory of psychology, the proximity principle applies to grouping objects and elements together to form a perceptual organisation. Whether it's minimalist, single page or flat website design, the use of proximity & space is a major factor to consider when separating content, or bringing it together. You might have two calls to action that are related, but are currently so far away from each other that it’s confusing for your users. Are they related? Are they not? Will clicking one do something entirely different to the other?
A simple but very effective example are words. When certain letters are grouped together such as ‘beat’ we see a single word. However, place a space between them ‘be at’ and we have a totally different phrase.
The modern user has a short attention span.
Make sure that your calls to action, buttons, and content are appropriately spaced, located and optimised for a seamless user journey.
Visual Hierarchy and Typographic Hierarchy
Typographical hierarchy it's one of the key visual principles in graphic design and its fundamental in creating a well organised information and structure that will transmit through all of your design.
Whilst there's many different layers to type setting and choosing the right typography document there are some key areas to focus on when designing.
The right pairing of typefaces can give a website its own personality and help structure the visual hierarchy. Typefaces with different sizes and weights can also be used to increase the visual hierarchy making more prominent elements stand out and draw in the user's attention.
Even within this article we have used a selection of different headings all with different attributions such as weight and size to ensure the headings and subheadings stand out against the rest of the text.
Imagine a page where all the text is of the same size and weight whilst this would accomplish a sense of equivalency it would also make the page monotonous. There is a high chance you would land on the page, take one look and leave.
To Summarise
At its very core, a good design evolves around good communication and understanding of the users. Many of the techniques covered in this article can help achieve this.
But what if you aren't sure if you have applied the principles, well you're in luck.
There is a simple yet effective way of analysing a design and uncovering the true hierarchy of a design. Ironically named the ‘squint test’ simply sit back from your screen or design, and squint slightly. This should help distinguish the elements that stand out the most.
Is there an element that's more prominent? Or a colour that pops?
If not, don't worry! That is what the squint test is for.
Hopefully after reading this guide you'll have a basic understanding of the principles used in design to emphasize and structure your content in a creative and intuitive manner.
Happy designing!
Infographic by Toptal
