“If everything is important, then nothing is”. This saying, attributed to author Patrick Lencioni, essentially sums up how visual hierarchies work in UI and web design. It’s something that’s too important not to get right, so it’s worth knowing about the theory and practice of visual hierarchies (even if you aren’t a designer).
What is visual hierarchy?
Essentially, visual hierarchy is the process of organising design elements on a screen based on their importance. It’s a fundamental principle in UI (User Interface) design that guides a user’s attention and creates a clear and intuitive user experience. It helps to guide the eye in a way that aligns with the journey you want them to take, from key elements such as important messages or primary content to supporting content and then a call to action.
It’s immediately apparent when a web page or app has been created by someone who doesn’t understand or respect the importance of visual hierarchy. The effect is jarring and off-putting, with cluttered pages that confuse the eye and make it more difficult to find the information you’re looking for. This can seriously harm conversion rates and drive visitors away. In fact, according to a study by Forrester Research, a well-designed user interface can increase conversion rates by as much as 200% compared to a poorly designed site.
But by mastering it, designers can create an emotional impact that helps to drive a positive brand impression with appropriate associated feelings – a sense of calm tranquillity on a page discussing mental wellness, for example, or energised passion for a site about extreme sports.
Visual hierarchy strategy
There are many ways designers can draw attention to specific elements, including…
- Alignment and composition – Placement is an important way to create focal points, with misaligned elements drawing more attention.
- Colour – Bright and bold colours draw attention.
- Size – The bigger it is, the more it will dominate the space.
- Proximity and repetition – Placing elements close together or repeating a style creates an association between elements.
- Whitespace – Empty space around an element draws attention to it.
- Textures – Richer textures make elements more noticeable.
While designers can use these influencing factors to manipulate the visual hierarchy, most people tend to follow the same patterns when viewing a page. Alex Bigman, writing for 99designs, explains that there are two predominant patterns to be aware of.
Since most languages in the world are written from left to right, the eye first gravitates toward the top left corner by default. On a text-heavy page (like a blog), we then tend to scan vertically down as we search for keywords. Once we settle on something of interest, the eye moves horizontally to the right, thus creating an “F” pattern. For such content, it’s important to use short subheadings and enticing hooks at the start of each paragraph, as well as bullet points wherever possible.
For more image-heavy pages, the eye still tends to move from the top left to the top right before scanning diagonally down to the bottom left and then horizontally to the right, creating a “Z” pattern. That means the best place to put your CTA will be at the endpoint in the bottom right corner.
Heat mapping is an important way to analyse and visualise user behaviour and interaction patterns. When creating a page, designers use heat mapping tools to create a visual representation that illustrates where users spend the most time or encounter difficulties. This can then form the basis for a wireframe – skeletal outlines of a design that illustrate the basic structure and layout of a webpage or app – and guide iterative improvements in the design process.
UI designs that deliver results
Put simply, a designer that understands the principles of visual hierarchy can create a UI web design that delivers better results than one who doesn’t. A site may look pretty, but if it ignores visual hierarchy best practices, it’s sure to disappoint when it comes to conversion rates. At League Digital, we have the UI design expertise to ensure a seamless and intuitive user journey from beginning to end. Come and learn more about the world-class user experiences we can offer.
