Eyetracking in Marketing

Transcription

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

2 Eyetracking in marketing How to Design an Eye-catching Newsletter? 2 Introduction The most important characteristic of the marketing 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 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 s 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 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 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 , 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.

3 Eyetracking in 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 s? 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, Duchowski A. T., (2007). Eye tracking methodology: theory and practice.

4 Eyetracking in marketing How to Design an Eye-catching Newsletter? 4 Eyetracking - a Tool for the Investigating of the Attention To investigate the perception of the 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.

5 Eyetracking in 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

6 Eyetracking in 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: form L'oreal, 21 August 2012, noreply@lorealparis.pl Study Participants 54 people took part in the study which was conducted in May, 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.

7 Eyetracking in 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.

8 Eyetracking in marketing How to Design an Eye-catching Newsletter? 8 Scenario of the Study Each of the individual experimental sessions had the following sequence: 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.

9 Eyetracking in marketing How to Design an Eye-catching Newsletter? 9 Experimental Manipulations In order to check what kind of impact some of the characteristics of s 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, 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.

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

11 Eyetracking in marketing How to Design an Eye-catching Newsletter? 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.

12 Eyetracking in 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), 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

13 Eyetracking in 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

14 Eyetracking in 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), Fig. 10 A scan path on the original version of the newsletter. Source: Ikea family newsletter, 12 March 2013, biuletyn@ikeafamily.eu

15 Eyetracking in 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.

16 Eyetracking in 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 s 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 articles/blah-blah-text-keep-cut-or-kill/ Ros Hodgekiss, (2011), usability: The science of keeping it short and sweet, Retrieved 15 June, 2013, from -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.

17 Eyetracking in marketing How to Design an Eye-catching Newsletter? 17 Why Are Numbers Better than Letters? A study conducted by Nielsen Norman Group in 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 s 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

18 Eyetracking in 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, 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.

19 Eyetracking in marketing How to Design an Eye-catching Newsletter? 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

20 Eyetracking in 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: from Toyota,, 12 July 2012, mailing@toyota.pl

21 Eyetracking in 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 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

22 Eyetracking in 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: 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.

23 Eyetracking in 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 . We compared FIG 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 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: form L'oreal, 21 August 2012, noreply@lorealparis.pl

24 Eyetracking in 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

25 Eyetracking in 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).

26 Eyetracking in 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: form Expander Niezależny Doradca Finansowy, 20 July 2012, spotkanie@expander.pl