Eyetracking and research have studied how people look at websites. Here are 10 useful findings you can use.
1. Top left corner gets the attention first
When users land on your site, their eye path starts from the upper left corner, and moves on from there. According to this eyetracking study these areas get the most attention:
Similar findings came from a study by Yahoo. Check your site and see what you have in these zones. Move the value proposition to the top left zone. Yes, there can be exceptions, but use this as a starting point and test from there.
Are you familiar with the Gutenberg diagram? It describes a general pattern the eyes move through when looking at (usually text-heavy) content. It fits this zoning conclusion pretty well, with the exception of the bottom right area.
The fourth, bottom right terminal area is where you should place your call to action. Note that this is not some universal truth, but a good starting point.
Designers can download a useful Gutenberg Diagram PSD overlay here.
2. People read in F-patterns
Most people don’t read, but scan. A 2008 study concluded that on average only 28% of the text is read.
This is why you want your value proposition in the top and why your menu should be either top horizontal or on the left, vertical.
How to design for F-patterns? Read here.
A similar study called this the golden triangle.
3. Use visibly bigger introductory paragraphs for improved attention
Make introductory paragraphs in boldface or larger font size. When the test subjects encountered a story with a boldface introductory paragraph, 95 percent of them viewed all or part of it.
Every SmashingMagazine article starts with an intro paragraph:
Keep the paragraph line lengths short and in a single column – that’s how people are used to reading text.
4. People won’t look past the first search results
If you’re not in the top 2 or 3 in Google for a keyword, you’re losing out. In an eyetracking study by Google most users found what they were looking for among the first two results and they never needed to go further down the page.
As it’s increasingly harder to get the top spots, using long tail keyword strategy is very important.
5. People do scroll, but put most important content above the fold
Web users know how to scroll look below the fold, but not nearly as much as they look above the fold. Make sure the above the fold part contains your value proposition, but don’t try to squeeze everything in there.
Wiltshire Farm Foods gives a hint in the bottom right corner:
Interestingly several studies point that the very bottom of a page also gets a lot of attention. That’s a good place for a call to action.
6. Left side of the page gets more attention that the right
With some exceptions, people read from left to right. This is also why the left side of your web page gets more attention.
Web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. A conventional layout is thus more likely to make sites profitable.
Amazon is known for their left side menu:
If you have a vertical menu, put it on the left. Navigation placed at the top of a homepage however performs best (seen by the highest percentage of test subjects and looked at for the longest duration).
7. Use high quality, large images
Use large, crisp images – recommends usability guru Jakob Nielsen based on his eyetracking studies. Image quality is a significant factor in drawing attention. People in pictures facing forward is more inviting and approachable.
Highrise features huge photos of customers, looking at you:
Fuzzy, small images are less inviting as are big glamor shots. Nielsen said the eye-tracking study also surfaced a counter-intuitive finding–people who look like models are less likely to draw attention than ‘normal’ people.
“A call center ad with model in it on the phone may be a good picture technically, but it will more likely be ignored,” Nielsen said. Images appearing unneeded, at least peripherally, will be tuned out. Avoid cheesy stock photos.
8. Need to show pictures of smartphones? Stick with Apple products
A study by EyeTrackshop that recorded consumers looking at groups of smartphones and tablets discovered that Apple’s iPhone 4S and iPad 2 drew more glances and held people’s attention longer than Google Android devices from Amazon, HTC, Motorola and Samsung.
The iPhone commanded the greatest amount of attention — 2.3 seconds, on average — in its group. Among tablets, the iPad tied with the Amazon Kindle Fire for the lead, at 2.4 seconds each.
9. Dominant headlines draw the eye
An eyetracking study observed that big headlines most often draw the eye first upon entering the page – especially when they are in the upper left corner.
Rekko greets you with a dominant headline:
When you list a bunch of headlines on a page, most often it’s the left sides of the headlines that get the attention. People typically scan down a list of headlines, and often don’t view entire headlines. If the first words engage them, they seem likely to read on.
On average, a headline has less than a second of a site visitor’s attention. This means that the first couple of words of the headline need to be real attention-grabbers if you want to draw attention.
10. First impressions take less than a second
When viewing a website, it takes users less than two-tenths of a second to form a first impression, according to an eye-tracking research conducted at Missouri University of Science and Technology.
Researchers found that their subjects spent about 2.6 seconds scanning a website before focusing on a particular section. They spent an average of 180 milliseconds focusing, or “fixating,” on one particular section before moving on.
The website sections that drew the most interest from viewers were as follows:
- The institution’s logo. Users spent about 6.48 seconds focused on this area before moving on.
- The main navigation menu. Almost as popular as the logo, subjects spent an average of 6.44 seconds viewing the menu.
- The search box, where users focused for just over 6 seconds.
- Social networking links to sites such as Facebook and Twitter. Users spent about 5.95 seconds viewing these areas.
- The site’s main image, where users’ eyes fixated for an average of 5.94 seconds.
- The site’s written content, where users spent about 5.59 seconds.
- The bottom of a website, where users spent about 5.25 seconds.
Do you know of any other useful findings? Post them in the comments!