5 Pro Tips For Visual Hierarchy

A common error in web design is to make all the elements on a page competing among themselves. By adding visual weight to certain parts of your design, you increase the chance that a user will see them and follow the path you designed. In this article we will provide tips to organize the elements on your page according to your strategy and improve conversion.

1) Make A Hierarchy Of Actions And Goals

Our job is to guide users to the things that matter. The user and business goals should therefore be reflected in the visual hierarchy of your page. First step will therefore be to identify and prioritize all the goals of the page and their respective call to action.

Call to action are usually buttons but might also be a form, a text link, the navbar... Most of the landing pages do not display any navbar in order to keep the attention focused on the main page goal. Overall, you want more important things to be "bigger" than less important things. Bigger in size or bigger in contrast.

Once the main call to action is identified, change the visual weight of the secondary action. A greyed and underlined link is the most efficient way to avoid visual competition between secondary actions and primary call to action

2) Think Contrast First

If the page or app you developped followed the classic design process, wireframes should have been provided in the first steps. Wireframes rely on few colors/contrasts and basic design principles that make the visual hierarchy clear and powerful. Visual design and color addition can sometimes dilute the original visual weight and hierarchy.

Contrast rules our perception, not colors. Various usability studies confirmed that the elements that convert best are meeting high contrast standards. Keep this in mind when designing the final design. Are contrasts still powerfull enough to clearly identify user and business goals ?

We recommend designer to use WCAG 2.0 rules and a tool like Tanaguru to test their contracts. It will also be a good excercise to make sure your design is meeting accessibility requirements.

3) Make Good Use Of Typography

Create typography hierarchy

Create typography hierarchy by using font size, font weight and colors (shades of the main color). Assign more size and contrast to the elements you priorized.

Let your texts breathe

Keep enough line and paragraph spacing to make your user feel comfortable when reading text in your page. Try to group text and keep them vertically aligned with enough spacing to help your user scan.

Keep your lines of text short

Reading long sentences is demanding and cumbersome... The optimal number for words in a line is between 9 to 13 words or 45 to 75 characters in a body paragraph, with a 66-character line (including spaces) widely regarded as the magic number for a line of text.

4) Leave Room For Blank, Negative Space Or Image

White space balance

Miles Davis and Picasso shared a reflection about negative space : they both thought that the most important elements in their creation were silence negative space. A musical melody is built with the spaces between musical notes. If you want your call to action to stand out, keep space around elements, don't give to much to look at. Maintaining a good amount of white space within the blocks of text can make a site more readable and easier to scan. Consider white space as an element as such. People's attention is constantly requested, they will be gratefull if you give them enough room to breath in. Remember contrast? Well, good news : white space is its best ally. Enough white space makes the colors more vivid, brighter and makes elements easier to be catch by the eye of the user.

When done right it is a powerful (and invisible!) element of trust and persuasion, but make good use of it. This is not always easy to find the correct combination between elements and white spaces : too little white space makes it confusing and having too much space also impact connection between elements and design dynamic negatively. As always it's all about finding the correct balance.

Image

You can use images with the purpose to create space between elements but be cautious when using them : they create strong visual emphasis, capture attention and might unbalance your visual hierarchy. Keep also an eye on consistency by selecting images that showcase the purpose of your site and brand.

5) Priorize The Areas In Your Design Process

A good way to ensure that you respect the established user/business goals and inherent visual hierarchy is to priorize the development of the elements in the same order as the visual hierarchy. Think about what you want the user to look at first in your page, make a hierarchy of the elements and then design around that hierarchy. When working on secondary elements some new ideas and improvement might pop up and it will be easier to iterate.