• The inventors of eyetracking heatmaps, experts in eyetracking analysis

Common Email Layouts: B2C Electronics Template

We test a lot of emails at Eyetools... newsletters, B2C, B2B, membership correspondence, etc.  One of the more common layouts we see used by large retailers is a print-advertisement style product layout.  In general, these templates never test particularly well.  We have been using one of these emails as our simple report example for a while now.   I thought the report content might be of interest to blog readers, so here it is.  If there are questions regarding the results, please let me know.

The PDF of this sample report can be downloaded here .

Note: This is a brand modified sample  The email was received through a Fortune500 retail company’s opt-in email list.  The branding was removed, but basic layout and graphical elements were retained.  The analysis has been kept simple, but shows the benefit of even a quick eye tracking study.

____________________________________________________

Eyetools Sample Email Report

Overview

Number of participants: 17
Demographic:  General
Average viewing time:  14.6 sec
Number of people who clicked:  1

Diagnosis

  • This email performed at a suboptimal level.  The majority of viewing was concentrated on the text of the top two sections (“24” and “CP Challenge”)

  • The layout of this email does not guide viewers eyes effectively through the entire email.  The most dramatic improvements in viewing would likely be seen if the layout of the main content area were restructured.

  • Improved copy in the top 33% of the page will improve read through in these sections and may increase scrolling behavior.  Copy improvements in the lower 66% of the page will have little or no effect on read through.

  • Critical Messaging

    The words and images highlighted in the red/yellow areas define the "window of opportunity" this email has to grab its readers. Everything outside of that "window" was not looked at by most people (and if they don't read it, they can't be affected by it ).

    If the critical message isn't being read or isn't clear, then focus initially on rewriting the areas with the highest concentrations of reading (the red, then orange, then yellow areas).

    Diagnosis

    The message read by most people (at least 60%) was:

  • Company Logo
  • “24 Days of HD… Instant… Last Chance”
  • “Are you ready … the CP challenge … with… 1/29”
  • “Watch”
  • The majority of viewers did not get a cohesive message which included a specific sales pitch or call to action.  If this page layout is maintained, improved copywriting is vital to improving read through in each of the top section of the page. 


    Did They Scroll?

    The red lines show where each person
    stopped scrolling. It is a myth that everything has to be above the fold, but data has shown that clutter and bad design will greatly reduce scrolling and visual hotspots below the fold.

    Diagnosis

    Most people are scrolling, which is good. This means that this email has the potential to do even better. 

    However, the 33% that stopped scrolling early in the email, did so before reaching the individual sale item listings.  The top 33% of this email is comprised of 4 major horizontal elements, each with a “banner ad” composition.  Viewers skimmed the ads, becoming less interested, and less patient at each subsequent section.  Much of this result is due to poor copywriting (See “Critical Messaging”). 

    In the page structure at the top of this email, viewing is helped by the fact that each section heading is aligned on approximately the same vertical axis.  However, as soon as the 3 column format is introduced, common viewing areas decrease dramatically.

    Improving the structure and copy in the top section of this email will likely result in increased scrolling by a larger percentage of viewers.


    Identifying Design vs. Text/Copy Problems

    The green and blue areas highlight those areas read by people who engaged the email more. Because the blue areas indicate where viewers read content quickly, the placement of important text becomes increasingly crucial, particularly in areas below the “fold ” (the yellow dotted line).

    Broadly speaking, if a critical area does not have a strong hotspot (orange/red) on it then The design is not guiding the users’ eyes effectively. If, however, a hotspot exists and users are starting to read the text but do not get to the critical messaging, then the area has a copy/text problem.

    Diagnosis

    Poor read through in the top section of this email is due to poor copy.  The heading are high contrast and catch the viewer as they scan the page.  However, the first 2-3 words or each headline are relatively uninformative (i.e. “Are you ready”, “Watch the”).

    A 3 or more column layout is generally suboptimal for viewing, especially in an email.  In this email 80% of participants ignored the right most product column completely.   When viewing this email, participants selected one of the 3 vertical columns and skimmed downward.  This proved problematic for sale items spanning 2 columns.
    In the lower page structure of this email, the product pictures most effectively caught the eye of participants.  The outlines around each product primarily disrupted visual flow by creating mini “banner ads”.   When viewers see many small distinct units, they are more apt to view one well, and skip several others (even along the same vertical or horizontal axis).

    The “Tax Center” section near the bottom of the email was most effective due to it’s large, informative header.  This element performed surprisingly well.


    User Feedback

    User feedback was not collected on this email because it was run only for sample purposes.

    Written by Teresa Hernandez

    Other articles written by Eyetools

    Examples

    Common Email Layouts B2C Electronics Template
    Eyetracking Circuit Citys Email Template
    Branding Effectiveness Sports Illustrated And Footaction
    Css Zen Garden An Eyetools Eyetracking Analysis
    Is The Washington Post Wasting Money On The Bottom Half Of Their Homepage
    The New Washington Post Homepage Design: An Eyetools Eyetracking Analysis
    Blog Analysis And Optimization With Eyetracking
    Eyetracking a Navigation Bar How Many Elements Are Read? Well, It Depends

    Basics of Eyetracking

    Understanding Eye Tracking, Part 1:  Misinterpreting Data
    Understanding Eye Tracking, Part 2:  What You Can Learn From Eyetracking Data
    Understanding Eye Tracking, Part 3:  What Is a Heatmap Really
    Understanding Eye Tracking, Part 4:  What Is a Scan Path
    Understanding Eye Tracking, Part 5:  Time And Heatmaps

    People can't click on what they don't see

    Small Decreases In Viewing Can Decrease The Probability Of Being Clicked By More Than 50 Percent
    Wasting Money On Content In Visual Dead Zones

    Success stories

    Eyetools Doubles Conversion Rate for Fortune 100 Client
    How Eyetracking Helps Website Redesigns: An Eyetools Case Study

    In the Press

    Yahoo Search Assist Uses Eyetools Eyetracking To Optimize Design Based On Eyes And Where People Look
    Eyetools In Wall Street Journal: Benefits Of Heatmap Testing For Ibm Ogilvy Cisco
    Eyetools In Adage About Ogilvy Using Our Eyetracking For Its Email Clients
    The 3rd kind of conversion problem: the most exciting one

    Eyetools eyetracking and SEO / SEM

    Eyetracking Google Search Results Eyetools Research: This One Should Help With Search Engine Optimization SEO/SEM Planning
    Eyetracking Google Checkout Button Does Not Increase Viewing Significantly But...
    Google Eyetracking Study Of Search Results On Sale
    Version 2 Google Golden Triangle Eyetracking Search Report