JOURNAL OF COMPUTING, VOLUME 3, ISSUE 11, NOVEMBER 2011, ISSN 2151-9617 HTTPS://SITES.GOOGLE.COM/SITE/JOURNALOFCOMPUTING WWW.JOURNALOFCOMPUTING.

ORG

109

Visual Reading Patterns on Arabic Interfaces: Insights from Eye Tracking

Remya P. George, Rasiya Anwar, Sunitha Jeyasekhar
AbstractThis paper describes visual reading patterns of Arabic script exhibited by web users in their interaction with Arabic interfaces. Eye gaze of participants has been extracted from experiments which investigated different contexts. Patterns on electronic newspapers, eLearning Module, forums and search engines are examined and implications for design are discussed. We have found differences in the reading patterns exhibited by the readers compared to the studies in English interfaces because of variations in the direction of Arabic scripts as well as cultural factors. Index Terms Arabic Interfaces, Eye Tracking, Visual Reading Patterns

1 INTRODUCTION

isual reading patterns are the eye movement paths exhibited by readers from the scanning of an interface by readers. Recent research has examined visual patterns in different context such as art [17], reading [11], web design [14] and form design [19]. Much of this research has examined languages and only a few have investigated the Arabic reading patterns. Studies examining Arabic interfaces have found differences in the reading pattern exhibited by the readers compare to the studies in English. Understanding the readability of typography is essential for designers of electronic content in general, and web or e-learning designers in particular .The gaze patterns exhibited by the readers vary according to the context and the language. Prior researchers have identified the common reading patterns exhibited by readers in English websites. The common visual patterns identified in English are Nielsons F Shaped Pattern [8], Z, Zig-zag and triangular patterns [15]. Examining the patterns can help the designer to design the website according to the information seeking behavior of the reader. Arabic bi-directional script differs from English in many ways; different direction for words (right-to- left) with numbers written left-to-right, and unique orthographies such as shallow and deep orthographies, and script features in which letters take on a different shape and form depending on their location within a word (e.g. beginning, middle, end, and stand-alone). In this investigation, we aggregate findings from several studies that have examined eye movements of Arabic user populations in their interaction with interfaces in various contexts. This is important because the differences between Arabic right-to-left interfaces and non-Arabic left-to-right interfaces are actually beyond the directional

variations in text and layout. This study report the visual reading patterns exhibited by native Arabic speakers when they are interacting with Arabic interface. An example for this is the reverse pattern of Z, found in Arabic Google search engine [18].

2 READING AND EYE TRACKING

2.1 Reading Research
Eye tracking has been around for 100s of years. Reading was the main domain of eye tracking in its early years. Most languages examined with eye tracking in the last century were Latin-based languages. Only recently has eye tracking studies been started to report in Arabic script [1][18][12]. Most studies concentrated on the readability of Arabic Typography, usability studies, designing guidelines for website design and clinical diagnosis [1][18][13].

2.2 Insights Obtained From Eye Tracking

Eye tracking can inform the design of interfaces in many ways. First, distribution of attention on areas of the interface can help designers determine what parts of the interface were effective in attracting attention, maintaining attention, or which were distracting the attention of user. Second, measure related to duration of fixations can indicate the level of processing that users directed to specific areas of the interface with the duration being positively related to cognitive processing and level of interest. Third, patterns of gaze and visits and re-visits to areas can help designers understand the effectiveness of certain layouts and the presentation of content. Identifying the preferred font type, font size and layouts for online reading gives better reading experience for the reader. The reading preference of the reader varies Remya P.George, Department of Information Technology, King Saud Uni- according to the scenario such as eLearning, online news versity, Saudi Arabia. reading, e-commerce websites, searching through the Rasiya Anwar, Department of Information Technology, King Saud Universearch engines etc. Understanding these reading behasity, Saudi Arabia. viours can help the designer to design an interface with Sunitha Jeyasekhar, Department of Information Technology, King Saud University, Saudi Arabia. the appropriate size of fonts in combination with images, margins, white space, line spacing, colors, banners, mul-

JOURNAL OF COMPUTING, VOLUME 3, ISSUE 11, NOVEMBER 2011, ISSN 2151-9617 HTTPS://SITES.GOOGLE.COM/SITE/JOURNALOFCOMPUTING WWW.JOURNALOFCOMPUTING.ORG

110

timedia etc

2.3 Visual Patterns of Web Users

Prior researches have reported the visual reading patterns of web users in English websites. The visual scan paths are examined for various interfaces including searching & browsing websites[13], searching the search engine results, to predict reading struggles and distractions [16],while reading online newspaper [9] etc. Poynter's has reported an eye tracking study of print and online reading of newspapers in English [9]. According to his study 2 types of reading styles are defined namely Methodical and Scanning].The findings suggests that the most influencing factor of online reading is the reading style of the reader and about half of the online readers were scanners and other half were methodical in their behavior [9]. Poynters has claimed a couple of eye tracking conclusions about the reading pattern of an online reader such as users spend a good deal of time initially looking at the top left of the page and upper portion of the page before moving down and right-ward, Navigation placed at the top of a homepage performed best in these type of interfaces[10]. The common reading patterns reported are F Shaped Pattern, Z, Zigzag and triangular patterns [8][15]. Based on the scenario, these patterns give clear information about the users attention distribution and distraction level, expected position of menu bar and navigations, mode of content search etc. Shrestha has reported that users follow an F Pattern while conducting browsing and searching task on an e-commerce website [13]. Whereas Eleni reported that the most common scan path that the participants followed while searching through Google result page are Z patterns [3].

The stimuli used for the analysis of this paper are stated below. The first experiment was designed to examine the visual attention distribution of web users between the text and multimedia content in an eLearning environment. The stimulus was one eLearning module from the eLearning & Training Resources Center (http://elearning.edu.sa). The modules topic was an introduction to Statistics in Arabic and was designed using text and multimedia elements [1]. The second stimuli is designed to examine the readability and legibility of Arabic scripts in different alignment and column formats when read by native Arabic readers under controlled font conditions (Remya, in press). Participants were asked to read 4 passages for comparing the readability of different alignments. The passages were taken from an Arabic newspaper, Alriyadh. Stimuli were presented on-screen to participants in random order to control for learning effects. The layout considered for the passages are single column vs. double column and justified vs. not justified. The third stimulus was designed to examine the visual attention on advertisements and banners on websites [12]. Subjects were requested to visually explore six screen shots of Arabic websites that includes various topics, online news papers and Arabic interface of social networking website. Sites were presented in random order with equal intervals. The fourth study was designed to examine the user's information seeking behavior using Arabic search engine. The stimulus used was Search Engine Result Pages (SERP) of Google's Arabic Interface [18].

4 RESULTS AND DISCUSSION

Visual reading patterns are reported in the following sections describing different contexts.

3 METHODS
We have conducted several eye tracking studies in our lab to investigate the eye movements of native Arabic speakers when they are interacting with Arabic interfaces in various contexts. This study includes few amongst them to examine the visual reading pattern exhibited by web users. The context includes are visual attention distribution in an elearning environment [1] and on web adverts and banners[12], examining the readability and legibility of Arabic typography with different layouts [2] and information seeking behavior of web users with Arabic search engine [18]

4.1 E-Learning Websites

Visual patterns of learners were examined in their interaction with an eLearning program that had an Arabic Interface. The stimuli combined textual content with static images, videos, animations. The patterns of exploration were right to left with intermittent examination of the multimedia content [1] as depicted in Figure1.

3.1 Apparatus
Experiments described in this paper were all conducted using a Tobii X120 eye tracker with sampling frequency of 60 Hz for mixed media stimuli and 120Hz for text-only stimuli. Tobii X120 eye tracker uses infrared corneal reflection to ascertain the location of participants eye gaze. Tobii Studio was used for collecting logs of eye and mouse movements and analysis. Participants viewed the stimuli on LCD monitors at a viewing distance of approximately 65cm.

Fig.1. Intermittent examination of multimedia content In a right-to-left layout, it was interesting to find z-shaped patterns in which viewers start with text then examine the multimedia content at points in time in which the audio ac-

3.2 Stimuli

JOURNAL OF COMPUTING, VOLUME 3, ISSUE 11, NOVEMBER 2011, ISSN 2151-9617 HTTPS://SITES.GOOGLE.COM/SITE/JOURNALOFCOMPUTING WWW.JOURNALOFCOMPUTING.ORG

111

companying the video or animation or video emphasizes a point with tone. Other instances of switching between text and multimedia would be when animation is detected by foveal vision of viewers. Patterns showing brief examinations of these areas are in line with the findings of [16] in which they have shown that viewers struggle to ignore interface elements that are animated and consequently exhibit increased cognitive effort in concentrating on the text which is exhibited by intense fixation. Visual patterns of triangular shapes were observed across the eLearning interface. As shown in Figure 2 & 3 the subjects attention alternated between the navigation, text and multimedia.

Fig.4. Right to Left Sweep Pattern Figure 4 shows visual reading patterns across the first column followed by a shift towards the second column in which the reader continued to exhibit similar patterns across lines. In some case cases, visual patterns drift above or below a line of text. However, it was observed in these experiments that the actual text being read is within the foveal vision area as depicted in figure 5. The figure shows the fixations which increase in size relative to their duration, covers the text as the reader visually examines it and reads it out loud. However, it is not expected to have readers capable of reading text from peripheral vision as has been exhibited in some eye tracking literature in which users examine mixed media of images together with text.

Fig.2. Triangular Reading Pattern The two consecutive cycles of the triangular pattern are shown in Figure 3. In the first cycle, users exhibited behavior of visual examination of navigation, followed by content then the multimedia area of the eLearning interface. The second cycle was similarly exhibit by several users in the way they distributed their attention across the interface during the modules multimedia presentation.

Fig.5. Visual Pattern with Drift above or Below

4.3 Advertising Blogs

Fig.3. The two consecutive cycles of the triangular pattern The stimuli constituted of textual content, and static and dynamic images. Eye movements were analyzed in that study to identify visual attention distribution and gaze patterns of subjects on web adverts and banners [12]. In the web adverts, it was interesting to find that, some users are more interested in images than the text as depicted in the pattern shown in the Figure 6.

4.2 Text Only Websites

Stimuli which are comprised of text only enable researchers to focus on how textual content is examined with particular attention directed to the effect of typography on reading accuracy and legibility. In two-column formats of text-only interfaces, left-to-right sweeps across lines are evident in right-to-left scripts such as Arabic.

JOURNAL OF COMPUTING, VOLUME 3, ISSUE 11, NOVEMBER 2011, ISSN 2151-9617 HTTPS://SITES.GOOGLE.COM/SITE/JOURNALOFCOMPUTING WWW.JOURNALOFCOMPUTING.ORG

112

on the AL Jazira website. Subjects have clear fixations and continouos sweeps through the site and the analysis of visual patterns clearly shows a layout- guided visual

Fig.6. Attention on only Images Another interesting findings was that irresepctive of the visual patterns or attention, visual attention of all the subjects was directed to the image of Masjid-u-Nabawi which can be interpreted as attention influenced by the the cultural impact of the object of interest on the users.(See Figure 7).

Fig.9. Zig-zag Pattern pattern. Subjects didnt exhibit any longer fixations or indications of distractions during the reading such as revisiting areas of interest or abnormal fixation (See Figure 10).

Fig. 7. Cultural Impact of Objects Interest Visual Patterns also showed how white spaces aided the users in reading the text with least hinderance of the multimedia content. Figure 8 clearly shows a smooth reading pattern within areas of content and longer saccades across white space that separates content areas with out any distarctions in the reading.

Fig.10. Layout-guided visual patterns on online newspapers Figure 11 shows another interesting visual pattern, in that the banner on the left side has received less attention by the users. Reem reported that, ads placed in the right side of an Arabic website get more attention [12].

Fig.11. Users ignored banners on the left Fig.8. White Space aided in reading text Another visual patterns found in the Arabic interfaces are zig-zag patterns. In this patterns, the reader starts from the right and continue to the left then a little down and back to the right before starting the another horizontal movement to the left again, which may be because of the difference in the direction of Arabic scripts. Figure 9 shows the zig-zag visual pattern observed in the advertising study. Visual patterns also show the impact of layout design

4.4 Search Engines

Visual patterns of native Arabic speakers were examined in their interaction with Arabic search engines and their information seeking behaviour is analyzed. The stimuli used for this experiment was Google's Arabic interface and the task was finding the nearest match for the search scenario [18]. Eye tracking analysis of how users interact with the search engines has been already examined in English [3] and other languages (Mary et.al 2010). Mary et.al have done their experiment to determine whether the intention behind search engine queries affects the approach of users

JOURNAL OF COMPUTING, VOLUME 3, ISSUE 11, NOVEMBER 2011, ISSN 2151-9617 HTTPS://SITES.GOOGLE.COM/SITE/JOURNALOFCOMPUTING WWW.JOURNALOFCOMPUTING.ORG

113

in browsing the results page. The study also analyses relationship between gaze patterns and the impact of intentions during querying. In Arabic, Al-Rashid et al. reported the first study about the visual patterns of native Arabic speakers in Arabic search engines. Gaze patterns found in Arabic search engines are varied according to the context. Figure12 shows a comprehensive reading pattern of the user in which the users shows a right to left, top to bottom, sequential, line by line reading pattern.

DISCUSSION

Fig.12. Comprehensive Reading Pattern Distinct patterns of visual attention emerged similar to those in English interfaces in that viewers examine the title of the page followed by the snippet then the URL of the search result listed on the page. According to Elenis studies on Gaze Plot Analysis, the longer fixations on the Google search results page were Google logo, and the key word on the search box [18]. But in our study very few exhibited fixations on the logo and keyword. Another common pattern that the participants exhibited is the tendency to read only the headings and skipping the subheadings. This pattern is evident in the two samples depicted in Figure 13.

By understanding the visual pattern exhibited by native Arabic speakers when they are interacting with Arabic interfaces can help designers to design the interface more efficiently and effectively. Common patterns of visual attention on textual content are reverse Z-patterns. Thus interfaces should consider line length appropriate for supporting sweeps across lines which have Arabic script. Alignment in right-to-left interfaces such as Arabic needs to consider text, navigation and layout placement. Visual attention on images seems to be more in Arabic user populations. Thus careful consideration of image prominence and placement needs to be considered the design of Arabic interfaces. White space has been shown to effectively guide users eye movements in reverse-Z patterns exhibited on blocks of textual and image content. White space has been shown to effectively guide users eye movements in reverse-Z patterns exhibited on blocks of textual and image content.

CONCLUSION

This study examined visual patterns of reading. Patterns mirrored visual patterns of web users on left-to-right interfaces in most contexts. Variations were found in interfaces that have cultural influences such as images with prominent or meaningful associations and in the information seeking behavior. Very minimum users exhibited banner blindness where in English it is high. Measures of eye gaze duration and patterns and their interpretation were found to apply to Arabic interfaces. Thus these patterns can be useful for designers of Arabic interfaces in examining the effectiveness of interface designs or in considering different design approaches.

ACKNOWLEDGMENT
This research project was supported by a grant from the Research Center of the Female colleges for Medical and Scientific studies in King Saud University. We also express our sincere gratitude to Dr.Areej Al-Wabil for her whole hearted guidance and support. Fig.13. Patterns of examining search results. Figure 14 shows the zig-zag pattern of reading exhibited by the subjects in the Google Arabic interface.

REFERENCES
[1] Areej Al-Wabil, Hebah AlGibreen, Remya George, Buthainah Aldosary. (2010).Exploring the Validity of Learning Styles as Effective Personalization Parameters in eLearning Environments: An Eyetracking Study. Accepted for presentation in the International Conference on Computer Technology and Development ICCTD 2010, Nov 2, 2010; published by IEEE Areej Al-Wabil, Remya George.(2010). An Eye tracking Study of Arabic Typography Readability. In proceedings of the IADIS Interfaces and Human Computer Interaction (IHCI) 2010 conference, pp. 309-312, ISBN: 978-972-8939-18-2. Eleni Michailidou. (2007). Pilot Eye-Tracking Study: Hotspot and Gaze Plot Analysis.

[2]

[3]

Fig. 14. Zig-zag Pattern of examining search results

JOURNAL OF COMPUTING, VOLUME 3, ISSUE 11, NOVEMBER 2011, ISSN 2151-9617 HTTPS://SITES.GOOGLE.COM/SITE/JOURNALOFCOMPUTING WWW.JOURNALOFCOMPUTING.ORG
[4] Georg Buscher, Edward Cutrell, and Meredith Ringel Morris. (2009). What do you see when you're surfing?: using eye tracking to predict salient regions of web pages. In Proceedings of the 27th international conference on Human factors in computing systems (CHI '09). ACM, New York, NY, USA, 21-30. DOI=10.1145/1518701.1518705 Joseph H. Goldberg, Mark J. Stimson, Marion Lewenstein, Neil Scott, and Anna M. Wichansky. (2002). Eye tracking in web search tasks: design implications. In Proceedings of the 2002 symposium on Eye tracking research \& applications (ETRA '02). ACM, New York, NY, USA, 51-58. DOI=10.1145/507072.507082 Lopez.A, (2010, August 24). User behavior in SERPs. Eye tracking study July 2010 .Retrieved on October 31, 2007 from, http://dynamical.biz/blog/web-analytics/serps-userbehaviour-eye-tracking-study-32.htm Marcus, A. (2011). Cultural-Centered Design: Culture audit of Screen Designs for Educational Software in Saudi Arabia, In proceedings of the 14th International Conference on HumanComputer Interaction (HCII2011), Orlando, Florida, July 9-14, 2011, Communications in Computer and Information Science" (CCIS) series, vol 6775, pp. 85-93. Nielsen, J., (2006). F-Shaped Pattern for Reading Web Content. Alertbox, April 17, 2006 Poynter Eye tracking study (2007, March). A study of print and online news reading. Retrieved on October 31, 2007 from, http://www.slideshare.net/coolstuff/poynter-eyetrackingstudy-march-07.

114

[5]

[6]

[7]

[8] [9]

[10] Poynter's Eye-tracking Follies. (2008, April 13). Retrieved on October 31, 2007 from, http://www.andyrutledge.com/poynters-eye-trackfollies.php. [11] Rayner, K. (1998) Eye movements in reading and information processing: 20 years of research. Psychological Bulletin, 124, 372422. [12] Reem Al-Salloom, Weaam Al-Rashid, Buthainah.aldosary.(2010). An Exploratory Study Eye Tracking Study of Visual Attention on Web Adverts and Banners, IADIS 2010 Informatics 2010Conference , June 30, 2010. [13] Sav Shrestha, Kelsi Lenz. (2007).Eye Gaze Patterns While Searching vs. Browsing a Website.Usability News; January 2007,Vol.9 Issue1. [14] Soussan Djamasbi, Marisa Siegel, and Tom Tullis. (2010). Generation Y, web design, and eye tracking. Int. J. Hum.-Comput. Stud. 68, 5 (May 2010), 307-323. DOI=10.1016/j.ijhcs.2009.12.006 [15] Bradley.S, (2011, February 7th). 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern. Retrieved on October 31, 2007 from, http://www.vanseodesign.com/web-design/3design-layouts/ [16] Vidhya Navalpakkam, Justin M Rao, Malcolm Slaney. (2011). Using Gaze Patterns to Study and Predict reading Struggles due to Distraction, CHI 2011, May 7-12, 2011, Vancouer, BC, Canada. [17] Vogt, S. & Magnussen, S. (2007). Expertise in pictorial perception: Eye-movement patterns and visual memory in artists and laymen. Perception, 36, 91-100. [18] Weam Al-Rashid, Buthainah Al-Dosary, Reem Al-Salloom. (2010). Visual Attention on Search Engine Results: Information Retreival of Arabic Web Content, IADIS 2010 Informatics 2010 Conference, June 30, 2010 [19] Luke Wroblewski. (2006). Eye Tracking Web Forms, Retrieved on November 14 2007 from http://www.lukew.com/ff/entry.asp?374