{"id":69,"date":"2016-03-16T06:53:39","date_gmt":"2016-03-16T06:53:39","guid":{"rendered":"http:\/\/eidersuso.net\/design\/?p=69"},"modified":"2020-12-04T00:58:06","modified_gmt":"2020-12-04T00:58:06","slug":"eye-tracking","status":"publish","type":"post","link":"http:\/\/eidersuso.net\/design\/2016\/03\/16\/eye-tracking\/","title":{"rendered":"Eye-tracking"},"content":{"rendered":"

Eye-tracking studies have some findings that can help you when designing a website. Here.<\/a><\/p>\n

Takeaway #1: Put your most valuable content above the fold<\/p>\n

Not surprisingly, above-fold-content is looked at the most. This is where your most important content should go.<\/p>\n

\"eye<\/p>\n

Even though it\u2019s the most important<\/a> real estate on your page, this doesn\u2019t mean you should neglect the rest of your space. Cramming everything above the fold can completely destroy the usability of an otherwise functional website.<\/p>\n

You have only\u00a08 seconds to grab your visitors\u2019 attention<\/a>, so make sure you are placing enticing information above your fold. When doing this, be careful: don\u2019t try to make your sell above the fold cluttered by cramming in tons of calls to action.<\/p>\n

Work on making your messaging and copy appealing. That\u2019s what will encourage people to read more and potentially purchase from you.<\/p>\n

For example, I just ran an A\/B test on my new design of NeilPatel.com<\/a> and found that placing a call to action above the fold decreased conversions by 21%.<\/p>\n

Takeaway #2: Put calls to action at the bottom of the page<\/h3>\n

Although the top of the page is the most-viewed portion of the page, the bottom is the second-most viewed portion of the page. People do <\/i>scroll down. When they do, they go straight to the bottom of the page, where the scrolling stops. That\u2019s where you want to hit them with your call to action.<\/p>\n

I use calls to action at several points on my site. I recommend you do the same.<\/p>\n

\"eye<\/p>\n

If you look at the Crazy Egg heatmap<\/a>, you\u2019ll notice that the call to action that\u2019s located towards the bottom of my Quick Sprout membership page<\/a> gets a large portion of clicks. It actually gets 39% more clicks than the call to action button in the middle of the membership page.<\/p>\n

Takeaway #3: People read big, bold headlines<\/h3>\n

The bigger and more obtrusive your headlines are, the more people are likely to read them.\u00a0Various studies<\/a>, including the popular\u00a0F-shaped pattern<\/a>\u00a0study, demonstrated\u00a0that headline size is important.<\/p>\n

\"eye<\/p>\n

A significant study on this subject from The Poynter Institute<\/a>\u00a0concluded, \u201cDominant headlines most often draw the eye first upon entering the page.\u201d<\/p>\n

I\u2019ve previously discussed the importance of headlines<\/a>\u00a0and how to write them<\/a>. But in addition to the readable sizzle, a headline should also have dominant design elements \u2014 big and bold.<\/p>\n

I sometimes use some sweet visual panache for my headlines:<\/p>\n

\"eye<\/p>\n

More often than not, I just use a big typeface:<\/p>\n

\"quicksprout<\/p>\n

Takeaway #4: Chunks of information are best<\/h3>\n

You\u2019ve probably heard that you should break up your content into short paragraphs, provide headings, use bullets, and create numbered lists.<\/p>\n

The reason for this is intuitive. We can\u2019t easily absorb massive blocks of text.<\/p>\n

An eye tracking heatmap<\/a> shows the gaze duration on a page, pointing out the need for digestible chunks of information.<\/p>\n

\"eye<\/p>\n

Evidently, people look at chunks. This page isn\u2019t necessarily a great example of a successful layout design. It does, however, illustrate the idea that people look at the headings with strong visual elements \u2014 central positioning, strong colors, and well-thought-out spatial organization.<\/p>\n

Takeaway #5: You need a lot of white space<\/h3>\n

White space, otherwise known as negative space, is an important part of web design. The evidence from eye tracking studies confirms this:<\/p>\n

\"eye<\/p>\n

In the examples above, you can see that the more expansive layout with negative space encourages clean movement and better intake of the data.<\/p>\n

Negative space seems <\/i>wasted. Why not put <\/i>something there, right?<\/i> In reality, negative space is valuable because it facilitates movement through the rest of the page. The human eye wants a place to \u201crest,\u201d as it were, from the various components of the page. The eye also needs to know where to go next.<\/p>\n

Negative space provides a way for this to happen.<\/p>\n

Takeaway #6: The left side of your page is important<\/h3>\n

Eye tracking studies indicate<\/a> that users spend most of their time with their eyes on the left half of the page<\/a>.<\/p>\n

\"eye<\/p>\n

Many written languages use a left-to-right reading pattern. In web design conventions and reading habits, this viewing pattern has become ingrained. We tend to look left.<\/p>\n

When designing pages or positioning content, maximize the left side of the page by placing important elements there.<\/p>\n

Takeaway #7: Get rid of banners<\/h3>\n

People ignore web banners. This decline in attention to banners began right around the time when banner ads were at their heyday.<\/p>\n

Banner ads started out fairly innocuous. They were just ads. Then they started vibrating to get your attention. Or they looked like a system error. Or they told you that you were the millionth visitor to a website and would therefore receive your own gold Ferrari\u2026.<\/p>\n

Click on the ad!?<\/i> Yeah, right.<\/p>\n

Dubbed \u201cbanner blindness,\u201d this was one of the first and most talked about usability phenomena in the early days of eye tracking studies. Jakob Nielsen started uncovering this data in 1997.<\/p>\n

Banner blindness is now accepted Internet wisdom and usability common sense. It\u2019s such an important feature that it has its own Wikipedia article<\/a>. And if you don\u2019t believe me when I say people ignore banners, just look at the eye tracking study below.<\/p>\n

\"eye<\/p>\n

Unless you have no other way to monetize your site, you shouldn\u2019t use banners.<\/p>\n

Takeaway #8: Pictures of people are good<\/h3>\n

From LinkedIn studies<\/a> to other usability studies<\/a>, the experts agree: pictures of people are good. Looking at someone else, even in a photo, prompts \u2013 usually \u2013 a positive physiological reaction of attraction, understanding, or identification.<\/p>\n

A page that has pictures of a person\u2019s face encourages interaction and viewing and decreases a bounce rate.<\/p>\n

There are at least four takeaways from the eye tracking studies on this subject:<\/p>\n