5 Easily Corrected Website Design Mistakes Revealed By Eye Tracking Studies

by 26 08/22/2012

Website design that generates leads and sales does more than look pretty.

Websites that affect the bottom line understand how site visitors are interacting with their website.  The following five mistakes are simple to correct and aren’t a matter of my opinion.

They’re backed by recent research and eye-tracking studies.

Let’s dive right in.

1 – Not enough emphasis on headlines

This information is revealed to us in a recent study called Eyetrack III, and the results may change the way you look at your homepages forever: big, bold headlines capture more attention than even images.

It’s strange to think that this is the case, but the research was conclusive.  Not only are headlines the most viewed component of any homepage, they are typically the first things viewed as well, capturing attention quicker than pictures and even navigation bars.

Many companies are now embracing this with their homepage designs, emphasizing the benefits of their product in one concise headline.

Here’s how KISSmetrics does things:

Over at Help Scout, we’ve implemented this into our design as well:

While a picture may be flashy, bold, and even provocative, a certain amount of blindness is evident for even the most captivating images likely because we’ve grown to block out image advertisements.  Text draws our eyes since it’s what we use to determine what the site is about.

Is your homepage utilizing this information?

When new visitors hit your homepage, is it easy to figure out what you sell without exploring your navigation options? It should be.

2 – Content isn’t approachable

Every smart marketer know that content is what the web wants, so an ample amount of content marketing should definitely be in your gameplan. The problem is, many web designs aren’t creating enough incentive for people to access that content.

The first problem is aesthetic. Thanks to incredible research from Mary Dyson on “How Physical Text Layout Affects Reading from the Screen”, we know that people prefer reading text with a shorter line length, but actually read faster when text has a longer line length.

The problem happens when blogs lump an excerpt of their content at the top of the post, refusing to change the structure. You need to entice people to read your articles by having a shorter line length up top (or just shorter sentences) so that they are willing to approach your post (it’s a fact that people are more likely to finish an article if they read past the first few lines).

The second problem is a cognitive one. The beginning of the article has to be about the reader. What are they going to learn by reading your article? What are the benefits for sticking around?

Personally, I’m a fan of how my chum Derek Halpern takes care of both of these problems in his Perfect Blog Post format:

Using the image to the right, as well as discussing the benefits/advantages and what the reader is about to learn makes the post very approachable. The shorter line length makes for easy reading, and right from the get-go I can learn what the post is about and get fired up to begin. After all, we know from the Wharton School of Business study on viral content that all of the most shared content on the web evokes strong emotions.

What’s my incentive to read your blog posts?

3 – Content is intimidating

This is a big one, but fortunately, the fix is easy, and I’ve seen more and more web designers embracing beautifully readable typography.

Research in this area comes to us from both Eyetrack III and Susan Weinschek’s book Neuro Web Design: What Makes Them Click?. These findings indicate that readers love white space and can be put off by larger paragraphs that don’t conclude ideas in a succinct manner.

Jason Fried, founder of 37signals, also had this to say on paragraph length:

It’s great insight backed up by solid research. Since that is the case, what’s a web designer to do?

Rafal Tomal, lead designer at Copyblogger Media, created some easy to follow graphics on the importance of fixing in-post copy:

Above, Rafal recommends bumping up headline size and increasing the amount of sub-headlines so that content is broken up into smaller chunks, making paragraphs shorter.

He also recommends reducing overall line width and increasing line height between sentences, spreading content out so that there is plenty of white space.

You’ll notice that some of the biggest web design sites in the world such as Smashing Mag are now embracing this content structure. You’ll also notice large news sites like NBC news following these principles as well.

Don’t make your well written copy unreadable! You don’t want your message to get lost in long clusters of paragraphs that are hard on the eyes.

4 – Offering too many options

Sheena Iyengar’s now infamous jam-study reveals a shocking truth about offering your customers plenty of options on your website: choice can actually be demotivating!

That is to say, when it comes to making a purchase selection, having too many choices available often (subliminally) persuades people to choose nothing instead. Worse than that, many options often increases a customer’s interest, but decreases the likelihood of things getting purchased, leading to a false belief that offering numerous options is working.

Here’s how the study went down: Sheena took 2 different layouts of jam to an upscale supermarket and put them on display (alternating days). One layout had 6 flavors of jam, the other had 24 flavors.

Which setup do you think saw the most action?

The answer is surprsing. While the display of 24 flavors had more people trying the jam, when it came to actual purchases, the display of  6 flavors had 30% of people making a purchase, compared to only 3% of people when the 24 flavors were on display!

That’s a HUGE bump in purchases, but also points out the insidious danger of having too many options: you’ll get more people checking out your product, but few people actually buying.

Take a cue from the playbook of Steve Jobs: focus on the real winners in your product line-up and put them front and center into your offering and in your web design, ditch the rest.

5 – Under-utilization of 2 sneaky image tactics

Hey now, I’m not telling you to be a sneak, but there are 2 very important things about your images that you should recognize if you want to increase their impact.

This goes beyond the generic advice of, “use bold and high quality images”, this is the ninja stuff of persuasion with design.

First, you should understand that image captions are some of the most read copy on your entire website. Drew Whitman revealed this in his book “Cashvertising”, which analyzed the psychology of advertisements. You’ll see this practice being used on many sites, one notable example being Cracked.com, where authors regularly save their better punchlines for image captions because they knew people will read them!

The image captures the eye’s initial gaze, and the caption is the next thing to be viewed, because of this fact, many journalists actively use this in their writing as well.

Second, images with a human face tend to create a line of sight that people find irresistible and will follow with their own eyes. This was revealed to us in Giovanni Galfano’s study on how we react to the gaze of others, and is very applicable to online web design.

Check out how Chemistry.com uses this on their homepage:

(You’ll notice the bold headline to the right of her face as well)

Are you incorporating the power of captions and the irresistible call of line of sight into your design?

Your turn…

Now I wanted to hear your thoughts

Did any of these studies particularly surprise you? If so, which one. What are some other great examples of these studies being put into practice?

About 

Gregory Ciotti is the marketing guy at Help Scout, the invisible help desk software that makes email support a breeze for you and your customers. Get more from Greg on the Help Scout customer loyalty blog.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

26 COMMENTS

Rafal Tomal

Great article! I like you mentioned about the headlines. This is something we do in all our projects.

Thanks for including some of my tips!

August 22, 2012 Reply

Mei Lam

Great article – Really informative and useful!

August 22, 2012 Reply

    Gregory Ciotti

    @Mei – Thank you! Glad you liked this one.

    @Vidal – Much appreciated, I do love me some research. :)

    August 22, 2012 Reply

Vidal Quevedo

Loved this article, and really appreciate how you supported it with real studies. Thanks for sharing!

August 22, 2012 Reply

Matt Borden

I love the line of sight. Its interesting I have a photographer friend who was explaining this very thing to me in the way of taking pictures, however I never realized how irresitable it would be to use line of sight to draw the viewer to a caption. I love that.

I have been utilizing keeping choices down for a some time now. Users need a choice, but too many doesn’t work. Seth Godin covers this indireclty in some of his stuff, the marketplace wants a product to be tested and tried. They want the marketplace to weed out everything but the best. They don’t have time to investigate 24 flavors of jam, but 6, they can quickly narrow down to 2 or 3 and then make a choice.

Ever try shopping for canned soup at the grocery store? Regular or Organic, doesn’t matter, there is a million and a half choices. Well ok, probably about 75, but that is about 65 more then I can deal with when my kids are fighting and my pregnant wife needing to get home etc… Which is a real world picture, people have lives, you have to delecately balance your offering. Enough to give them control, but not so much that its not highly prequalified for them.

August 22, 2012 Reply

    Russ Henneberry

    I remember entering a sandwich shop called Roly Poly (it’s a franchise) and looking at the menu. I was intimidated by the number of choices. It paralyzed me and even though I ordered a sandwich, I was convinced that I hadn’t ordered the perfect one for me.

    August 23, 2012 Reply

SEO Maryland

This is fantastic – Awesome post! It’s amazing how many company’s focus on traffic, traffic, traffic, when they have terrible conversion rates. Looks like it’s time to update our site using some of the tips above.

August 22, 2012 Reply

@RSGmike

Very well written, easy to read and overall awesome blog post. I passed it along to our Web Team and have bookmarked it! Chemistry.com is a great visual and confirms “images with a human face tend to create a line of sight that people find irresistible and will follow with their own eyes”… I guess it helps when the image is a hot blonde. We create a tradeshow booth similar to this design and received very positive results with people stopping, reading the message and approaching the inside of the booth.

Great job and look forward to more posts.

Mike Robertson

August 24, 2012 Reply

    Gregory Ciotti

    “I guess it helps when the image is a hot blonde.”

    Ha, when doesn’t that help ;)

    August 24, 2012 Reply

Emil

I wonder how the jam study applies to the web (dropdown menus, multiple links/call to actions)

August 24, 2012 Reply

Mark@ Make Them Click

Gregory, fantastic article.

I find it ironic that web designers are now rediscovering and embracing what offline designers have known for over a century.

Guess the rules haven’t changed after all.

August 24, 2012 Reply

Michael

Dear Gregory,

Thanks a lot for an interesting article. What is your opinion on nessecity of eye-tracking in mobile apps with smaller mobile screens on tablets and smartphones?

August 27, 2012 Reply

Rachael Niklas

Really interesting article on site usability.

Thank you. I will pass onto my team.

September 13, 2012 Reply

Elizabeth H. Sherman

Thank you so much for this guide. I like tutorials with such a distinct narration! These tips will be very helpful for me, for sure!

September 18, 2012 Reply

Blake

Loved reading this article. Made me think about how my content is presented to the end user, changed will be made!

October 17, 2012 Reply

Georgie

Thank you, very cool info, & really concise communication

January 15, 2013 Reply

Andrew Woo

the “Content isn’t approachable” tip from derek halpern was very insightful

March 26, 2013 Reply

Chris – No Win No Fee Lawyers

I love this topic. The main thing in designing any website is keeping it simple and making it easy to navigate. If the website isn’t user friendly, you’ll have people just bouncing back out your website, because they couldn’t find what to do next, or couldn’t find what they where searching for.

From an SEO point of view, stay away from flash. Content wise, keep about 300-500 words on the landing page, because it’s not to much content but enough to interest the reader to read on. In addition, have a couple of images. this will be the first thing they will notice.

Don’t forget the fundermentals, Contact Us details on Top Right, Logo Top Left, Sitemap at the bottom and ensure each page is cross linked into making a purchasing decision.

April 8, 2013 Reply


Leave comment

Some HTML allowed

Get conversion optimization, design and copywriting articles FREE >>>