Eyetracking in E-mail Marketing

How to Design an Eye-catching Newsletter? Eyetracking in E-mail Marketing Cracow (Poland), July 2013 user experience studio

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 2 Introduction The most important characteristic of the marketing e-mail or the newsletter is its efficiency. In other words, this parameter can be described as the amount of the attention which is paid to this message by its recipients. Efficiency of the e-mail marketing can be examined with the use of such indicators as Open Rate or Click-Through-Rate. This time, we decided to take another perspective. We made an attempt to look at e-mails and newsletters with users own eyes in order to get to know what they exactly see while opening this kind of messages. Not everything can be measured and described with the indirect measures such as the number of clicks. The decision to click on call-to-action and therefore to visit the website is the last stage of the long and complicated chain of decisions and reactions. All of them happen in users' minds, so there is no possibility to observe and measure them in a direct way. One of the ways to understand what is happening in users' minds is to observe what they really see, what cannot be done with the use of the traditional methods of the e-mail research. This report is our second attempt to cover this topic. This year we managed to conduct a study with two times more participants than in our previous report, in 2011. Thanks to the larger group of the subjects, we were able to conduct more explorative tests and analyses. This time we were trying to check, whether very small changes in the layout or in the position and the size of the various elements can influence the way they are perceived. In general, the aim of this study was to determine how to create a good e-mail, which is good enough to draw users' attention. Psychology used to describe those processes with the metaphor of a black box. We know that all the information which is stored and processed in this box is delivered there by the senses, such as vision.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 3 Why Do We Live in the World of the Illusion? And What It Has to Do with E-mails? Although most of us are not aware of this phenomenon, we are constantly tricked by our wonderful allies - our brains. The vast majority of the people is able to perceive the world with colors. The construction of our eyes does not allow us to see them in the whole area of our visual field though. We can see in color and in high definition only the small percentage of it. The size of the area of the very sharp vision can be compared to the size of a thumb which can be seen while keeping arms straight. 1 Approximately, while using 21'' screen, this area covers about 3% of the screen. 2 Our perception seems to be substantially constrained. Most of the time we are not even aware of that, because our visual system has a good way to compensate it. The system which is responsible for the constant moves of the eyeballs is able to aim them at the most important and probably the most interesting regions of the visual field. This system is enough efficient for us not even to notice all of those constraints. We are able to see in detail only the small percentage of our visual field - only the part which draws our attention. With the use of the method that allows us to see, where exactly the spot of the attention is directed, it becomes possible to check, whether the merits of the message are really noticed. The size of the area of the very sharp vision, while using 21'' screen, covers only about 3% of the screen. 1 Henderson, J. M., & Hollingworth, a. (1999). High-level scene perception. Annual review of psychology, 50, 243-71. 2 Duchowski A. T., (2007). Eye tracking methodology: theory and practice.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 4 Eyetracking - a Tool for the Investigating of the Attention To investigate the perception of the e-mail marketing creations, we used an eye tracking methodology which allows to record the gaze of the person while looking at the image. For our study we used an SMI RED 60/120 eye tracker. FIG.1 It is a non-invasive device which allows to collect the data about the movements of the participants eyes. The dedicated software analyzes the image of the pupil and the reflection of the infrared light in the cornea of the eye. The equipment we used operates at 60 Hz frequency, which means that it collects data about the position of the eye 60 times per second. Thus, we were able to check at which objects and for how long our participants fixated there gaze. We could also get to know which elements, amongst the whole field of the vision, attracted their attention the most. Fig. 1 Eye tracker SMI RED 60/120 - the device we used for our study. The equipment we used operates at 60 Hz frequency, which means that it collects data about the position of the eyes 60 times per second.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 5 An eye tracker is able to analyze data from two types of events: fixations and saccadic movements of the eyes. Fixation FIG.2 is a moment when our eyes standstill, which enables the cognitive system to get the right amount of the visual information and analyze it. Saccadic movements are related to switching the attention between objects. Our eyes perform about 3 to 5 such movements every second. The raw data from the eye tracking study can be further processed in many ways. One of the forms of their visualisation is a scan path, the example of it can be seen in. FIG.2 This method of the data visualisation shows the way of gaze of one person at a given stimulus. Fig. 2 A scan path - the visualisation of the gaze of one participant. The circles depict fixations of the gaze - i.e. moments, when eyeballs stand still. The lines depict saccadic eye movements the moments of shifting the attention between objects. Source: Gratka.pl/skoda.Polska, 19 March 2013, promocja@skoda-auto.pl Other forms of data visualisation can be used to depict some of the trends that appear repetitively in most cases of the subjects. Those forms are called heat maps and focus maps. FIG.3 Fig. 3 A heat map and a focus map. Source: Bank Zachodni BZWBK, 05 March 2012, kredyty.gotowkowe@bzwbk.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 6 Psycho physiological methods, such as eyetracking or other techniques allowing to observe the functioning of the brain, enable to collect the data which are impossible to measure through indirect measures, such as interviews or surveys. Collecting raw data about the position of the eye allows to perform quantitative analysis. FIG.4 Having such data, it is possible to investigate for example, whether an experimental modification has an influence on participants' focus on a particular element. This type of analysis also shows, whether the observed differences were only a coincidence or whether we can speak of a real trend. Types of data that is possible to collect: the order in which the elements of the newsletter were noticed, the number of the gaze fixations on a particular object, the amount of time spent on looking at the object, the number of the participants who noticed the object. Fig. 4 Quantitative indicators, such as an average number and the duration of the gaze fixations on a particular area. Source: E-mail form L'oreal, 21 August 2012, noreply@lorealparis.pl Study Participants 54 people took part in the study which was conducted in May, 2013. All of the study participants were male and female students of the Pedagogical University of Cracow. The participants were recruited with the use of the snowball sampling technique. Each subject received a small salary in return for the participation in the experiment.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 7 Methodology Some basic information on the procedure: 36 newsletters were presented to the participants, each stimulus was presented for 10 s, all of the subjects began viewing the stimulus from the same place (the top right side of the screen), the industries from which we sourced stimuli include: the automotive, the financial, the food, the fashion, the travel, the home industry and others, FIG.5 54 participants were divided into two groups of the same size. One group viewed the original newsletters, the second one viewed the modified versions of them. Fig. 5 The newsletters that were used in the study. We studied 36 newsletters in total. Each of the stimuli was presented for 10 seconds.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 8 Scenario of the Study Each of the individual experimental sessions had the following sequence: 1 2 3 4 5 Calibration Introduction Block 1 Video distractor Block 2 The adaptation of the device to particular Instruction about the test. 2 stimuli of the fixed order; 1 Two advertising spots of the Copernicus 16 stimuli of the random order; participant. 16 stimuli of the random order. Science Centre. 2 stimuli of the fixed order. 1 The stimuli of the fixed order were included in the procedure to compensate for the primacy and the regency effects. These stimuli were not included in the analysis.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 9 Experimental Manipulations In order to check what kind of impact some of the characteristics of e-mails have on users, some of the stimuli were transformed by our team. The following experimental modifications were applied: FIG.6 the change of the position of the logo and the call-to-action button, the change of the size of the numbers/prices, the change of the direction in which the character on the photo looks at, Fig. 6 An example of the experimental modification ('mirror reflection'). The right one an original version, the left one a modified version. Source: Frisco.pl mailing, 19.03.2013 bok@frisco.pl the removal or shortening of the introductory text, the change of the number of the columns in which the products are presented, mirror reflection, change of position Each of the stimuli used in the study had two versions an original and a modified one. Each version was seen by 27 participants. All of the heat maps in the report are derived from the averaging of 10 second- long scan paths of 27 subjects. All of the heat maps in the report are derived from the averaging of 10 seconds- long scan paths of 27 subjects.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 10 Results and Observations

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 11 1. Perception of the Text and Reading Habits How Does Reading Influence Our Perception? Many of the phenomena that can be observed in the results of eye tracking studies are associated with the habits we acquire while learning to read. We read from left to right and from top to down. In the same way we see such things as lists of the products or search engine results. Therefore, the element located on the top left corner of the list will attract our attention faster and for longer than other elements. Customs and habits associated with reading are acquired by us not only when we are small children who learn how to read. They can be somehow modified throughout our whole life. Being connected to the world of the digital technology has an impact on what and how we do reading. First of all, we have more and more quick access to the increasing amount of the information. It requires from web users the adoption of the set of efficient mechanisms which enable them to quickly categorize the information and skip those that are less important or less interesting. Therefore, in addition to the one of the universal laws - starting scanning of the page from the top left corner, in eye tracking studies we can observe many other phenomena and the reactions of the users, which are the result of the habits learned while, using the digital media. Knowledge about how the reflexes and the habits associated with reading look like makes more elaborate creation of the marketing messages possible. Using a suitable text formatting or manipulating with the layout can help the reader to reach the most important information quickly and effectively. This allows us to ensure that they will be noticed by the users. Above all, there is no doubt that the compact and the homogenous block of the text fails to meet the task of the communicating the information in an efficient way. In this chapter we tried to show how to make the best use of the text message and how to make sure that the message will be noticed, read and remembered by users. The homogenous block of the text is not a good way to communicate with the reader.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 12 What Kind of the Influence Have the Digital Media on Reading? A frequent use of the digital media can slightly modify our reading habits. Due to the infinite amount of the stimuli and the distractors available in the web, modern readers experience some problems with sustaining attention at the long passages of the text. FIG.7 The easy access to the vast amount of the information has made it essential for us to learn how to read selectively: quickly skimming the text, looking through headlines, searching for keywords. 1 These specific habits and patterns give rise to the phenomenon called 'F-pattern'. FIG.8 1 Liu., Z & Huang., X (2003). Changes in reading behaviour over the past ten years. Journal of Documentation, 61(6), 700-712. Fig. 7 An heat map. The red, hot area in the top part of the screen indicates that the participants started to read the text, but often dropped this activity after reading first few words. Source: Newsletter Wydawnictwo Literackie, 11 April 2013, ksiegarnia@wydawnictwoliterackie.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 13 The 'F-pattern emerges from averaged scan paths from multiple readers. It appears while looking at such sites as search results in a search engine. F-pattern emerges because of: a strong users' tendency to scan the headlines briefly, with little attention devoted to the text underneath; reading from the top to the bottom: the higher the headline is located, the more attention it will get. Fig. 8 A heat map. F pattern emerged from data derived from 27 participants. Source: Newsletter Gazeta Praca, 15 March 2013, newsletter_praca@gazeta.pl Observation 'F-pattern' emerges in such sites as search engines result pages or in informational newsletters. What those kinds of stimuli have in common is the presence of the visually distinct headers and leads. Designing this type of the newsletter it is good to have this phenomenon in mind and place the potentially most interesting content in the top three lines. It is a good idea to ensure that headers are easy to be distinguished from the rest of the content. Fig. 9 One of the scan paths which was used to generate the heat map shown above. The participant focused primarily on headers and ignored leads.ź Source: Newsletter Gazeta Praca, 15 March 2013, newsletter_praca@gazeta.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 14 Why the Knowledge of the Reading Habits in the Internet is Useful? While quickly skimming the text, readers memorize the physical location of the information contained therein, such as key- words. This allows them to return quickly to them and read those fragments which seemed to be the most interesting and relevant. However, this applies, in principle, only to a printed text. On the websites, where scrolling of the page is possible, this kind of hints is no longer useful. 1 Highlighting of the important information and keywords makes them easier to be fund within the block of the text and allows readers to return quickly to them after scanning the page. An exemplary scan path depicted on FIG.10 shows a typical pat tern of the scanning of this newsletter. The introductory text was noticed by the user, but was not read, which is indicated by the distribution and the amount of the fixation points. The participant skimmed the text in the central, teal module and after that focused on the text at the bottom of the page. 1 Liu., Z & Huang., X (2003). Changes in reading behaviour over the past ten years. Journal of Documentation, 61(6), 700-712. Fig. 10 A scan path on the original version of the newsletter. Source: Ikea family newsletter, 12 March 2013, biuletyn@ikeafamily.eu

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 15 A good and effective way to highlight the information is the use of the bold font, frames or the modular arrangement. In the version of the newsletter without an introductory text, the scan paths are roughly the same as in the original version. But thanks to this modification there is more space above the fold that can be used to present potentially more interesting information. It can be concluded that in this case cutting the introductory text brought the positive advantages. The use of the teal module is also a good solution. It helps to distinguish the most important content and, as it can be seen on the heat maps, FIG.11 this is the element which attracted most of the subjects attention. Fig. 11 A scan path and a heat map of a modified version of the newsletter. Observation Source: Ikea family newsletter, 12 March 2013, biuletyn@ikeafamily.eu The large blocks of the text probably will not be read and remembered by a reader. The use of the proper formatting can make the important information easy to pop out' from the rest of the text. Highlighting graphically the whole module, enlarging the size of the font, highlighting the key words can be helpful as well.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 16 Does an Introductory Text Make a Difference? This is not a new question and our team is not the first to address it. Many studies have already shown that the introductory text in e-mails is very often skipped and simply ignored. 1 Cutting and shortening of an introductory text seems to be a good move in most of the cases. FIG.12 Users seldom read an introduction, so spare space can be devoted to the presentation of the products. 1 Nielsen, J., (2007), Blah-Blah Text: Keep, Cut or Kill? Retrieved 15 June, 2013,rom http://www.nngroup.com/ articles/blah-blah-text-keep-cut-or-kill/ Ros Hodgekiss, (2011), Email usability: The science of keeping it short and sweet, Retrieved 15 June, 2013, from http://www.campaignmonitor.com/blog/post/3383/email-usability-keeping-your-email-newsletters-short-and- -sweet/ Observation Cutting or reducing an introductory text does not significantly reduce the amount of the perceived content. It is very unlikely that users would read it from the beginning to the end. Spare space can be used for items that actually will be interesting for readers. Fig. 12 Scan paths. The left one a modified version, the right one an original version. The study participants focused their attention more on the products in the version of the newsletter with the reduced introductory text. Source: NOMI newsletter, 29 March 2013, newsletter@iss.nomi.pl Chart 1. An average time (ms) of fixating the gaze on the products in the original and modified versions of the newsletter. In the modified version, with the shorter version of the introductory text the participants tended to look at them more intensively, especially at the first one of them.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 17 Why Are Numbers Better than Letters? A study conducted by Nielsen Norman Group in 2007 1 showed that: Numbers written using the numeral format (e.g. 123 instead of one hundred twenty three) are the element which can be picked out from the text very easily. The larger the number is, the more viewers' attention it attracts. Increasing the size of it amplifies its perceived importance. Numbers carry a lot of important information so it is easy for them to attract the attention of the recipients. Both our studies on the perception of the marketing e-mails and the newsletters confirmed that the larger the number is, the more attention of viewers it attracts. Increasing the size in case of the numbers written in the numeral format amplifies their perceived importance and helps them to stand out from the passage of the text or from other kinds of the content. According to our hypothesis, decreasing the size of the number would minimize its impact on users. 1 Nielsen, J., (2007), Show Numbers as Numerals When Writing for Online Readers, Retrieved 15 June, 2013, from http://www.nngroup.com/articles/web-writing-show-numbers-as-numerals/

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 18 We analysed for how long the participants from both of the groups were focusing their gaze on numbers. FIG.13 The difference between the groups was statistically significant (p<0.05 in T test). The average difference in time of the fixating the gaze on the price approximated 200 and 400 ms for both prices depicted in the stimulus. In terms of the psychophysiology such amounts of the time are quite large and significant. The longer one looks at an object, the deeper the processing and understanding of the visual information is. 1 Fig. 13 Heat maps. The left one -an original version, the right one - a modified version. Source: Lidl newsletter, 15 March 2012 info@newsletter.lidl.pl 1 Poole, A., and Ball, L. J. Eye tracking in human-computer interaction and usability research., Encyclopedia of human computer interaction. Idea Group, Pennsylvania, 2005, 211-219. Observation 'The law of large numbers' is a rule which works in most of the cases. Numbers easily 'pop out' form the text and immediately grab users' attention. The bigger they are, the more attention they attract.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 19 2. The Arrangement of the Elements Some of the elements of the newsletter are more important than other so they should be clearly visible at a first glance. Such elements include a logo, an action button and a call-to- -action button. While analysing how users perceive the newsletters, we took into account not only which elements attracted users' gazes and which did not, but we devoted our attention also to the order in which they were noticed. Above all, an element to be seen in the very beginning should be intriguing enough to encourage a reader to see the rest. Knowledge about how to design other elements in a way which favors shifting the attention to the most important objects, so they can be easily noticed, may be helpful in the creation of the effective message. Even the slightest manipulations with the arrangement of the elements or the appropriate use of the white space can have an extensive impact on the perception of the message. We investigated, how this kind of changes could influence the noticeability of some elements of the message We also saw what kind of the newsletters layout fosters in-depth processing of the particular element by the users and which one would be more beneficial if the aim is to direct the superficial attention to the larger amount of the products. Even the slightest manipulations with the arrangement of the elements, or the appropriate use of the white space can have an extensive impact on the perception of a message

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 20 Where to Place the Logo to Make It Visible? The best practices of the websites design suggest that the most effective place to put the logo is the top left corner of the screen. We investigated if the same holds true for newsletters. In case of the first newsletter FIG.14 an experimental modification was to move the logo from the right top corner to the lower right corner. The logo of Toyota, when it was placed in the lower right corner, was much less noticeable than in its original location. An interesting observation is the high amount of the concentration of the participants' gazes on the license plate, which is significantly larger in the modified version. Perhaps this is the place where the participants expected to find the logo, since they did not grasped it at the top of the screen. Fig. 14 Heat maps. An original version - left, a modified version - right. Source: E-mail from Toyota,, 12 July 2012, mailing@toyota.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 21 On the other hand, the comparison of the two versions of the newsletter in which the logo was moved from the top left to the top right corner, FIG.15 statistical analysis did not show any significant difference either in the average time of looking at this element or in the average number of the fixations at it. The logo in both locations attracted the similar amount of the participants ' attention. Observation Unlike on web pages, where the strong tendency to place the logo in the top left corner of the page can be observed, in e-mail marketing this custom is not so popular. Therefore, users do not have any strong expectations as far as the location of the logo is concerned. A logotype, first of all, should be easily noticeable. The example of the bad location seems to be the bottom of the newsletter. Fig. 15 Selected statistical indicators for two versions of the newsletter. An original version - left, a modified version - right. In the modified version the logo was moved to the top right corner. Source: Znak.com.pl newsletter, 15 March 2013, ksiegarniainternetowa@znak.com.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 22 Does Always 'Higher' Means 'Better'? We decided to test the hypothesis that placing the logo at the top of the screen will increase the focus on this element. FIG.16 We performed the analysis of the scan paths of the individal participants. FIG.17 It showed, however, that the only thing which really changed was the order in which particular elements were scanned. In the original version our subjects tended at first to pay their attention to the products and then to the logo. In the modified version the order was opposite. Fig. 16 Heat maps. An original version - left, a modified version - right. The statistical analysis did not show any significant difference between these two versions in the average time of focusing on the logotypes. Source: E-mail from militaria.pl, 13 March 2013, zapytania@militaria.pl Observation: Presumably, the location of the logo at the bottom of the message will have no impact on its visibility - but only in case of the very short messages, with little information or the small amount of the products presented. Fig. 17 Typical scan paths of participants while looking at the original (left) or at the modified (right) version.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 23 Where to Place Call-to-action Buttons? A call-to-action button, which is designed to transfer the user to the website, first of all must be seen and noticed to fulfill its role. The key seems to be choosing the right location, where it is easy to spot it, even during the quick scanning of the e-mail. We compared FIG.18 18 for how long our participants were focusing their gaze on the button and on the call-to-action. The result we obtained suggests that changing the location of the call-to-action to the place above the product, significantly increases its noti- ceability. What is more, in our study stimuli were presented on the large screen. If the users had been watching the stimuli on the screen of the ordinary size, the call-to-action and the button would not have been visible at all without scrolling the screen down. Observation The readers tend to scan the message from the top so the element which is meant to convince them not to close the e-mail right away should be placed as close to the top as possible. The layout should fit the average size of the screens so the crucial element can be placed above the fold. Fig. 18 A heat map. An original version - left, a modified version - right. In the modified version the action button and the call-to-action were moved to the top half of the screen. Source: E-mail form L'oreal, 21 August 2012, noreply@lorealparis.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 24 How Many Columns Should Be Used for Presentation of the Products? It seems that there is no one, undoubted answer for this question. The number of the columns used to present the array of the products should be tailored to the effect we want to achieve. The heat maps FIG.19 depict how study participants viewed both versions of the newsletter. The biggest differences are visible within the first product - in the two-column version much higher concentration on this item can be observed. Fig. 19 A heat map. An original version - left, a modified version - right. In the modified version the number of the columns has been reduced. Source: Vision Express newsletter, 11 February 2013, sklep@visionexpress.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 25 Observation If the aim is to attract viewers attention to the one particular product, it would be more efficient to choose a two- column layout and place it in the top left corner of the list. This effect was confirmed in both our studies. Chart 2. The comparison of the average time (ms) of looking at the first product (at the top-left corner of the list) between the original (3-column) and the modified (2-column) version. The difference is statistically significant (p<0.01 in T test).

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 26 May the Arrangement of the Elements Affect the Order in which They Are Noticed? The visibility of such elements as action buttons and their ability to attract eye gaze depends not only on their appearance or size, but also, to a large extent, on the environment in which they are placed. In many cases the appearance of the adjacent element will be crucial to noticeability of the other elements. As it can be seen at the, FIG.20 after noticing the action button with the arrow, participant's gaze moved to the logo to which the arrow points. Although the arrow and the logo are the separate elements, the arrow helps to draw user's attention to the logo. In the modified version, in which we switched the location of those elements so that arrow does not point at logo, the fixation time on the logotype was on average about 200 ms shorter. Observation Elements such as arrows can be useful in directing viewer's attention and ensuring that consecutive elements will be noticed in the certain order. Fig. 20 The scan path of one of the participants. Source: E-mail form Expander Niezależny Doradca Finansowy, 20 July 2012, spotkanie@expander.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 27 Can Empty Space Play an Important Role? The layout containing two columns separated by empty space, FIG.21, foster the way of scanning it by switching the attention between one half of the screen and another. White space may be crucial in making the key elements, such as buttons easily distinguishable. If an item has an important role to play and should be noticed, it should not be placed in the close proximity to any other objects, because otherwise they can distract attention from it. FIG.22 Fig. 21 The overlaid scan paths of three participants. Source: E-mail from TAURON Sprzedaż Sp. z o.o., 19 August 2012 Observation Counterintuitive, white space can serve as an important factor in directing viewers' attention. An element placed in a crowded place, filled with 'visually loud' elements would have a great chance to be ignored. Fig. 22 Heat maps. The left one an original version, the right one - modified version. In the latter one of the elements on top of the page was cut. Due to the modification, this additional element does not divert attention from the logo, so more focus on this object could be seen in the heat map Source: RTV EURO AGD newsletter, 18. March 2013, biuletyny@euro.com.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 28 3. Visual Communication The use of the graphic elements in e-mail marketing is a common practice that enriches the whole message and makes it more eye-catching. Without conducting the eye tracking studies, however, it would be a mystery whether do they fulfill this aim or they serve as mere distractors, diverting readers attention from an important content. Including good quality pictures in a newsletter makes it more attractive. But it is always good to keep in mind that daily use of Internet has a great impact on the users habits associated with the perception of the content. As in the case of the reading habits, some studies showed many phenomena that reflect users' adaptation for the fast and efficient selection of the information ware worth of looking at. This universal law applies to the graphical forms of the communication as well. Phenomenon, called 'banner blindness', which is often detected in the usability studies of the web pages, can serve as an example of this effect. Web users have a strong tendency to skip all of the objects that are somehow similar to any form of the advertising. It turns out, that the analogical effect can be observed in case of the pictures embedded in e-mails or newsletters. In terms of the effective communication or even directing the readers gaze in a desirable direction, the basic research in the field of the psychology and psychophysiology comes with help. Thanks to them, we already know a lot about the functioning of the human visual attention. We can use this accumulated knowledge for designing the e-mail messages and embed in them objects which are known for sure to attract attention or to have the ability to address readers attention in a particular direction. Phenomenon similar to the banner blindness can be observed in some cases with the stock photos.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 29 Is It Always a Good Idea to Use Pictures? Some studies indicate that Internet users often ignore images which are not directly related to the content of the newsletter (i.e. not showing real places, products, objects or people). Such images, for instance stock photos, are often skipped while scanning a page or a newsletter, because users have learnt that they do not carry any important information. 1 This effect showed up while analyzing how study participants perceived the newsletter at the. FIG.23 In the modified version (without the picture), the text attracted gazes of all of the users, but in the original version only 21 of 27 subjects glanced at it at least once. In the modified version an average time of focusing the gaze on this element increased from 2 to 3 seconds. The average number of the fixations increased more than twice, which suggest more intensive reading. Fig. 23 The comparison of the selected statistical data derived from two versions of the newsletter. The left one- an original version. The right one a modified version, without the picture, with the enlarged text. Source: newsletter from Gdańsk University of Technology, 12 March 2012 1 Nielsen, J., Photos as Web Content (2010), Retrieved June 15, 2013, form http://www.nngroup.com/articles/ photos-as-web-content/

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 30 The picture drew attention of the subjects, but at the expense of the text on the right, which contains the relevant and important content. The statistical analysis revealed that the average total time of watching the whole module (containing the picture and the text or only the text in the modified version) do not differ in the case of both versions - so one can infer that the image attracted attention at the expense of the text. Some participants, who noticed the picture, ignored the accompanying text. What is more, some of the participants who noticed the image did not glanced at the text at all, probably assuming that it would not be interesting or relevant. Observation Use of pictures, if they have no informational value (e.g. presenting particular product) may pull the viewers attention away from the valuable content.

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 31 What is the First Object to Attract Viewers Attention? In most of the cases, it would be a face. While looking at a face, one can receive much more information than while reading the text. A face contains information about the emotional state of the person one is looking at, or even about where he or she directs his/her attention. Faces, especially when the observer is familiar with them, almost always attract attention. As it can be seen at the, FIG.24, the test participant focused on Chuck's Norris face. Except that, he needed only two fixation of the eye to read three bullets in the right half of the screen. This is a good example for how a good way of formatting the text (short, even one- -word points) makes it easy to receive the information. Fig.24 The scan path of one of the participants. Source: newsletter from Bank Zachodni BZWBK, 05 March 2012 kredyty.gotowkowe@bzwbk.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 32 How to Manage Viewers' Attention Using a Face? Illustrating an e-mail with the picture of the face, in addition to making it attracting attention more, it can play an important role in the process of directing attention of the user. Using a well-tested mechanism and the reflexes associated with visual attention can increase the likehood of some objects being noticed and remembered. FIG.25, FIG.26 The heat map on the modified version exemplifies a typical scan-path: the participants followed a models gaze, which resulted in the increased focus of the attention at the face and at the logo. The result of T test for average time of looking at the logo was statistically significant (p<0,05). Fig.26 A scan path. Immediately after catching sight of a model, the participant followed her gaze Source: Newsletter Zalando 3 April 2013 newsletter@service. zalando.pl Fig.25 Heat maps. The left one - the original version of the newsletter. The right one - a modified version. In the original version a model is looking straight forward. After the modification she is looking at the logo. In the modified version increased attention could be seen at her face and at the logo. Source: Newsletter Zalando 3 April 2013 newsletter@service.zalando.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 33 On the other hand, the heat maps presented on the FIG.27 demonstrate the effect which turned out to be opposite than expected. In the modified version, the face attracted more glances than in the original version. Consequently, it provided a significant distraction from the informative elements of the message, instead of direct viewers' eyes to them. Perhaps this unexpected result is caused by the appearance of the eye whites in the modified version. The exposure of eye whites above the iris is one of the key indicators of the expressionof fear. Numerous studies from the field of psychology and neuroscience suggest that negative emotions, and particularly fear, are the stimuli which are most effective in attracting the human attention, and what is more - they hamper its transfer to other objects. 1 1 np. Beck, A. T., & Clark, D. M. (1997). An information processing model of anxiety: automatic and strategic processes. Behavioral Research and Therapy, 35(1), 49 58. Fig.27 A heat map. From the top: an original and a modified version. In the modified version the direction of lemurs gaze was altered. Source: Newsletter Cyfra+, 21 January 2012 webmaster@cyfraplus.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 34 Observation Faces, and in general, objects that resemble them, have a strong ability to attract attention. They can both pull attention away from an item (especially, when expressing strong, negative emotions) and help to draw viewers' attention to a particular element. The additional capability of the face is the fact that the gaze of the depicted person can make viewers follow gaze direction of the depicted person and draw viewers' attention to a desired direction. This allows to take advantage of the reflex to follow the gaze of the other person one is looking at. Fig. 28 A focus map. Not only human or animal faces have an ability to attract eye gaze. As it can be seen at the picture, even elements that remotely resemble them (in this case - electrical socket) are able to draw viewers' attention successfully. Fig. 29 Heat maps. The left one an original version, the right one -a modified version. Placing some information about free delivery at the top of the page increases its visibility. In the version in which this information can be found at the bottom of the page, users attention was directed at other elements, such as faces. Source: answear.com. newsletter Source: E-mail form TAURON Sprzedaż Sp. z o.o., 19 August 2012

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 35 Do Men and Women See the World in the Same Way? We were wondering whether the recipient s sex can influence the fact which elements of the newsletter will be by him/her noticed and remembered. As it turned out, at least in some cases, it seems to be very important. FIG.30 Observation Placing a text next to the photographs of the attractive women may cause the male part of the audience to read it with much less attention than usual. Fig. 30 The heat map illustrates how the same newsletter was seen by women (the left one) and men (the right one). Women were focusing more on the text, while men have devoted more attention to the models of both sexes. Source: Atlantic news;letter, 16 April 2013, info@atlantic.pl

Eyetracking in E-mail marketing How to Design an Eye-catching Newsletter? 36 Summary Our observations and recommendations are rooted in the number of the studies focused on what recipients do really see while looking at advertisements in e-mail campaigns. Some of the effects repeated in our studies twice - in 2011 and 2013. Some of them were also confirmed in studies on the perception of the e-mails and newsletters carried out by other teams. Many observations were also confirmed in the basic research in the fields of psychology and neuroscience, covering various aspects of the human visual attention. But we should not forget that those are general laws, which, however, in particular creation may be not fulfilled due to various modulating factors, such as the content of the e-mail, its size, and the level of the audience engagement. Basing on the above insights, we prepared a short checklist that will help with the construction of the e-mails and newsletter in such a way so that that they served their purpose well and that were more likely to be noticed and remembered by the users. Authors Justyna Janik Maciej Płonka Hubert Turaj EDISONDA EDISONDA is an User Experience studio from Cracow (Poland), specialized in usability testing, eye tracking research and interaction design. www.edisonda.com www.facebook.com/edisondastudio Partners

A Handy Checklist for a Mailing Preparation yydue to the occurrence of the F-pattern in newsletters, the most important information is placed in the top of the list. yypictures embedded in an e-mail are unique, aesthetic and appropriate to its content. yyformatting of the text allows easy skimming. yyheaders stand out from the rest of the text. yyat least two versions were developed and the best one was picked. yykeywords are bolded or highlighted otherwise. yynumbers are presented in a numerical form yyan introductory text is used only when it is necessary, but is kept as short as possible. yythe gaze direction of the depicted character is used to direct viewers gaze to a desired direction. yythe most important product is placed in the top left corner of the product list. yyno important information is placed in the proximity of 'visually loud' objects. user experience studio experience@edisonda.pl