5 Easily Corrected Website Design Mistakes Revealed By Eye Tracking Studies

on
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 sellwithout 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 fasterwhen 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 asSmashing 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 readcopy 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 beingCracked.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?

Comments

Post a Comment