Learn how to use images and copy to control your visitors’ attention.
Websites are an important part of most businesses these days. They are essential to communication, providing cognitive clues to the authority of the business and providing sustaining methods of completing transactions that correspond directly to the bottom line of the companies that use them. The myriad opportunities to maximize this ROI are often wasted, however. Research by usability expert Jakob Nielsen found that fifty-two percent of screen space was completely wasted in 2013, more than in 2001. 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.
We Are Now In Control Of Your Eyes
It’s very likely that, like most of the visitors to this page, you are reading this line of text. Furthermore, you probably didn’t arrive here through the opening paragraph.
Why?
The opaque opening paragraph is poorly written and difficult to read.
Your visit was anchored by an image in a prominent position.
You probably read the image caption. Most people do.
A graphic element, the arrow, drew you from the image to the headline.
The headline was designed to be unexpected.
If I’ve been successful, you will have completely skipped the first paragraph of this column. I did this to make a point.
Choose What Is Important & Enforce That Visually
The hardest part of developing a webpage is deciding what is important. This may sound counter intuitive.
As we start to try to incorporate all of the things we learn on Marketing Land (and Search Engine Land) into a page, we quickly find that some things just don’t work together. The text you need for SEO often conflicts with persuasive copy. The space you use for branding may take away from user-centered content.
Jakob Nielsen says that in 2013, half of all screen space above the fold was wasted.
The culprits?
Filler content and images
Self-promotions and ads
Arbitrary blank space
While it may be difficult to remove ads and self-promotion, we can definitely make better use of blank space and remove filler content.
Here’s A Test
Having reached this part of this column, can you tell me how much screen space is wasted according the Jakob Nielsen?
A. Half the screen space
B. 52% of the screen space
The most accurate answer is B. If you chose A, don’t be sad. It was by design.
I Tricked You
The “52%” statistic was placed in the opening paragraph — a paragraph that was designed not to be read.
Even though this statistic was above the fold in the first paragraph, it was essentially hidden for many (if not most) of you, dear readers. This paragraph is 108 words long, containing six sentences.
The first line is uninteresting, even obvious. The second sentence is 34 words long, many of them multisyllabic. (See what I did there?) It is rife with ambiguous pronouns and doesn’t say anything new or interesting.
I wrote out the phrase “52%” (as “fifty-two percent”) since I knew your eye would be drawn to a numerical statistic.
To the left is an image that beckons the visitor to stop and examine it. One does not expect to see a girl reclining on a hot tin roof. A cat, maybe, but not a girl. I placed it in the left-most position above the fold.
The caption makes a promise, and captions are very frequently read if the image is interesting. Then, I used an arrow to direct your attention to a headline that keeps the promise of the caption. It’s a continuation of the message.
With the use of bold text, a bulleted list and another heading, you should have been drawn through the rest of this page, bypassing the first paragraph.
Yes, I designed this page to hide the more specific statistic. I didn’t stop there.
We Are All Scanners
Taking advantage of our scanning behavior, I placed the less accurate result in places you were destined to find it.
If I was successful in pulling your attention from the image to the caption and then into the page, I presented a copy that is easy to scan. Such copy often includes:
Frequent headings
Short paragraphs
Conversational text
Bulleted lists
Bold highlights
I placed the “Half the screen space” bit in two places that scanning eyes can’t resist: in link text and in a pull quote. I used white space around the pull quote to make it more prominent to you.
Let us know which answer you chose in the comments.
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.
What’s most important on the pages you’re developing? Is it your phone number? Your offer of free shipping? Your money-back guarantee? Prioritizing your messages isn’t easy, especially when we’re designing home pages.
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.
Comments