The Principles of Visual Hierarchy | CRO Training by JMarketing
Visual hierarchy is the order in which your eye notices visual design elements. It is one of the five key principles of persuasive design, and critical when designing and building a highly optimized website.
Creating a visual hierarchy lets you grab visitors’ attention with elements you want them to see first, then guide them towards the areas on your website that you want them to focus on most and actions you want them to take. These include things like ‘go to checkout’ or ‘sign up for a newsletter’ or whatever your conversion rate optimization goal is.
Numerous things influence visual hierarchy, like size, color, and patterns, each of which plays a role in creating effective visual hierarchy, and takes careful analysis and planning.
Your website is designed for a reason — an effective visual hierarchy helps it to achieve its goal.
Here’s a look at the principles that guide visual design:
1. Scanning Patterns
Before any visual hierarchy can be created, it is important to understand how people read, and more specifically, how they scan-read. When most people land on a website, they quickly scan its contents to see whether they’re interested to stay and continue reading.
In general, most cultures read from left to right, top to bottom. However, when people scan, they predominantly tend to follow what is known as F-patterns and Z-patterns, indicating how the reader’s eyes move over the web page.
Following a shape that resembles the letter ‘F’, people scan the top part of the page, moving down the left-hand side, reading shorter lines of things like keywords that catch their attention. Pages with a lot of text are usually scanned this way, which is why punchy headlines, sub-headings, bullet points, and lists are so important for presenting web content.
With Z-patterns, people scan the top part of the webpage first, then diagonally down to the bottom of the page (visible on screen, known as ‘above the fold’), where they read the last line from left to right. This type of pattern is common for things like ads or web pages that don’t have a lot of copy, such as optimized landing pages.
2. Layout & Composition
The layout or composition also called ‘texture’, of a web page forms the foundation for visual hierarchy — it connects all the visual elements such as images, text, and shapes, and creates unity and order through. The page layout guides the eye to what’s important. Conventional layouts are designed in a grid format that follows traditional reading patterns. The center of the page usually gets the most attention, so the most important element is placed in the center of the page, followed by lesser important elements to the side.
While visual hierarchy is present, this type of layout is often visually boring or bland. Misaligning elements, or breaking the grid, is a way to create a better, more interesting visual hierarchy, leading to greater potential to draw users’ attention when they first land on the page. Breaking the grid can be as simple as placing a single element “out of place” compared to the rest.
Remember to keep scanning patterns in mind when creating a page layout, even when designing to ‘break the grid’.
3. White space
An often overlooked, yet very important, part of visual design, is so-called ‘white space’. This is the blank space (not necessarily white) between elements that contain no visual elements like graphics or text.
Very often, web pages are so jam-packed with content that it’s difficult for important elements to stand out. White space draws attention by guiding the eye to important elements by creating room around it, allowing it to stand out. It often forces designers to cut down on superfluous elements and clutter, thereby making it easier to scan the page. It is especially effective around call-to-action buttons.
White space can also be used as an alternative (or addition) to size when you want to emphasize smaller elements like small text.
One of the easiest ways to create visual hierarchy is through size. Visual elements that are bigger stand out and draw the most attention. This includes things like photos, graphics, and text. However, bigger is not always better. If all the elements are big they lose their impact. When deciding on the size of elements, consider which are most important or relevant to your goal of conversion. Put these in descending order of importance, then take it from there. Remember, it’s about grabbing attention and hooking customers into the sales funnel. Size can be used to create contrast.
Note that the placement of different sized elements can be mixed up, it doesn’t have to be placed in descending order from largest to smallest. What is important is where they are placed relative to one another. Size creates contrast and either make certain elements stand out, or guide readers’ eyes to where you want them to look (like a call-to-action button).
Instagram is a great example of clear visual hierarchy. The most important part of Instagram is images, which are therefor the biggest elements on the page, followed by usernames and captions. This type of visual hierarchy keeps the other elements, often called secondary content, from competing for attention with the main element.
Color plays such an important part in visual communication on both a conscious and subconscious level, and the use of color as an effective marketing tool is well-documented. Some colors make us feel hungry, some make us feel safe, and others signal danger — color can have both visual and emotional appeal.
Color is also one of the most essential elements in creating visual hierarchy, especially when it comes to mobile devices, where screen size limits the use of things like size, shape, and layout, to create visual hierarchy. The use of color shows what elements are most important.
Bold, bright colors stand out and draw the eye, thereby highlighting specific elements. Opposing colors, on the other hand, draws attention by creating contrast. However, some color combinations don’t work. Yellow on white (and vice versa) is considered one of the worst combinations as far as contrast is concerned, and yellow text on white background should be avoided, or approached with caution. Most designers use a color wheel to determine which colors go well together (harmonious, balanced), and which combinations can be used to create contrast (complementary). Both are essential to creating visual hierarchy, and how it gets used is determined by your goals. Do you want to use hierarchy to create stark, jarring contrast, or do you want to create a flow that leads the eye?
It is important to remember that the color used must be different enough to stand out, but not that different that it clashes with the look-and-feel of your site. If your site has a lot of pastel colors, using a neon color is going to look jarring…and amateurish.
Note that the symbolic meanings of colors differ between cultures, and this should be considered when targeting specific markets.
Another important element in creating visual hierarchy is shape. This is not just about triangles, squares, and rectangles, but all kinds of shapes that communicate certain meanings or connotations similar to what color does. An example is the heart shape. Traditionally a heart shape represents ‘love’, but through the use of social media, it has come to also represent ‘like’. You like (or love) something someone posted online, the meaning is almost universal.
Shapes can be used to establish visual hierarchy by using shapes not traditionally associated with these elements to make them stand out. Most buttons on websites are rectangular, so if you use round buttons instead, it makes it stand out by breaking from what we’re used to, called prototypicality.
Prototypicality, how we expect things to be, is an important element in visual design and should be considered when it comes to using shape to create visual hierarchy. Using round buttons instead of rectangular ones is fine because we’re used to round buttons in real life, however, changing the shape of the search function on a website too much can confuse users. Search bars are traditionally rectangular, and users tend to scan for this when looking for the search function. If it’s a different shape, then it might be harder for users to find, creating frustration.
Typography is an important, yet often neglected, design element, and can be used effectively to create visual hierarchy. Topography is how written elements appear on-screen, and its role is to draw attention to important information, it makes it easier to scan a page, and body copy easy to read. For example, the use of headings and sub-headings is used to create visual hierarchy in articles.
Topography isn’t just about the types and sizes of fonts, but also how it is presented. Is it written straight or curved, are all the letters the same size or color, is the same font used in all the elements?
Use different to create contrast can be very effective, but should be approached with caution. The rule-of-thumb is to use no more than two, maximum three different types of fonts, like a Times New Roman (serif font) and Helvetica (sans serif font).
Most designers recommend using different styles of the same font, rather than different fonts. This includes things like using different weights of letters, using italics, or modifying leading (space between lines) or kerning (space between letters) to create typography that stands out and creates visual hierarchy.
Topography closely ties in with color, shape, and size in creating visual hierarchy.
An effective visual hierarchy can mean the difference between success and failure of a website. Even the most visually stunning websites falter without it. What it will look like will depend on your optimization goals. Implementing visual hierarchy properly can be difficult, but a great conversion rate optimization agency can help you weave it into your website, and achieve maximum results.
Take the short cut to digital marketing success. Contact JMarketing and discuss your options to increase your conversion rates, and immediately skyrocket your results. Click this link and complete the enquiry form, we will contact you back right away.
Please also remember to subscribe to our blog & share on social media.