Pop This! How To Manage Visual Hierarchy For Conversion

Establishing a clear visual hierarchy is key to creating a well-optimized web page. But how do you achieve the right balance? In this article,I’ll look at nine visual “toggles” you can use, with examples of their effects.

I’ll start by saying that every designer I’ve ever met despises the word “pop.” It’s one of those squishy, non-technical terms clients use when they’re unhappy with a design. It can mean almost anything, including and not limited to:

• Just make it red, already
• Could we get more cleavage in that photo?
• It doesn’t look enough like [insert name of another web site]
• Where’s the animation? I thought there would be animation.
• I hate gradients.

In other words, as actionable feedback, the word “pop” has no use. But as a conversion design concept, it can be very powerful, helping you improve your page’s visual hierarchy, message clarity, and conversion rate.

Things That Make You Go “Pop”

Luckily for designers, the qualities that affect “pop” are predictable, because of the way our visual systems are wired. We tend to quickly scan and analyze many bits of visual information such as edges, contrast, sizes, and motion in order to assess and understand our surroundings. This is true whether we’re looking at a field or a web page.

Here’s a quick visual (of course) reference of nine characteristics that have a strong influence on visual hierarchy:

Each of these aspects of design has been written about extensively elsewhere. So rather than explain them in detail, I’ll touch on them all (except for motion) in the upcoming examples.

Stop, Before You Pop!

Now, before you run off to start tweaking your visual hierarchies, there are two very simple rules of the road to follow. First, be selective. Second, apply as few as possible. I’ll explain:

Before You Pop – Rule #1: Be selective in what you emphasize.

By definition, not every single thing on a page can pop – it’s a relative, contextual effect.  Here’s a great illustration of what I mean, take a look:

—

—

Question: how quickly did you notice the error message on this page?  And how about the call to action button?

If you’re like me, it took a few beats to really notice them. That’s mainly due to the sheer number and spatial concentration of important, visually popped items on the page – there’s almost no way for anything to stand out above all the visual firepower.

Visual emphasis techniques this page uses:

• Hue and saturation – vivid, saturated red and orange create an eye-catching, pulse-increasing design. Exciting, but visually indiscriminate. The heavy use of red, in particular, causes both the red error message box and the red call to action button to fade in relative importance.
• Contrast – the deep black text (“Flights”, “Hotels”, and “Rental Cars”) stands out clearly against the lighter backgrounds
• Shape – the giant arrow draws the eye leftwards – without it, the search box would nearly disappear. The airplane shape also attracts with its difference.
• Size – the large red text touting savings and prices almost leaps off the page.

If we want the button and error message to pop in the midst of all this, then something has to give. We should either make our important elements pop more, or make everything else around them pop less.

Let’s try making the error message and button pop more, first.

Attempt #1: hue. We could try using a different hue in both areas. This works to some degree – at least the blue is different – but as you can see below it’s difficult to out-shout bright reds and oranges. Plus, the addition of a new color begins to dilute the site’s strong brand identity:

—

—

Attempt #2: size and shape. We could try adding shape (a triangle in the error message) and increasing sizes all around. This helps some, but it’s beginning to feel like someone shouting over a drunken Super Bowl crowd:

—

—

Attempt #3: hue and saturation – of other elements. In this approach, we’ll simply reduce the pop of other elements on the page, by limiting the amount of that hot red hue. This re-balances the page quite a bit, but it’s certainly not where we’d want to finalize it:

—

—

Let’s leave this page to its popping quandary for now, and take a look at another rule.

Stop Before You Pop – Rule #2: Use as few popping techniques as possible, or you’ll quickly exhaust your options. For example, let’s examine this Progressive landing page:

—

—

Question: what did you look at first? And did you read that upper headline at all?

To my eye, the clarity and hierarchy of this page suffer from an overabundance of emphasis techniques. The Start a Quote form is the page’s main reason for existence, but it’s fighting a battle for dominance against the strong shapes, colors, and positioning of the surrounding elements.

Visual emphasis techniques this page uses:

• Location – the first arrow shape is placed at the upper-left portion of the layout.
• Hue – the Quote & Compare button uses a quite different hue than its surroundings. But it’s not enough to make it stand out.
• Saturation – the orange and blue colors are very saturated – vivid and strong.  In a nice counterpoint, the de-saturated grayish-blue text area signals content of lesser importance.
• Shape – the arrows, corner circles, and half-round rectangle shapes all draw the eye. They also distract from and overwhelm the main call to action.
• Contrast – the blue color stands out strongly against the pure white background. However, the orange headline and reversed-white text are less strong by comparison.
• Face – the spokesperson’s eyes and smile are potential distractions – especially since they are but one of many elements popping loudly for attention.

So how could we adjust this, to make the quote form pop? As we’ve seen before, we can achieve pop by adjusting either the element in question or its environment.

Let’s start by trying to give the form itself more emphasis, without touching anything else.

Attempt #1: shape and hue. By adding an arrow shape of the same hue as the button to the form, we succeed in pulling a bit more attention to it. But now, there are simply too many arrows on the page to make sense. We’ve wandered into the land of everything Pops:

—

—

So instead, let’s try removing the arrows altogether.

Attempt #2: shape and contrast. This version simplifies the page by reducing the number and variety of shapes, and allowing the quote form area to have the strongest contrast. But I’d still like to see it pop more. And I can’t believe I just wrote that.

—

—

Attempt #3: location, contrast, size, and padding. To me, this version gives just about the right amount of emphasis to the quote form. It’s not the only solution, but it’s a fairly solid one:

—

—

The heading is larger, and moved up next to the spokesmodel’s face, to take advantage of the attention her face attracts. An abundance of empty space allows the eye to focus on what that space surrounds. The button, with its unique and striking hue, finally stands out in the manner it deserves.

Things To Say Instead of “Pop”

So now that you’ve learned more about creating and changing visual emphasis on a web page, it’s time to say goodbye to the word all designers hate. You won’t need it anymore. Instead of saying, “Could you make that pop a bit more?” you can say…

“Can you…

• Move it higher (or move other stuff lower)
• Make it larger (or make other stuff smaller)
• Change its shape (or remove or normalize other shapes)
• Increase its padding
• Increase its contrast (or reduce the contrast of other stuff)
• Change its hue (or change the hues of other stuff)
• Increase its saturation (or reduce the saturation of other stuff)
• Add a face – but carefully (or take other faces away)

There. No need to say the word “pop” ever again. You’re welcome.