eyetracking
Boost Conversions With Better Product Page Images
One of the most effective — and overlooked — ways to differentiate yourself from the competition and improve conversion is to optimize the images on your website.
Granted, a rose by any other name would smell as sweet, but online, your customers don’t quite have the luxury of taste, touch, or smell. So one thing we can learn from ProFlowers.com’s impressive conversion rate last month is that images matter. A lot.
But what works for one website may not work for yours. Oftentimes, the product (or service) itself dictates which strategy is most effective. For instance, if you’re selling jackets, you may want to give visitors multiple views and zoom features.
It all depends on what you’re selling and how much the customer needs to see in order to feel confident to buy.
At last month’s eMetrics Summit in San Francisco, Bryan had a chance to sit down with WilsonWeb.com’s Ralph Wilson to discuss the importance of product images and how they affect conversion. Here’s the video…
As Bryan mentions in the video, even a better looking pear can boost conversion 147%. But the power of images isn’t limited to e-commerce. When images on a B2B site don’t focus the visitor’s attention on the goal at hand, even a pretty face can push visitors away.
That’s why A/B split-testing is essential; it’s how you know the images are making a difference.
For more ideas on how you can test your way to a better conversion rate, we cordially invite you to join us on Wednesday, July 9th for our free “Always Be Testing” webinar, co-hosted by FutureNow and Google Website Optimizer.
. .
Editor’s Note: Don’t keep this all to yourself. Help spread the word on Facebook…
Related Posts:
Written by:Robert Gorell
Below the Fold, Size Doesn’t Matter
The ClickTale Blog has some valuable insight regarding page length and visitor interaction.
According to ClickTale, total page length is not a strong factor in terms of how many people will scroll below the fold or reach the bottom of page.
- The average location for the fold is between 430 and 860 pixels down on the page.
- 76% of people will scroll below the fold.
- 15-22% of people will reach the bottom of the page.
- 64-68% of people will reach the halfway point of a page.
- 91% of pages are long enough to require scrolling.
This makes me wonder whether the same groups of people make it to the bottom of the page, regardless of where their web surfing takes them. This appears to relate to how different personality types interact with the web. Each type prefers to navigate in their own way, and particular groups, like Methodicals and Humanistics, are more deliberate in their information gathering and decision-making. These types make it to the bottom of the page far more often than their Spontaneous and Competitive cohorts, who demand instant relevance or they’re gone.
As the ClickTale article suggests, people are scanning and skimming a page’s content regardless of its size. Web developers should back away from trying to squeeze content toward the top of a page in order to supposedly make it easy to scan. Using proper amounts of white space, headers and sub-headers, along with bolded text and bullet points increases a page’s scannability for all personality types.
But keep in mind, shorter pages did perform slightly better. “Almost identical percentages of page views (15%-20%) reach the page bottom regardless of page height.” While the data was fairly similar regardless of the page length, shorter pages were closer to the 20% range.*
When it comes to critical elements, like calls to action, you don’t want 5% of visitors not seeing it. Pages have more power when they stick to one main idea per page. And remember, copy should be long enough to cover the essentials but short enough to be interesting. A site will generally get better search rankings by having highly relevant links from page-to-page. So, there are advantages to leaning toward shorter pages, but don’t sacrifice clear page design and layout to squeeze a few pixels off of a page’s length.
Bottom line: If you have good, well-formated web copy, they will scroll.
[*Note to Direct Marketers: Your ridiculously long, heavy-handed sales pages might be overkill.]
Related Posts:
Written by:Ronald Patiro
How A Pretty Face Can Push Visitors Away
It’s no surprise that marketers use faces to draw people into their websites. They know that, from birth, humans are naturally attracted to, and engaged by, faces. In fact, one of our studies showed that people perceived websites as more “professional” when they had images of people on the site.
Be careful! Simply picking a “pretty” picture isn’t enough. Too often marketers will take people pictures and show them to a focus group to see which ones they relate to best. As marketers, we worry about the gender, style and overall quality of the picture relating to our message. There’s another crucial factor for marketers to consider: The direction in which the model’s eyes are facing.
Generally, it’s best when the model faces the content you want visitors to engage with first.
Take a look at the landing page below (I’ve blurred the text to protect the guilty innocent):
What happens is that you are naturally drawn to the image of the attractive model and our eyes tend to meet. Since her eyes are focused back at you, they stop you in your tracks — and researchers can prove it by studying your eyetracking gaze.
Take a look at the following ads that our friends at Bunnyfoot analyzed in eyetracking studies:
Now take a look at the Heatmap of the ads:
Next time you choose a face to appear on the web or in an ad, consider where it draws the beholder’s eyes. Ask yourself whether the image draws attention away from your persuasive message.
P.S. This is for my friends who like to test everything. I have a couple of questions: When testing pictures, do you currently break down the variables in the image? If so, were you aware of using the directional focus of a model’s eyes as a variable?
Related Posts:
Written by:Bryan Eisenberg
Revenge of the Pixels: The Battle for Screen Real Estate
Designing web pages is challenging. Unlike almost any other media, a web design’s integrity is compromised by the nature of a fluid medium. In other words, just because you want something to look a certain way doesn’t guarantee it will — differing browsers, resolutions, screen sizes, monitor calibrations and operating systems all distort the experience.
The one good habit I’ve picked up over the years: learn to compromise. Compromise, however, should be done intelligently and accountably.
One of the more contentious issues in web design presents itself when deciding where specific elements should go and how much space they should occupy. This is especially true in cases where politics (read: Who’s the most important person in the room?) rules. In print, such as in catalogs, they often look to cost and revenue per square inch. We’ll do something similar.
A popular technique we’ve developed over the years for removing politics from these important decisions is the Battleship Grid. The Battleship Grid is where you divide a page into a grid of horizontal and vertical lines of approximately equal size. (I’ll explain why it’s approximate shortly.) The main purpose for using this tool is to spark conversation. Click on the thumbnail image to see an example for a page from Dell.com.
How does the Battleship Grid work?
Let’s say you’re reviewing a page at 1024 x 768 resolution. Using Photoshop or an equivalent graphics program (or have your designer do this for you), work across the page, draw vertical lines up and down the screen. Create 10 rows, labeled “A” to “J”. Then, start drawing horizontal lines across the page. The first horizontal line is right underneath the top navigation. (Do this because your visitors are already subconsciously focusing on the center area, or “active window”. This is why I said “approximately equal size” above). After creating this line, add lines every 10 pixels, labeling them “1″ to “8″.
In Photoshop, add a layer where you can overlay the grid with different colors at 30% opacity (just enough so that they are visible and you can see the elements behind them on the page). Next, begin to assign values to the different areas of the grid. The values assigned to each of the shaded regions aren’t absolute; they’re relative values, and should be considered rough guidelines. You can follow what I set out in my example. I came up with these values, for the sake of simplicity, based on certain eyetracking, design composition, and vision physiology guidelines.
The area I assign the highest “value” to is the “active window” (see thumbnail). As Jakob Nielsen pointed out as early as January of 2000, “For almost seven years, my studies have shown the same user behavior: users look straight at the content and ignore the navigation areas when they scan a new page.”
Every eyetracking study in which I’ve participated has shown the exact same visitor behavior. It’s also important to understand human physiology and how the eyes view a page. Any artist who’s studied composition knows the “Rule of Thirds“. It’s a good guideline for understanding how people’s eyes naturally take in what they see, so you know where to place things yow wish to draw attention to naturally.
This, by the way, is why it’s so important to test your headlines; it’s usually the one thing virtually everyone sees on your page. Make it count.
How do you use the Battleship Grid?
Take a screenshot of the page in question at a 1024 x 768 resolution. Overlay this grid on top of it. Then, work with your team to agree to the values assigned to differing zones. Review elements in the high-value real estate zones. This is all about deconstructing size, design, and placement of elements for maximum impact.
For each design element, ask yourself:
- How much space does it occupy? Should it take more or less?
- What calls to actions are there? Are they obvious?
- Can it hold its own weight? Should some elements be moved to maximize effectiveness?
- Do the visual elements attract the different personality types?
- (You can also gray out anything customer’s don’t actually care about and ask these questions again.)
Now, take another look at the Dell.com Battleship Grid. What are your observations of the design? Are they under-utilizing any areas?
Limitations: Please be careful with this tool. It’s not meant to be scientific. It’s much better than the absence of not designing with any accountability. Depending on your design, you can skew how visitors engage with the site by using:
- strong, contrasting colors — You may have a form you want filled out in the right-hand column with, say, a monochromatic design, or one with minimal color compared to the rest of the design. If so, try placing a color-shaded background behind the form to make it stand out.
- a powerful image or by image placement — Most eyetracking heatmaps show that visitors spend virtually no time looking at loosely framed “lifestyle” images (e.g., a picture of executives shaking hands over a conference table). On the other hand, having a single closeup image of someone’s face can draw a lot of attention — especially when it’s above the fold. Keep in mind, if you use this technique, the person in the image should have their eyes facing the action — or content — you want them to focus on. Never have the subject looking straight at the visitor. It will distract them.
- different column widths — The active window for people who read left-to-right begins just beyond where the left-hand column ends. If there is no left-hand navigation, make sure to have enough empty “buffer” space from the browser for visitors’ eyes to settle.
- bigger text for headlines and larger-sized versions for key visual elements — Make sure the copy is formatted for people to scan and skim. Have headlines and sub-headers that stand out next to the body text.
Warning: It’s not advisable to yell at a colleague that you sank their battleship when minimizing or removing one of their preferred elements. 
Related Posts:
Written by:Bryan Eisenberg
“Eyetracking, Heatmaps & Gaze Plots!” Oh My…
All you heatmap lovers out there, Uncle Jakob (Nielsen) has a great new post for you. Today’s Alertbox features a topic near and dear to the Grok’s heart: the overuse of fancy words in Web copy.
These “dollar words” are truly excellent… at going over your audiences’ heads while keeping them from accomplishing their goals by taking the actions you’ve set out for them. Anyone who’s taken our Persuasive Online Copywriting course would agree; Jakob is singing our tune in his discussion of a usability test he did on the U.S. Census Bureau website:
Beyond banner blindness, the major reason this homepage failed is that it used made-up terms or branded descriptions rather than plain-spoken words. Terms like “Population Clock,” “Population Finder,” and “QuickFacts” are not as descriptive as a simple line of text that says:
Current population of the United States: 302,740,627
Once Jakob goes beyond the heatmap, things really get interesting. He uses gaze plots (click thumbnail for image) to describe 4 main classes of behavior — “search-dominant,” “navigation-dominant,” “tool-dominant,” and “successful” — and gives insightful descriptions for each. If one were so inclined to look at the same observed behavior through the lens of the personality types or the Myers-Briggs Type Indicator, they’d see beyond the how people clicked, and into the why they clicked. It’s how they’re wired, naturally, according to their preference, or type.
A: The Competitive type — what Jakob observed as “search-dominant user” in this study; Using the MBTI lens we’d shorten their preference to operating in “NT” (iNtuitive/Thinking) mode- working at a fast pace, with a logical bias. The Competitive quickly scans and skims everything, looking for a clue as to how to solve the puzzle. Neither Active Window [define] content nor navigation seemed to be the path of least resistance. (Notice: Competitive type didn’t even look in the right-hand column; they’ve been trained to ignore it.)
The right and left vertical lines clearly illustrate the Active Window, where a Competitive is most likely to spend time. (The same goes for all types, but the Competitive does this more often.) Once this person struck out with copy in the Active Window, they aimed for navigation and, after quickly striking out there, went to search.
As a footnote, Jakob adds, this “user” (don’t get me started) mentioned the ability to search faster for the answer… at Google.
B: The Methodical type — Jakob’s “navigation-dominant user”; “SJ” (Sensing/Judging) on the MBTI — behaves with a logical bias similar to Competitives, but with a far more deliberate pace. You know the Methodicals in your audience. They’re not easily satiated by the answers you give them. They want more. No detail’s too small. They want it all. The good news from a marketing communications perspective is they’re willing to give you their time — provided you’re willing to give them relevant content.
The Methodical approach was to look everywhere; Active Window, left navigation, right-hand column (where the answer was actually sitting, cloaked in techno-babble and jargon), above the fold, below. You name it, they saw it. They just didn’t find anything that seemed like the answer until, finally, navigation appeared “most promising”.
C: The Spontaneous type — Jakob’s “tool-dominant user”; “SP” (Sensing/Perceiving) on the MBTI; — behaves at a fast pace, with an emotional bias. They’re highly experiential by nature. (Notice how Jakob describes this type as people who “like parts of websites where they can do something”.)
The Spontaneous visitor clicked around briefly, mainly focusing on the interactive features, before most likely leaving in failure. The gaze went everywhere, without focus, until a single feature grabbed their attention — that is, until another rabbit hole appeared (on another website) that was more entertaining.
D: The Humanistic type — Jakob’s “successful user”; “NF” (iNtuitive/Feeling) on the MBTI; — behaves at a slightly less deliberate pace than the Methodical, but with an emotional bias. Testimonials were created for this type. Show them how you’ve treated other people like them, and you’ll gain their confidence.
My assumption that Plot D represents the Humanistic is based on a few observations and is a shining example of the value of optimizing your experience based on a plan, rather than some out-of-the-box analytics package or testing platform. Had we planned this experience using a customer-centric methodology like Persuasion Architecture™ [define], we would have a context in which to view this gaze; to know how far off the execution was from what we’d originally planned. That would give us an actionable approach to making website improvements.
With Plot D, I see someone who’s spent more time than the other visitors — except, of course, for the Methodical — not just scanning and skimming, but actually connecting. I also see someone whose gaze fell oddly on the right-hand column; a behavior we typically see when people are capable of scrolling with their mouse without actually looking at the gutter to find the down arrow. They intuitively know the scroll bar is there.
Each of these experiences could have been planned better to achieve the task at hand, but that’s a post for a different day. For now, simply consider that people are wired to behave according to different preferences, their behavior fueled by their own momentum.
For you to achieve your goals, your audience must first achieve theirs. That means presenting what they want, when and where they want it — even if you have to make a single product page speak to 4 different “types” of people. But that’s the beauty of the medium. Online, it’s far easier to measure and improve your plan dramatically over time.
(Author’s Note: Anyone think my headline would’ve been better if it were “What People Do on Your Site and Why”? Now do you see the power of plain-spoken language?)
[Editor’s Note: Here’s more on persuasive copywriting by personality type and how to make your site reader-friendly. Enjoy!]
Related Posts:
Written by:Howard Kaplan
Do Men and Women Process Images Differently?
…yes and no, some conflicting studies say. In this now famous eye-tracking study, researchers found men and women focused on slightly different, er, body parts.
But now antother study has come out, saying men and women both look at faces and, um, other body parts.
So what’s really going on? I think the second study points out two interesting things:
- Women’s focus changed depending on their hormone level
- Women spent more time than men focusing on couples that were “intertwined”, if you know what I mean
I’ve started studying how men and women process images. One of my theories is that women are more interested in images with more than one person. They are intrigued by the relationship between the people in the image. I’m still researching, so don’t know if it’s true, but it’s a hunch.
I ran across a blog post Alex Harris did in 2004 talking about some testing Netflix was doing on their home page. Go check out the two examples: One is an image of a couple enjoying a movie, the other contains images of hit movies.
Now, I don’t know if this is really a male vs. female thing. It could be a Humanistic vs. Spontaneous-type thing. Humanistics are very relationship-focused. Spending time with a loved one may be more important than watching the movie. Spontaneous folks love action and adventure. They may prefer the actual act of watching the movie and not be that concerned with who they are watching it with.
But I wonder how these images would test if broken down by gender. Would women prefer the “relationship” image of the man and woman on the couch with the popcorn and wine? Would men prefer the “hit movie titles” image?
What do you think? Any preferences? Ladies? Gents?
Related Posts:
Written by:Holly Buchanan
The Web’s Old Wives Tale: People Don’t Read Online
Web developers like to say it. Designers love to say it. Web execs feel good saying it to justify investing as little as possible–and in the lowest quality content they can get away with.
People Don’t Read Online? Bull-crap!
If only I had a nickel for every time I’ve heard that statement, I’d make Bill Gates look like a pauper. Think about it. What’s the first thing most people do when they get online… read their email. What’s better yet, new research from the Poynter Institute’s Eyetrack study released at the American Society of Newspaper Editors (courtesy Editor and Publisher) shows that:
When readers chose to read an online story, they usually read an average of 77% of the story, compared to 62% in broadsheets and 57% in tabloids…
In addition, nearly two-thirds of online readers read all of the text of a particular story once they began to read it, the survey revealed. In print, 68% of tabloid readers continued reading a specific story through the jump to another page, while 59% did so in broadsheet reading.
The research also found that 75% of print readers are methodical in their reading, which means they start reading a page at a particular story and work their way through each story. Just 25% of print readers are scanners, who scan the entire page first, then choose a story to read.
Online, however, about half of readers are methodical, while the other half scan, the report found. The survey also revealed that large headlines and fewer, large photos attracted more eyes than smaller images in print. But online, readers were drawn more to navigation bars and teasers.
We knew it all along. We’ve been saying it for years since our clients’ web analytics proved it to us. Now you have the proof we can share. Give your readers something relevant to read and they will. Or are you still buying into that old wives tale that people don’t read online?
Related Posts:
Written by:Bryan Eisenberg
