Mar 14, 2021
How People View Websites
Eyetracking and research have studied how people look at websites.
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 a Poynter study, these areas get the most attention:
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.
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.
Eyetracking visualizations show that users often read website content in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
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 Google study called this the golden triangle.
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 a quick summary:
Keep the paragraph line lengths short and in a single column — that’s how people are used to reading text.
The font that you use doesn’t really matter. Oh, and people like links — the number of clicks on the links goes up as you add more links.
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 eye-tracking 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.
Left side of the page gets more attention than the right
With some exceptions, people read from left to right. This is also why the left side of your webpage 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.
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), but it comes with a size limitation (can only fit so many items).
Use high quality, large images
Use large, crisp images — recommends usability guru Jakob Nielsen based on his eyetracking studies. The same is confirmed by neuromarketing 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.
Dominant headlines draw the eye
Big headlines most often draw the eye first upon entering the page — especially when they are in the upper left corner.
Present a whole value proposition with the headline. Keep in mind that clarity trumps persuasion.
Visage 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.
E-commerce Product Page Study: Value Perceptions and Image size
There are tons of details that come together to build a product page (e.g. price, product image, product description). The visual perception of a product page creates the user’s value perception of that product.
Here, we present part one of this three-part study series exploring ecommerce product page design.
Part one looks at how, across different types of products, value perception is affected by product image size on a product page.
Study Report — Part 1/3: Image Size & Value Perception
Hypothesis: Large product images on product pages result in a higher perceived value compared to smaller product images on the same page. In other words, people will perceive a product to be more expensive/valuable when its display picture is large.
In order to capture the effect of product image size across product categories, a product from each end of the ‘experience-search’ classification was tested.
The study treatments included a dress shirt product page replicated on three websites, varying in design characteristics and price point. A hard drive product page was also replicated on three websites with the same variations. These two products were chosen to represent goods located on the extremes of the ‘experience-search’ classification spectrum. The dress shirt represents an experience good while the hard drive represents a search good.
For the dress shirt, product image and brand logo remained consistent across all three treatments and acted as control variables. The size of the product image acted as the treatment variable and varied across the three websites. Any prices and indications of price were removed from the pages.
Each treatment (n = 8; 6 shirt & 2 hard drive) were sent to around 300 people (specific numbers below). We asked two pricing questions:
At what price is this product a bargain?
At what price is this product too expensive to consider?
These questions are a modified version of the Van Westendorp Price Sensitivity Meter.
For all surveys, our audience was limited to a United States general population, and participants were limited to only one treatment, resulting in 2,982 total participants. Here are the numbers per treatment:
Participants for each format treatment
Participants for each format treatment
Shirt (a) Variation
Variation one: This website was the original source, except we either enlarged or reduced the shirt image size for the treatment variations. The original price of this shirt was $145.
Original shirt variation
Shirt (a) Statistics
Shirt (a) Results Summary
The smaller image actually produced a higher perceived value, significantly so for the ‘bargain’ question in a t-test (p-value = 0.012) and nearly so for the ‘too expensive’ question (p-value = 0.117).
It’s likely that with additional responses, the ‘too expensive’ question would’ve produced significant results as well. As of now for this ‘too expensive’ question, there’s 94.1% certainty that the smaller shirt image has a higher perceived value (smaller shirt mean > larger shirt, p-value = 0.0587).
Not only does this make us reject our hypothesis, it flips it. We now have evidence that a smaller image can not just change but increase value perception (at least for a men’s dress shirt, a clear ‘experience’ product).
An alternative hypothesis that we now want to test is whether the effects of simplicity and more whitespace increase value perception more than a large product image can.
This is why we tested the two additional shirt variations below, both had ‘busier’ displays.
(As a teaser, see results from Study 2 which provide additional data on this pattern and differences in visual perception between experience and search goods.)
Shirt (b) Variation
Variation two: Here we’ve modified a Macy’s product page which is generally a busier design (e.g. core colors, text, elements, etc.) than variation one. The price of the shirt originally shown on this page was $52.50.
shirt2
Shirt (b) Statisics
Shirt (b) Results Summary
There were no significant results between image sizes for either question. However, the pattern of lower value perception for a larger product image exists.
Although not significant at the 0.05 level, there’s a 78.5% chance that the means between the small and large product images are different for the ‘bargain’ question.
Shirt © Variation
Variation three: The last variation is a modified version of an Amtify shirt product page. The price of the shirt originally shown on this page was $29.90.
shirt3
Shirt © Statistics
Shirt © Results Summary
Again, there were no significant results among the image sizes for either question. However, the pattern of reduced value perception for a larger product image does exist.
However, this one is closer to significance than the Macy’s variation. There’s an 83% chance that the ‘bargain’ question resulted in different means between the image sizes, and a 91.5% chance that the small image mean is greater than the large image.
This result shows a stronger pattern compared to the Macy’s variation. This product page is visually less complex than the Macy’s page, which is a theory on why this result is stronger than the Macy’s variation but weaker than variation one’s simple design.
So, what about search goods?
Hard Drive Variation
We modified the product page here.
harddrive
Hard Drive Statistics
Remember, our hypothesis was that the larger image would translate to a higher perceived value and that the ‘experience’ type of product (shirt) would show a larger difference among image sizes compared with the ‘search’ type of product (hard drive).
harddrive_stats
Hard Drive Results Summary
This ‘search’ or ‘spec’ product category confirms our hypothesis that a larger product image will increase value perception. And it did so with pretty large numbers, especially compared to the shirt variations.
When asked “at what price is this hard drive a bargain?”, respondents perceived the product page containing the larger image to be 11$ more valuable than the hard drive product page with the smaller image.
When asked “at what price is this hard drive too expensive?”, respondents were willing to pay $15 more for the hard drive with the larger product image.
The difference between perceived value in the ‘bargain’ question was significant (p-value = 0.039), and the difference in the ‘expensive’ question was nearly so (p-value = 0.053). Pretty strong results here.
Study Report — Parts 2 and 3/3:
Make sure to check out Study 2 and Study 3 in this 3-part series. Study 2 is especially interesting considering these results, as it considers users’ visual perceptions of different image sizes.
Cognitive Fluency
Cognitive fluency is the human tendency to prefer things that are familiar and easy to understand. Our brain prefers to think about things that are easy to think about. For marketers this means that the easier to understand your offer is, the more likely people are to buy it.
Psychologists have determined, for example, that shares in companies with easy-to-pronounce names do indeed significantly outperform those with hard-to-pronounce names. Coincidence? Nope.
Why people prefer unlimited plans
Understanding and comparing different cell phone plans is a pain and takes too much time. Who wants to spend minutes comparing monthly minutes and text-message limits? So what do people do? They go with the unlimited plan. It’s often not the best value, but it’s easy to understand.
Cell phone companies make the most money from unlimited plans, and they have an extra incentive to make other plans confusing. Plans with a fixed amount of minutes charge high fees for going over your allotted minutes — it’s designed to cause you enough pain that you will switch to a plan with a higher regular fee.
Suggestion: make your offer and pricing as easy to understand as possible.
Hard to read, hard to buy
Make your website easy to read.
When people read something in a difficult-to-read font, they transfer that sense of difficulty onto the topic they’re reading about.
Norbert Schwarz, a leading fluency researcher, and his former student Hyunjin Song have found that when people read about an exercise regimen or a recipe in a less legible font, they tend to rate the exercise regimen more difficult and the recipe more complicated than if they read about them in a clearer font.
The same goes for products and purchases. Nathan Novemsky and his colleagues did a study on this called Preference Fluency in Choice. They manipulated the fluency of a product by listing its features in either an easy or hard to read font. Easy to read fonts doubled the number of people willing to purchase the product.
Previous positive experiences matter
Cognitive fluency also explains why you stick with brand and service providers you have used before, why you often order the same thing from the menu — it’s easy. You’ve tried it, it worked, and you don’t want to spend a bunch of time researching alternatives and risking a bad purchase.
As a marketer, this means it’s super important to get that first purchase from a customer. Make your first offer packed with value and as easy as possible to buy. Once they have their first positive buying experience, it’s much easier to get repeat purchases.
That is also why you prefer visiting sites where you instinctively know where everything is at, and you know what actions you’re supposed to take.
“Fluency guides our thinking in situations where we have no idea that it is at work, and it affects us in any situation where we weigh information.” — Uxmatters.com
Cognitive fluency stems from another area of behavior known as The Mere Exposure Effect, which basically states that the more times you’re exposed to a stimulus, the more you prefer it.
Again, the rules are the same online. The more “typical” your website layout, the easier it is for the brain to process it.
Bottom line: make everything as simple as possible.
