The #1 Principle Marketers are Ignoring on Their Website
You’re planning a trip to a new city or country and you need to get around and explore the place. Which app comes to mind when you want to find a location? There’s only one answer to that question — Google Maps.
Cartography or the study of maps almost entirely revolves around how information is presented. For instance, if you take a look at the map of San Francisco, you see how difficult it is to find a location. There’s just too much detail. The reader may not know where to start.
Google Maps has created a whole new experience for people who use maps. Images 2 and 3 illustrate how Google only presents limited information instead of cramming in all the data they’ve collected. This is because overloading the map with information isn’t going to be useful. And besides, maps are not usable if people can’t find what they are looking for.
Visual Hierarchy
Keeping that in mind, there is one crucial UX principle that Google follows strictly — visual hierarchy. When Google displays the map of San Francisco, this is probably how you view it: First, you look at the panel on the left. It gives key information and interactive options to aid in your search. As you move your eyes towards the map, you notice sections that are highlighted. These highlighted sections draw your attention immediately. And then finally, you start zooming and panning the map to find points of interest. This sequence of events and how information is ordered is visual hierarchy.
Visual hierarchy is about ordering information by importance. Essentially, you organise and prioritize content based on what is viewed first and then follow the sequence..
Why does it matter for markets?
Let’s consider a landing page. If your prospects don’t notice important information at the get go, that information becomes unusable. And if people don’t see your persuasive words, they won’t pursue the goal you set. Now, if your landing page is unpersuasive and unusable, it means your landing page is not going to achieve much.
Visual hierarchy and layout are fundamental tools the cartographic designers at Google have aced while creating their maps. Now that you know where they look, how do you control the user’s attention?
Visual salience
Defined by, Scholarpedia, “Visual salience (or visual saliency) is the distinct subjective perceptual quality which makes some items in the world stand out from their neighbors and immediately grab our attention.”
In a neurological and psychological context, the term “salience” does not intend to just grab attention but also influences people’s perception and how they understand things.
Marketers and designers need to collaborate in defining the visual flow. Ask yourself these questions:
- What information do I want my audience to gain access to?
- Where will my audience first look?
- Where will they look next?
- And where do they end up finally?
To do this, you need to understand a few visual hierarchy principles:
#1 Size
The bigger a design element, the more attention it grabs and stands out. Enlarging an object’s size and scale is one of the easiest ways to give it visual salience. People notice bigger elements first, But keep in mind, the element you’re using needs to be relevant and have the ability to hook your customers.
Don’t just make things bigger, make sure it’s relevant and important.
In the above screen, Nike have defined their visual hierarchy in a way that makes people notice the large shoe immediately and then the rest follows.
#2 Color & contrast
Colors have a crucial role in behavioural design. They can either be used to draw attention or generate emotional feelings. Do you remember making highlights in your textbooks? This is very similar. Vibrant colors stand out from muted ones.
Even though colors may be used to define visual hierarchy, keep accessibility in mind for those with color blindness.
Avoid overusing color and contrast. If everything seeks attention, nothing would succeed.
#3 Typographic hierarchy
Typographic hierarchy involves formatting typography with content in mind so your prospects can easily see what’s important. Readers today skim or scan content on the web. Typographic hierarchy greatly helps by directing site visitors to information in the order of importance.
Breakdown your hierarchy into 3 levels:
- Headline: This is the most important piece of content and should be the first type noticed by your site visitor
- Subheads: These are headlines that group concepts/topics together. Your site visitors use these while skimming to find specific information quickly. They should be the second type visible after the headline
- Body: This is the complete message. It could be long or short. Make sure to use a font size that is readable.
Typographic hierarchy plays an important role in formation of blog structure.
To illustrate the impact of typographic hierarchy on readability, consider the following example:
In addition to typographic hierarchy, there are other principles such as space and proximity, motion, perspective, and alignment. Once you have your hierarchy in place, it’s time to test it.
How to test your hierarchy
People come with their own biases. When we view our own landing pages or campaigns we rarely identify the problem because we’re too close. One of the easiest ways to solve this is by either squinting your eyes or blurring out an image. This way you can find out which elements stand-out and if your ordering of information is correct.
Behaviour design concepts
In addition to applying these principles and testing, there are behaviour design concepts that need to be kept in mind.
#1 How we see
Our brains are built to see structure and patterns in order for us to better understand the environment we’re living in. The human brain simplifies complex designs or objects by arranging and organizing its elements as a whole rather than just a series of disparate elements. Simply put, people perceive complex patterns in their simplest forms because they require less mental effort.
Medium, the online publishing platform has grouped their elements (bluebox) in a way that’s easy for people to perceive the information. And they’ve incorporated a great visual hierarchy as well (big blocks to small).
Related: 5 Gestalt Psychology — Marketers must know
#2 How people read online
The human eye is drawn automatically to certain points of interest. While this might vary from person to person, the majority tend to follow definite patterns, including how they view a page.
F pattern
Z pattern
Conclusion
In Luke Wroblewski’s Communication with Visual Hierarchy, he states the end goal of visual hierarchy is to quickly communicate to the visitor the following:
- What is this? (usefulness)
- How do I use it? (usability)
- Why should I care? (desirability)
When we apply visual hierarchy, we make it easy for people to find what they are looking for and guide them towards the path of conversion. Defining visual hierarchy does not simply apply to your landing pages but to all marketing creatives. It’s a fundamental part of behavioural design. One of the major reasons Google Maps succeeded compared to other maps and applications is the attention they give to visual hierarchy.
