5 Easily Corrected Website Design Mistakes Revealed By Eye Tracking Studies

by Gregory Ciotti

Last updated on March 6th, 2018

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?



Get updates on new articles, webinars and other opportunities:

Gregory Ciotti

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.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Anonymous says:
    February 1, 2016 at 1:33 pm

    Wow. What 5 great tips! This is exactly what I was looking for: design that goes beyond pretty. Thanks!

  2. Jason Yu says:
    December 15, 2014 at 9:49 pm

    Thanks for sharing this useful artical! I learn a lot from that.

    • December 16, 2014 at 9:56 am

      You’re welcome! Glad you liked it, Jason.

  3. Janet says:
    September 17, 2014 at 4:39 am

    Thank you so much for the article. I am new to the wonderful web design world and this article helped me alot.

    • Neil Patel says:
      September 18, 2014 at 2:44 pm

      Janet, glad I could help. Looking forward to hearing much more from you 🙂

  4. September 9, 2014 at 12:33 am

    Great post, I like your article and I think this is what I am looking for, I ‘m a web designer, I have encountered many problem as you said, after viewed your post, I must say : I learned too much from u. I will usually scan your web. Thanks for sharing.

  5. Scott says:
    September 8, 2014 at 1:16 am

    Easy and simple but very important things. This is a smarty thinking blog. I like it and I’m going to share with friends.

    • Neil Patel says:
      September 8, 2014 at 11:13 am

      SCott, thanks for the feedback. Looking forward to hearing more from you 🙂

  6. April 8, 2013 at 6:33 am

    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.

  7. Andrew Woo says:
    March 26, 2013 at 9:03 am

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

  8. Georgie says:
    January 15, 2013 at 11:12 am

    Thank you, very cool info, & really concise communication

  9. Blake says:
    October 17, 2012 at 5:53 am

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

    • Russ Henneberry says:
      October 17, 2012 at 8:56 am

      Hey Thanks Blake! Glad you found it actionable!

  10. Elizabeth H. Sherman says:
    September 18, 2012 at 6:30 am

    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!

  11. September 13, 2012 at 10:07 am

    Really interesting article on site usability.

    Thank you. I will pass onto my team.

  12. Michael says:
    August 27, 2012 at 10:37 am

    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?

  13. Mark says:
    August 24, 2012 at 9:42 pm

    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.

  14. Emil says:
    August 24, 2012 at 3:57 pm

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

  15. @RSGmike says:
    August 24, 2012 at 6:59 am

    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 at 3:19 pm

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

      Ha, when doesn’t that help 😉

  16. August 22, 2012 at 8:02 pm

    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.

  17. August 22, 2012 at 4:41 pm

    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.

    • Russ Henneberry says:
      August 23, 2012 at 9:42 am

      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.

  18. August 22, 2012 at 2:47 pm

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

  19. Mei Lam says:
    August 22, 2012 at 1:39 pm

    Great article – Really informative and useful!

    • August 22, 2012 at 2:59 pm

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

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

  20. August 22, 2012 at 10:15 am

    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!

Show Me My Heatmap

I’m just @crazyegg’ing everything these days.

Kyle Mitchell


What makes people leave your website?