>>> DESIGN HAS THE POWER TO DRAW THE EYE <<<
See what we did there?
You, my friend, just got a taste of visual hierarchy. And it could be just the thing you need to level up your landing pages and your business.
Let’s be honest: Our attention spans are short. Nobody is gonna be reading absolutely everything on your page.
Unless you’re serving up perfect landing pages tailored exactly to your visitors’ interests (*cough* like with Smart Traffic *cough*) you’re gonna need to get their attention fast—and keep it.
With visual hierarchy, you can create appealing pages that direct your audience’s attention exactly where it needs to be.
What exactly is visual hierarchy?
Visual hierarchy is the way design elements interact with each other to signal dominance or importance. Like this:
Visual hierarchy is what initially draws your eye to a certain element (“you will read this first”) and then helps your gaze flow along with the remaining information (“then you will read this” > “then this line” > “and you will read this last”).
Visual hierarchy is especially important when there’s lots of information. Our brains can’t take it all in at once, so they look for a shortcut.
🧠: “WHOA. OK, what do I really need to pay attention to here?”
But this decision is not happening on a conscious level. Instead, our brains take cues from design to help find the most prominent information first.
We read the headline before the article and the publish date. We read the product name before we read the nutrition information. We read the words “Terms & Conditions,” and then our eyes move right to “I agree,” without ever reading a word of the teeny, tiny text in between. (It’s OK. We all do it.)
The thing is, visual hierarchy doesn’t have to be intentional to have influence. Our brains automatically sort information this way, whether the person sharing that information meant for it to happen or not.
So the question for marketers is, are you using visual hierarchy to your advantage on your landing pages, or is an unintended visual hierarchy hijacking your message?
How marketers can use visual hierarchy
Most marketing is an attempt to guide our audience along a path leading to our goal. Visual hierarchy, if used with intention, can help us in our quest.
On a product page, you might use visual hierarchy to help draw attention to the words “only 3 left” to emphasize scarcity and create urgency in potential buyers. In email copy, you might use it to distinguish where readers should click to “Learn More” so that your call to action doesn’t get lost amongst the rest of the text.
Visual hierarchy also plays an important role in how your audience experiences your landing pages. This type of intentional design can help guide them down an information-packed page, to make sure they’re paying attention to all the most important points.
Since studies show that 70-90% of visitors leave a landing page after shortly arriving, we at least wanna make sure they’re seeing the best stuff first.
Here are some of the ways you can use visual hierarchy to your advantage when you design landing pages.
Placement
Where you place elements on a page may determine whether or not your audience will pay attention to it, and for how long.
Our brains scan for key information in predictable patterns, usually exploring the page in the shape of the letter Z or the letter F.
Knowing this, when building your landing pages, you’ll want to make sure that the most important information falls within those Z- or F-shaped patterns to optimize the number of people who will scan over it and—hopefully—pause to process it.
You might even try A/B testing multiple variants to see which landing page elements perform best when placed in the priority viewing scope of your audience. With this type of test, you can find out whether it’s the price, the call to action, the date, or some other element that should be given a higher spot in the visual hierarchy.
- Place the most important information at the top left of the page.
- Consider left-aligned vs center- or right-aligned copy.
- Place important calls to action along common view paths.
Size
A second aspect of visual hierarchy is size. We’re naturally drawn to larger images and text.
Take a look at this sneaker ad. What’s the first thing you notice?
The shoe was most likely the first thing that caught your eye. Then the style name: AM270.
The ad has plenty of other information, but the large image of the shoe is what grabs your attention first. After that, your eye floats to the largest text on the page, and then off to whatever else you’re interested in.
This means marketers can use the size of landing page copy, images, and other design elements with intention to draw attention to the most important info and maximize the page’s impact.
- Increase the font size of the crucial copy.
- Make the most important images largest.
- Make CTA buttons larger than standard copy.
Color and contrast
Color also plays an important role in the order in which we process visual information.
Mother nature has conditioned us to look for red and other especially bright colors since poisonous creatures like frogs tend to have neon paint jobs. But we’re also trained to look for anomalies: Things that stick out, or look different, or seem like they may not belong.
Take a look at how Moz Pro designs their CTA buttons:
Thanks to the dark overlap on the background image, that bright yellow CTA button becomes the center of attention, standing out from everything around it.
But it’s not just CTA buttons. This happens all the time with product packaging, too.
With an endless array of product options in front of you, your eye is naturally drawn to the one that’s most distinctive: It’s brighter in color, has bigger lettering, uses a bolder font. In a sea of “blah” options, one stands out.
It’s not about the product, the quality, or the price. The choice is being made—however unconsciously—based on contrast: “I was drawn to this one, so I should trust my gut,” or “This one just seems better.”
Look for opportunities to capitalize on the attention-grabbing effects of color and contrast when building landing pages.
- Change the color of key titles and headings.
- Make important words and phrases bold.
- Place buttons over contrasting backdrops.
Use visual hierarchy wisely to optimize your conversions
You might be tempted to hop into all your landing pages and try everything at once.
Don’t.
First, you want to make sure you’re rolling out changes like this slowly, so you can test carefully, and properly attribute any increase or decrease in results to the single change being made.
Visual hierarchy should be used sparingly to create a clear path for the eyes. If you start mixing up your colors, fonts, and sizes like mad, you might end up with a mess that has NO hierarchy.
We’ve all seen an event flyer or an ad for a local business that made our eyes hurt. (Everything in moderation, including Word Art—no, especially Word Art.)
So please, use visual hierarchy responsibly.
Go back to your own landing pages and put them through the squint test:
- Squint your eyes so you can’t read anything.
- Look at your landing page.
- What do you still notice?
- What areas are standing out?
- Where are your eyes drawn?
Once you know which elements stand out most on your page, decide what adjustments you can make to better align your visual hierarchy.
And if you want more conversion intelligence insights for your landing pages, check out the 7 Principles of Conversion-Centered Design.
