Email design. What are you looking at?

19 minute read

Components. allow you to create structure for your emails but how do you organise and display your content to maximum effect? When it comes to understanding what your email readers are looking at, eye tracking provides at least some of the answers.

Eye tracking

Back to the start – what is eye tracking?

JavalPerhaps better known for other things like the development of the first stereoscope, Paris born ophthalmologist Louis Emile Javal (1839-1907) also pioneered methods of tracking eye movement. Javal’s experiments reported that our eyes don’t make smooth continuous movements, instead making a series of rapid linear transits (he called them saccades) punctuated by short stops (fixations) on areas of interest. Although manual, inaccurate and considerably uncomfortable for the observer (requiring insertions or the adhesion of a needle to the surface of the eye), Javal’s work was the basis for much of modern eye tracking research. Ironically, at the age of 45 Javal began to lose his own vision from glaucoma, becoming totally blind by the age of 62.

Eye tracking today

Eye movementToday, eye movements can be accurately measured using PCCR (Pupil Centre Corneal Reflection) or similar techniques. A head mounted device or glasses (if the observer needs to be mobile for the purpose of the observation) or a device built directly into a computer screen directs an infrared light source the eye. As the name suggests, movements are picked up using reflection of the light source in relation to specific anatomical features of the eye. Movement is captured by a sensitive high frame rate camera (typically in the range of 50Hz to 120Hz) and calibrated against a normal axis and specific reference points in the object or content being observed. Real time software interprets the eye movements (saccades) as tracking paths and the intensity of the pauses (fixations) as coloured pixels in a ‘heat map’ contour. Other useful indicators like pupil dilation and blink frequency can also be measured. Completing the circle, these empirical observations are now also complimented by a purely theoretical cognitive framework on how we capture and process visual information.

The applications

There are lots of applications of eye tracking, from ergonomic design of instrumentation panels for cars and aircraft to how we scan supermarket shelves.

Eye tracking applications

Of obvious interest to us as marketers is the potential to use eye tracking to analyse the visual experience when confronted with a page (or a screen) of content – an email is a good example. The saccades show us which aspects of the content are seen, seen first and how we move from one area of content to another. The fixations (sometimes referred as gaze points) show us which areas of the content most hold our attention and conversely which are being missed or ignored. All of this has important implications for email design.

We know that emails are scanned relatively quickly. After opening, the average consumption for an email newsletter is around 50 seconds. We’re masters of scanning and skimming. Only around 35% of visible content is visually scanned, with only around 20% being actively read. Even then, as Javal himself noted, we still don’t read words (or even individual letters) in sequence, or sentences in their entirety before extracting meaning. We even jump from line to line in a complex visual dance.

What can eye tracking tell us?

The most widely reported finding is the ‘F-shape’. The F-shape is seen across eye tracking of all manner of content (both on- and off-line) but it’s especially evident in viewing search engine results and text rich online content like websites. It’s also commonly observed with email newsletters.

F-shape eye tracking

The ‘F’ refers to both the pattern of motion and the highest intensity of viewing. It starts with a strong top to bottom, left justified axis, punctuated by regular left to right horizontal strokes, each becoming shorter and less intense the further they are from the top and the left. The ‘arms’ of the F are the interruptions formed by headings, paragraph breaks and images or icons which serve to guide us inwards across the page. We use these as visual navigation cues to help us quickly find items of interest. Headings also serve to introduce ‘white space’ which as well as aiding navigation, provide rest points and prolong visual scanning time. Even so, for example with headings, we typically only read the first few words before moving downwards again.

It’s actually not quite that simple.

For web content at least, the vertical axis of the F-shape is typically located around 400 pixels from the extreme left hand edge of the visible content, and depending on the displayed content may also be shifted downwards from the very top – a phenomena known as ‘banner blindness’. This is where we routinely skip what is likely to be advertising or worthless introduction in search of the first real content value. Smart content producers will know about these effects and look to place their most valuable content accordingly. For longer, more content heavy emails like newsletters, left orientated headings, and the initial words of left justified text and images are therefore especially important in capturing and holding interest.

The Golden Triangle

Golden triangleMany report that the F-shape is actually a level of refinement on an earlier ‘golden triangle’, a concept which was observed in relation to early search engine results. In the golden triangle the top to bottom and left to right focus is still evident but the horizontal excursions less so. It also tails off more rapidly when vertically scrolling than the F-shape observation. It was the golden triangle which started the obsession with a top 3 ranking in search engine results.

Where does the F-shape come from?

The obvious explanation for the F-shape is that we (many of us) read from left to right, top to bottom. Our brains are wired to most rapidly consume written (possibly other visual content too) in this way. There’s evidence that left to right preference is not a learned process nor limited to humans – experiments show that primates, dogs and even baby chicks naturally process information in this direction. By the way, soldiers are apparently trained to scan a battlefield in the opposite, right to left direction. This is in order to disrupt their normal visual processing and hence enhance their perception of what dangers may lie ahead.

Why left to right?

The next level of explanation varies. Many modern language scripts derive from Latin origins, historically written from left to right, top to bottom. 90% of the world’s population are right handed and it’s thought that left to right writing was to enable scribes to hold a chisel in their right hand or possibly to stop their (right) writing hand from smudging the ink. It also applies to musical scores and other forms of written content.

Eye track chineseHowever, other early scripts and modern derivations like Chinese, Korean and Arabic flow from right to left or left-right-right-left on alternate lines, and in vertical columns, possibly to enable the unrolling of a paper scroll while writing. Interestingly, the F-shape is still noticeable on eye tracking studies of Chinese language content, although the horizontal axes are longer and less distinct. It’s thought that the need in these languages to process multiple symbols in order to extract meaning may be the cause.

Top to bottom

Many marketers will have learned the graphic design expression ‘above the fold’ from the days of printed direct mail advertising. This refers to when anything not immediately visible (typically on a 3-folded A3 sheet) was considered of limited worth.

Does it still apply in a digital world? Yes, in the sense that the intensity of the F-shape typically diminishes the further we move from the top. However, many studies show that this effect is not nearly so important in processing online content, or even that it is myth and has gone completely. It seems clear that vertical scrolling has become a new learned process. Eye tracking studies often show high intensity fixation around the scroll bar handle, typically located on the right hand side of the screen, well away from where readers would normally be looking. This indicates that we are anticipating the need and actively looking to scroll beyond what is immediately visible.

Depending on the height of the visible area, 2 or 3 screens of vertical scrolling is perfectly acceptable before boredom sets in. Around 20% of readers will continue to scroll right to the bottom of any content, and many of us are inherent end-skippers, jumping straight to the end conclusion first before returning to information earlier or higher up. Again, this has interesting implications for where we as email marketers put key content items. Despite a strong top-left visual bias, calls to action at the bottom of the message are often seen to be orders of magnitude more effective than those higher up. There are other factors in play but one explanation is that this places the call to action at the correct contextual position, once the journey and persuasiveness of the message has been fully developed.

Big and small

Eye track mobileIt may be a surprise, but many of the eye tracking results which are observed when observing the consumption of emails (and other content) on desktop screens are also the same for mobile devices.

Designing email for mobile devices definitely requires some important consideration (not least responsive reorganisation of originally desktop orientated content), but assuming the content is basically readable on mobile, the implication is that the size of the screen itself has little influence over how the content of the message is visually processed. Eye tracking studies on mobile still see the F-shape, the same willingness to vertically scroll and the same draw towards certain content types. One notable exception is that key text content above a top image on mobile works particularly well – possibly a counter effect to banner blindness and a result of the generally shorter attention span and higher level of other distractions for mobile readers of email.

Faces are interesting

You probably haven’t heard the name but you’ll know the effect. Pareidolia is our psychological tendency to find patterns in any given stimulus. It can apply to hidden messages in backwards music (Led Zeppelin, Judas Priest and even Taylor Swift have been accused of ‘backmasking’ to subconsciously spread hidden messages), or to finding a large bear hidden in the stars of Ursa Major.


Our ability to find faces in virtually any context is one of the most well known visual effects of Pareidolia – from Marilyn Monroe in a pizza topping to an alien face on a rocky outcrop on Mars. We are naturally (genetically) drawn to faces, whether real or imagined, and it’s another tool exploited by marketers to attract, direct and hold attention. It’s fair to say that the use of facial attraction has mixed reviews. Many don’t just place faces in their content but also exploit other potentially valuable associations. Faces convey emotion and as readers we empathise with this. Assuming a positive image, we’ll project this as a positive virtue of the product or service being represented. Familiar faces have particular resonance – think about the number of celebrity endorsements out there. The orientation of a face and it’s direction of view can also be used to subconsciously steer our own navigation through content.

Eye tracking faces

However, its fair to say that others report downsides or contrary findings. Given other well placed, high impact content, the inclusion of a face doesn’t always dominate our attention. There are also examples where unintentional faces can be distracting or where even real faces can draw attention from where we would really like our readers to be looking.

It’s a big subject and there’s lots more information, examples and debate online and I’ve included a few interesting references below. Of course great email is not just, arguably not at all, about design. But even just understanding the basics of how we visually process information can help us design layouts and place content to maximum effect. Like most aspects of designing the perfect email campaign there are principles and observations, but not one answer. Apply the principles, test and observe and use what works best for you and your audience.

Here’s a quick summary of some key findings:

Readers of email scan content quickly. Use left justified headings, break text blocks into paragraphs and use other visual breaks in the vertical scroll to help them find what they want. Headings also provide useful return reference points.

The F-shape. The top is generally a hot area so use it to display key components, summaries and navigation aids, but beware the potential for banner blindness. Top images and rambling introductions are likely to be skipped.

Left is also important. Left justify and left load your important words and content. The further down we scroll thee more left orientated we become.

Email readers are looking for information so text has a strong bias over images, especially where the image is decorative or adds little extra value. Numbers are perceived as valuable information and including them as numeric characters will help them stand out.

High contrast can attract attention. Faces also draw the eye but beware of distracting readers away from key content or calls to action.

Multiple columns require more cognitive processing but this can also focus attention to achieve a deeper level of comprehension. Equally, multiple columns encourages scanning which can be useful for catalogue type content.