What many marketers fail to understand is that your website is more of a “user experience” than a book cover: people interact with your site as they use it, so making it pretty is not your only concern.

Fortunately, you can inform yourself by utilizing a variety of insightful eye-tracking studies that reveal how customers really view your website.

Let’s get started with some of my favorites:

1. Your Headlines Matter… A Lot

In one of my favorite design related studies of all time, Eyetrack III reveals just how important your headlines are in your design. The answer: Super important.

In fact, your headlines are consistently the most viewed thing on your homepage, even before your images! Even more interesting is that your headlines need to capture someone’s attention is less than 1 second in order to be effective.

That means getting to the point about what you’re offering is crucial. It also means that you need to make your headlines stand out and entice people to read and click.

Because of this short time-frame, it’s best to put important and bold words at the very beginning. It’s one of the reasons that list posts do so well on blog: the number appears first, and it’s inviting to see a number.

I recently did a post entitled The Marketer’s Guide to Cult Addiction, and the title was formatted to let people know the post was for marketers first, then follow up with a drastic word (“cult”) to keep them hooked.

I like how my buddy Rafal Tomal did Copyblogger’s homepage, because you know exactly what sorts of products and services they offer, and that’s after only reading the headline.

Without a concise idea of what your company offers, you’ll lose a lot of potential customers. How well does your headline spell out what your business does for customers?

2. When Things Should Stand Out

Everybody appreciates a web design that “blends” well with the correct colors and subtle texturing, but should anything ever stand out in your web design?

According to research that ultimately lead to the documented Von Restorff effect (named after the lead researcher), it should be your call-to action: those things that are “isolated” from others get noticed first.

Derek Halpern does a great job of using this study to point out the silliness of asking “what’s the best color for conversions?” In a recent post, as this research shows us; The best color is the color that stands out from the rest of your design.

Over on Help Scout, we use a green button to promote our free 15-day trial versus our normally blue + white color scheme because it sticks out like a sore thumb… and we want it to.

First, you need to take a look at what your baseline and accent colors are:

Next, you need to find a color that stands out among these colors. This will become your action color.

If you’re sticking with a neutral white and green color scheme for the majority of your site, you could go with a large orange button for your call-to-action. You’ll notice that Mint does this, and you’ll see that it doesn’t have to look ugly!

Notice the two orange areas, one is a call to sign up and the other asks you to get started for free.

Be sure to use your “action color” only for actions, don’t get it confused with other colors because you’ll leave your visitors confused.

3. Clean Up Your Act with Whitespace

Some great information from both Eyetrack III as well as Susan Weinschek’s book Neuro Web Design shows us how designers can clean up their act by implementing something that the eye loves: good ol’ fashioned whitespace.

Both of these sources show us that website visitors are much more likely to be engaged (and finish reading) content that has the appropriate amount of whitespace and that looks easy to read. This is thus a key ingredient for creating a kick-ass landing page: You won’t be doing any converting if people aren’t reading your stuff.

Rafal Tomal comes to the rescue again with these easily implemented images showing how you can improve your written content with a few simple changes:

The Importance of whitespace in spacing: Rafal shows us that it is important to spread out your copy with bold headlines and shorter paragraphs so people keep reading.

The importance of whitespace in written content: Rafal recommends increasing line spacing and indentation for copy.

You’ll notice huge sites like Smashing Mag and even NBC news have incorporated this font + whitespace styling into their written content.

Don’t be afraid to utilize whitespace: You don’t have to have a minimalist design to incorporate a healthy amount of whitespace that promotes the reading of your well-crafted copy.

4. Getting Clever With Your Images

It’s a visual world these days, and there are a few ways that you can get mighty clever with your images, all by using a very simple design trick known as “line of sight”.

We can’t resist following the gaze of another face, even if the face isn’t real

We are very susceptible to following arrows and other directional cues

This example from Chemistry.com may look familiar:

This is the quintessential example of line of sight in action. It also must be working, because they’ve been using it for quite some time now.

I also saw a noticeable boost in conversions when I implemented the line of sight technique over on Sparring Mind… even though it wasn’t a real face.

As I also mentioned, Galfano found that directional cues also have a major impact on where we look on-page (only slightly less effective than faces).

I know a lot of designers who are averse to using things like arrows because they feel “too pushy”, but there is a way to implement them with class, such as how Rafal worked them in on Chris Brogan’s stunning redesign:

5. Getting People Started

One thing that the Eyetrack III study noted was that the headline + intro paragraph was pivotal in deciding whether or not people would read the full piece (whatever is was, blog post, landing page, etc.).

The problem then is this: How do you get people to approach your content without slacking on quality?

I like Derek Halpern’s approach on the matter, with his opinion being: “The only job of your opening is to get people to read your opening… that’s it.”

It’s true, getting people past the first couple of lines has been proven to be the biggest indicator in whether or not they’ll finish a piece of content.

People read content faster on long lines, but prefer content on shorter lines…

So, why not give ’em both?

Starting off blog posts or landing page copy with a short line length can help increase initial “stickyness” of your content, and then after they start reading, you can go back to a longer line length.

The easiest way to accomplish this is with an image aligned to the right:

This creates the shorter line length that we desire to see (as revealed by Mary’s research), but also returns to a more natural line length as the content progresses.

Just complete your post introduction beside the image, and continue the rest of the post as usual. No reason to scare people away with a big “wall o’ text” now!

Your Turn

Now I want to hear from you:

Which of these studies was most surprising? What did you think of them in general?

As a special thanks for getting all the way to the bottom, I invite you to download my free e-book on Conversion Psychology for 10 more interesting studies on psychology + marketing.

About Gregory Ciotti

Gregory Ciotti is the content strategist at Help Scout, the invisible help desk software that turns email support into a fast, personal, and pleasant experience for your customers. Get more research backed content on our blog.

These are all good pointers… I do find though that the #1 thing that has a positive or negative impact on my conversion rates are the ads that sent the person there. How good was the ad at pre-qualifying the lead, did I have an appropriate target audience, etc.

Oli Gardner

Great point Anthony. Ensuring a strong message match between the ad and your landing page is critical to conversion rates. And totally agree that the ad should be audience appropriate – you’re just throwing money away if all you’re looking for is a high click-through-rate.

The #3 matters a lot. People often tend to forget the importance of white space. Organizing the content in paragraph and adding images at appropriate locations can increase the engagement.
I recently started making some small changes in my design, especially in the header section where I reduced the font size by 3px, reduced margin by 2px, reduced padding (top-padding) by 2px and I noticed a small percentage increase in CTR. I can not exactly related them anyway but still such small changes does matter sometimes. No the CTR was not increased by huge margin, but it was still a good start for less savvy people like me

Like the article, just wanted to say that it´s very easy to get to creative with pictures. I have quite a few failures in the past doing just that so I understand the fear a lot of pros have for arrows etc.

With that traffic figure in mind, a good conversion will work with you to identify potential keyword targets to drive that volume, the level of competitiveness for those terms and the strategy and tactics that will need to be adopted to improve your search engine (and wider digital) presence for those terms.

a lot of sense there, Completely agree with ‘users first, search engine second’ – it is however not always easy to focus on and even the best of SEOs can sometimes fall into the trap of neglecting this mantra.
Like any industry there will be those offering genuine service and those out to make easy money. Regardless of your experience as Guy referenced, you need to do the research first before deciding on who to use and accept full responsibility for it going wrong. There are more than enough reputable SEO sites out there to at least ask advice in forums and get decent feedback