When it comes to page design, I’m fond of saying that we don’t need a designer as much as a draftsman. Their job is less about making things attractive and more about getting a visitor’s eyes to the right parts of a webpage.
What do I mean by “right parts?”
I mean that a visitor must know how to digest a page. They must know that they are in the right place, and why. This is the job of the headline and sub-headline.
They must know what choice they are being asked to make. Should they continue on in their journey? Buy something? Get the hell out?
They must know where to find answers to burning questions.
Designers are playing a game of tilt-ball, where the visitor’s attention must be carefully guided around obstacles and pitfalls. Literal pits to fall into.
Designing a Web page is like a game of tilt-ball.
If the ball is a visitor’s eye, then visual cues provide the “gravity” that move the ball along the board.
This column is not for designers. It is for managers and marketers who are tasked with ensuring that the designs they get for their landing pages, ecommerce sites and home pages are competently designed to perform.
Pitfalls: Where the eyes get stuck
When someone says a page looks “cluttered”, the culprit is probably poor use of visual cues. Many of the pages we design have the job of “Help me choose.” This means that they must help the visitors choose a next step, a product, whether to sign up or not, or whether to leave.
1. Bridges to Nowhere
Two of the greatest visual cues you an employ are photos and arrows. Our love of images comes from big glossy spreads in magazines, where the images may be all that is seen as readers browse idly under their hair dryers.
Web readers are in a very different context.
Images and arrows are used gratuitously, to fill space or the “break up” a page. These elements will always draw the eye, but are they drawing the eye to a dead end?
What’s the Point?
Arrows are powerful sources of visual gravity. But they lose their power when they point to things that aren’t exciting, or are only exciting to the owner of the website.
The arrow promises something important. The button text breaks that promise.
This creates a visual bridge to nowhere.
Visually, arrows point to the most pertinent part of the page. If that doesn’t excite the reader, then the rest of the page seems unimportant.
If you’re going to use an arrow, make it point to something exciting for the visitor. The arrow below points at something a bit more exciting:
Arrows don’t have to point to extraordinary offers. They can be used as simple guides to increase scrolling, as long as they are working in the interest of the reader.
Arrows come in many forms. Here a simple chevron increased booking in this AB test.
Even words can be used as pointing devices.
2. Faces of Death
Images of people will suck attention away from almost any important text on a page. This is why so many designers’ use of images works against the business.
Faces draw our eyes. If someone attractive is looking at us, we look back.
We’ve written before about how stock photography and other forms of “business porn” are both a wasted opportunity on a page. Images will powerfully advance the value proposition of any page.
Images are also powerful visual cues when used correctly, yet too often, they’re dead ends.
This image succeeds in enticing visitors to look away from the primary call to action.
With a caption, this image becomes a credibility builder and explains the “Watch Video” offer.
The direction of the eyes can be used as a visual cue. In the following image, the model guides the visitor toward the site’s navigation, but away from the primary call to action. Her body directs our gaze away from the copy as well. This is probably not an effective visual cue.
In the following page, the model is looking generally in the direction of the call to action. This image needs a caption below or overlaid on it to make it an effective visual cue.
Bryan Eisenberg uses an image to direct attention to the main offer on his website. Notice the subtle finger pointing downward in the following image.
3. Motion for Motion’s Sake
Probably the most powerful visual cue is motion, any kind of motion. Like images, moving things can draw the visitors into a hole from which they never escape.
The most common source of motion on business websites today is the image carousel. This is a staple of the web because marketers can’t make hard decisions, or because politics require that everyone get a piece of limited home page real estate.
In our AB tests, we often find that removing rotating carousel images improves conversion rates. In situations where carousels win, the major contributor is the first slide. The second contributor to a winning carousel is a slow fade transition.
In other words, make the carousel look like a static image.
The reasons that a carousel might underperforms is threefold.
- Constant motion diverts the visitors’ eyes keeping them from getting into the page’s message.
- The burden of multiple large images increases page load time so much that it affects conversion rates.
- Technical issues prevent the carousel from displaying properly in certain browsers, devices and screen sizes.
There is a lot to lose with this kind of visual cue.
Carousels are also used to rotate customer logos, to slide through customer testimonials and to reveal products. Carousels are all signs of indecision on the part of the business that owns the website.
While the rotating carousel does appear to be on the way out, it has been replaced with an even worse motion –based visual cue: full-size video animation.
The video in this animation is 1.5MBytes, a massive hit to load time. And it’s blurred out. What does this communicate?
Designers justify this with unsupported statements like these:
Stunning video or animation in the background can easily make people stop and stare, then examine it, increasing the time they spend on the site, and hopefully lead to more interaction with the contents [sic] on the site.
The argument is that, if visitors stop and stare, it increases time on page. This, the errant thought continues, results in more interaction with the page. Here’s the punch line. The motion reduces engagement with everything else on the page, but only if the visitor is around long enough for it to load.
Businesses seem to be buying this.
The same thinking is used to justify parallax animations – that a more interesting page increases engagement. Our testing experience is that engagement often increases as conversion rate decreases. As it turns out, engagement is also a measure of how confused a visitor is.
The proper use of motion as a visual cue is to draw attention to something important.
If you don’t think that this sentence is important, then you are not human.
Nonetheless, if you’re going to use motion, use it to draw attention to something valuable.
In the animatiTest-na-anskioznost.gifon below, you can see how the popup “shakes” to indicate that the visitor made an error in entering data. This is actually helpful to the visitor.
Motion is SUCH a strong visual cue, that it can quickly overwhelm a visitor.
This parallax implementation only serves to hide content, making the page look blank at one point.
In affect, many of today’s parallax designs end up looking like this to the visitor.
4. Gestalt Principles and Poor Grouping
The human mind likes to group things. When things can’t be grouped, the visitor has to work too hard to comprehend and prioritize a page. This is what we typically call “clutter”.
Grouping of things is another important visual cue. It is a combination of Gestalt Principles used in design, and can entail similarity, proximity, and enclosure.
Two places where grouping is an important visual cue are ecommerce category pages and SaaS pricing pages.
Adding some visual cues creates enclosures, communicating what objects are grouped.
In the following example, the enclosure leaves out the product pricing, description and star rating, but the white space creates enough separation.
The enclosure here doesn’t serve the reader.
With the addition of white space, we can influence the way visitors group things visually.
5. Product Pages & Limited Information
This page uses visual cues to prevent grouping.
First, the arrow points to a call to action, “Try it free!” The hand-written script makes the offer stand out. That is, visitors don’t group it with the rest of the text.
Next, the “Plus” column is highlighted in a different color and labeled “Most Popular” in red. This is important, because we would otherwise group all four together. This visually anchors the decision to the top higher-tier options. The choice goes from “Choose the best” to “Choose between Plus and the others.”
When we don’t provide visual cues, our visitors may not feel they have enough information to make a choice.
Pricing pages often rely on lists of features to differentiate. Unfortunately, they don’t realize that they are creating arbitrary groupings simply with the text they choose.
Here’s a list with inadvertent groupings.
The visitor will read the first item in the group. If it doesn’t interest them, they move to the next group, not the next item. We can see this behavior in heat map reports and session recordings.
Mangers should always ask, “Have we used visual cues to help our visitors choose?”
Content is the Best Visual Cue
From the visitor’s point of view, the best visual is the content that she is looking for, right? So visual cues should not be used in place of content. BH may have transformed Foundr Magazine, but there is more missing on this page than an “e”. This page relies on an arrow to indicate where the visitor can find the menu for the site. What would be a better visual cue than an arrow?
As conversion optimizers, we are not fans of content hidden simply for the sake of design. Progressive reveal is rarely beneficial and only works in specific use cases.
Managers should say, “No” to hiding important content from decision makers.
Shape as a Visual Cue
We all know that we should click on buttons. But what is a button. In the image below, there are three buttons. Which is clickable?
One is a white border around a menu item. One is a white rectangle with a call to action. The other is the classic arrow indicating video is available. Of the three, the video arrow is the most recognizable as a button, something you can click on.
With the advent of flat design, shape and shading are used less and less to indicate clickable elements. However, designers are returning to some of the shapes that made things look clickable.
Which element below is clickable, the “Enterprise” button or the “Sign Up” button?
The blue area containing “Enterprise” is a title. It is not clickable. The blue shape with the rounded ends is clickable, and is shaped like a button to indicate that.
Which is clickable here?
In general, the shape with rounded edges and shading indicating a physical button will give the visitor a clearer message that an they can take action.
Text as Visual Cue
The way you create text can be a visual cue. The myriad opportunities to maximize this ROI are often wasted. Some designers espouse a minimalist approach, minimizing the amount of information that is encapsulated on a page. Others evangelize a more comprehensive style. These two approaches are neither right nor wrong. Research by usability expert Jakob Nielsen found that fifty-two percent of screen space was completely wasted in 2013, more than in 2001.
We Are Now In Control Of Your Eyes
Jakob Nielsen says that in 2013, half of all screen space above the fold was wasted.
Based on what you’ve read, can you tell me specifically how much screen space is wasted according the study by Jakob Nielsen?
A. 50% of the screen space
B. 52% of the screen space
The most accurate answer is B, or 52%. If you chose A, don’t be sad. It was by design.
You should have answered A, because I hid the more accurate answer in the opening paragraph of this section. The first line is uninteresting, just repeating the heading. Then comes a 34-word sentence with many multisyllabic words (See what I did there?). The important stat was written out because numbers jump off the page.
This paragraph is a visual pitfall.
To support the more general, less accurate answer, I used an unexpected heading, “We are now in control of your eyes.” I highlighted that “Half” of the screen space is wasted using a pull quote and linked text. These are visual cues.
The scanning eye will tend to land on textual cues.
- Headings and subheadings.
- Highlighted text, Bold, Italicized, or Colored.
- Bullets or numbered text. Like this.
- Short paragraphs.
- Shorter lines.
It’s not that people don’t read, it’s that they favor text that is easier to read.
It’s Easy When You Know What You Want
None of this is a result of my training in UX, psychology or persuasive writing. I knew that there was one thing that I wanted you to see, and another that I did not.
You might start by looking first at what doesn’t work for you.
Rethink filler images or remove them. Consider if branding images need to be so large. Rewrite headings to tell scanners what’s on the page. Eliminate long paragraphs, long sentences and business speak.
Then see where you are. Odds are that your page will have improved immensely, as measured by your accountant.
Understanding what’s important on any page and then applying some tricks to focus your visitors’ attention is a great way to get what you want and to help them find what they are looking for.
Brian Massey is the Founder and Conversion Scientist at Conversion Sciences. He is the author of Your Customer Creation Equation. His rare combination of interests, experience and neuroses were developed over almost 20 years as a computer programmer, entrepreneur, corporate marketer, international speaker and writer.