We all know that great web design and conversions go hand-in-hand, but just what connects the two?
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:
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?
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.
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!
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.
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:
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.
This data comes to us via researcher Giovanni Galfano and his studies on how we react to the gaze of others.
He discovered two very clear things about images…
This example from Chemistry.com may look familiar:
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:
Are you implementing directional cues into your design?
You should be.
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.
Thanks to awesome from Mary Dyson, we also finally have and answer on what to do:
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!
Now I want to hear from you:
Thanks for reading, and I’ll see you in the comments!