fbpx
visual.hierarchy

Strategy #72: Using Visual Hierarchy to gain attention

Munich’s Direct Marketing Association, in their research notice something peculiar about subjects’ eyes when they were reading information.

The subject’s eyes were not following a linear path, reading each word in succession, but instead jump around to different points in the body of the letter.

So what were they looking at?

The answer is the key to creating a post-click landing page that converts, with the help of what’s called a “visual hierarchy.” To fully understand it, we’ll have to travel back to 1912 Germany, where three psychologists began forming the foundations of Gestalt Psychology.

Gestalt Psychology and the foundation of the visual hierarchy

More than a century ago, German thinkers Wolfgang Kohler, Max Wertheimer, and Kurt Koffka began studying how people perceive the world. Their names and the theory of “Gestalt Psychology” may not look familiar, but the message that encompasses their research will:

“The whole is other than the sum of its parts” — meaning the whole has “an independent existence in the perceptual system,” says Dr. Russ Dewey.

In other words, the three men proposed that humans don’t perceive their surroundings individually and equally. Instead, we organize them in specific ways to make sense of them as a whole.

Take the following image for example. What do you see?

You probably notice three partially drawn circles, but also an upside down triangle in the center where there is none. The incomplete circles form the corners of the triangle, and your mind fills in the edges. This is called an “illusory contour,” and it exemplifies exactly what Koffka meant when he said, “the whole is other than the sum of its parts.” There’s more than just three partially drawn circles in this image. Together, positioned as they are, those circles form a white triangle.

From their research, the three men created eight laws of perceptual organization — ways in which humans view components of a group as a whole. One more than any other has to do with the way people find crucial information on your post-click landing page.

We won’t go through all 8 here. Just the main one which works for converting landing pages.

In that excerpt, your eyes were likely drawn to the anomaly. You grouped the unformatted sentences together, and the bolded words stood out. When you introduce differences in size, attention is drawn elsewhere.

This is the most important sentence.

This is the most important sentence. This is the most important sentence. This is the most important sentence. This is the most important sentence. This is the most important sentence. This is the most important sentence.

This time, before you noticed the bolded words within the paragraph, you probably saw the even bigger, bolded words above it.

We could keep altering words with colour and positioning to make them stand out even more, but you get the point. “Different” grabs attention, and attention is what you want paid to the most important information on your post-click landing page.

With differences in design, you can strategically draw your visitors’ eyes to marketing messages that are central to driving conversions — your value proposition, your product’s benefits, and the call-to-action, for example. These attention-grabbing strategies form the “visual hierarchy.”

Within that hierarchy, the most important information is where your visitors’ eyes land first on the page, and then the second most important information is where their eyes land next, and so on. Without even realizing it, they mentally rank these elements from crucial to unneeded based on differences.

Share this post with your friends

Strategy #72: Using Visual Hierarchy to gain attention

by TFB Team time to read: 2 min
0