Visual hierarchy describes the order in which the user processes the information throughout a website/ design. It is very important to use visual hierarchy in web design because it is the main strategy of communicating with the user about the purpose and importance of the design. During UX design, you should be asking yourself these questions:
- What is the purpose of this? (Usefulness)
- How would I use it? (Usability)
- Why should I care about using it? (Desirability)
This way, you will be designing with the user in mind and create something that is easily comprehensible as well as appealing.
How to use hierarchy
There is no one way to build a concrete hierarchy in design, however, understanding what you are designing and who for is crucial.
For example, if you are designing something with a lot of text, you should try and section this with headings, bullet points and imagery. This will break up the layout and make the page easier to read as well as nicer to use.
The ‘Z’ pattern
On a homepage layout, the user will most likely read the page in a ‘Z’ formation, going from the top left to right, and then down to the bottom left of the screen, then across to the right. An example of this is the Zero Banking website.
The Z pattern is applicable to a lot of web interfaces as it addresses hierarchy, branding and calls-to-actions. If we can predict where the user’s eye is going, we can place elements in certain positions, to navigate the user to the most relevant points.
Size and scale
Size and scale are obvious tools for hierarchy but not always effective. The most important elements should be standing out the most but this can also be counteractive if used in excess as the design becomes overwhelming or too much effort to understand.
For example, if the design isn’t balanced or has too many elements of different sizes, the user’s eye won’t be directed to the relevant points. This is important for calls-to-action(CTA’s) because if your buttons are too small or unbalanced, they are more likely to be ignored.
The user should never be overpowered by a large focal point, nor compromise usability with content that is too small. Simply Chocolate is a good example of size and scale being used as a hierarchy tool as the user’s attention is drawn the product and the information is scaled according to importance around this.
Colour is another great tool for building a hierarchy in web design because you can highlight information or imagery with it. Human brains are attracted to contrasting colours, so we will look for the colours that stand out. When designing, colour can be used to pair elements, for example, CTA’s could all be one contrasting colour so the brain sees the relevance between them and their purpose.
Connect Insolvency is a good example of colour hierarchy because the colours not only reinforces the brand but draws the users attention to CTA’s and important elements.
Layout is one of the easiest way to direct the user’s eye and control your website’s hierarchy. Humans like order and structure, especially when looking for information. Organising your website into columns and rows can be very useful for creating clear and concise design. However, this does not mean your designs can’t be fluid with interesting interface elements.
As long as there is a balance and layout in place, hierarchy should be still understood and clear. Using too many visual elements and not enough structure/layout will flatten your hierarchy and there will be nothing standing out to the user. Calexo achieves hierarchy through layout very well by creating a very visual and fluid design that also has a lot of layout and structure behind it, meaning the information doesn’t get lost.
Spacing is incredibly useful for not overwhelming site visitors. There may be an urge when designing to fit a lot of information into one space which will create confusion and therefore distrust for the user.
Allowing white space throughout your design can really help when separating elements and sections within your designs. Through spacing, you can create order and logic which will help create a clear hierarchy for the user.
Wealthsimple are a good example of using spacing as a tool for hierarchy in their website Balance is created through the use of white space, creating a concise and fresh design with great visual hierarchy.
Fonts can be used to differentiate information. For example, headings and body text will likely be different fonts / weights/ sizes to highlight the purpose of the information. Headings are often a lot bigger than body text as well as often having heavier weights or being a different font altogether.
This draws the users eye and captions the body text, so the user knows what information they are reading and the purpose of that information. It also means that the main points of the text can be summarised without having to read the body text, which is great for users as they will probably only read text that is relevant to them.
Hotel Capolagala uses a serif font for the headings and a sans-serif font for the body text to create visual hierarchy through fonts. The fonts also balance each other whilst reflecting the brand.
Using these points when designing your website will help you build a visual hierarchy and increase usefulness, usability, and desirability.