The Effect of Text Color and Background Color on Skim Reading Webpages in Thai

Transcription

1 The Effect of Text Color and Background Color on Skim Reading Webpages in Thai Sorachai Kamollimsakul 1,2, Helen Petrie 1, and Christopher Power 1 1 Human Computer Interaction Research Group, Department of Computer Science, University of York, United Kingdom {sk750,helen.petrie,christopher.power}@york.ac.uk 2 School of Information Technology, Suranaree University of Technology, Thailand Abstract. There are many sets of guidelines concerning the accessibility of the web for older adults, but little empirical evidence from studies with older people to support their recommendations. In addition, all the recommendations apply to text in languages using the Latin alphabet. This study investigated the effects of text color and background color on the performance and preferences of younger and older adults on webpages in the Thai language. There were 18 Thai younger participants (19-29 years) and 18 Thai older participants (59-70 years). There were three combinations of text color and color (black text on white background, white text on black background, and sepia text on off-white background). The text and background color combinations failed to have any significant effects on the performance measures of task completion rate or time spent skim reading webpages. However, for the preference measure, there was a significant difference between combinations of text and background color but no differences between the age groups. There was also a significant interaction between combinations of text and background color and age group. These results form an useful basis for web design guidelines for Thai websites for text and background color for both younger and older users. Keywords: Web accessibility, older adults, web design guidelines, text color, background color, Thai language. 1 Introduction An important issue for many societies at the moment is the aging of the population, with the number of older people (aged 60 years or over) rapidly increasing. In 2012, there were 841 million older people worldwide [12]. The United Nations estimates that by 2050 the proportion of older people will increase to 21 per cent of the total population or more than 2 billion people [11, 12]. If this prediction is born out, it will be the first time in history that the proportion of the population aged 60 years and over will be larger than the proportion of young people (aged under 15) [11]. In Thailand, in 2012 the proportion of older people (aged 60 or over) was 13 per cent and it is estimated to increase to 37.5 per cent by 2050 [12]. The United Nations Population Fund [13] reports that "Thailand is ageing faster than others in South-East Asia (p2). C. Stephanidis (Ed.): HCII 2014 Posters, Part II, CCIS 435, pp , Springer International Publishing Switzerland 2014

2 616 S. Kamollimsakul, H. Petrie, and C. Power The change in population demographics is also leading to an increase in the number of older web users. In Thailand, the current rate of web use by older adults is very low at 2%. However, the use of the web by older Thais is dramatically increasing, with a 33% increase from 2008 to 2010, and a 200% increase from 2010 to Nonetheless, older people face numerous barriers in using the web because of agerelated physical, sensory, and cognitive disabilities [4] as well as the lack of familiarity with the computer technologies and the web amongst the current cohorts of older people. Therefore web accessibility and usability is an important topic for empowering and supporting older people to be able to use websites. Although the Web Content Accessibility Guidelines (WCAG) [14] are well known, they do not cover the needs of older people, only those of people with disabilities. Petrie, Kamollimsakul and Power [7] found that many sets of web design guidelines for older people have been proposed, but most lack evidence-based research to support their recommendations. In addition, these different web design guidelines often make different recommendations on the same issue and the recommendations can be somewhat vague. An example is the recommendation about text color and background color for webpages: Holt [3] recommends "dark type or graphics against a light background (though sometimes the opposite can work fine with sufficient contrast)"; both AgeLight [1] and Zhao [9] recommend using dark type on light or white backgrounds; NIA/NLM [6] recommends using dark type against a light background, or white lettering on a black or dark-colored background. Some guidelines also recommend avoiding colored backgrounds: SilverWeb [5] recommends "Blue green tones should be avoided. Background screens should not be pure white or change rapidly in brightness between screens. Also, a high contrast between the foreground and background should exist". The Nielsen Norman Group [7] recommends "using highly contrasting text and background colors. For optimal legibility, use black text on a white (or a very, very light gray) background". Kamollimsakul, Petrie, and Power [10] found that most web design guidelines for older people are in English and relate to the presentation of text on webpages in the Latin alphabet. Their research about font type found that Thai web users, both younger and older adults, preferred a Thai conservative font type which closely corresponds to a serif font type in the Latin alphabet in comparison to a Thai modern font which closely corresponds to a san serif font. This result is different from current web design guidelines for older people for the Latin alphabet which usually suggest a sans serif font type [2, 3, 5, 6, 7] or argue against the use of a serif font type [7]. Thus, investigating web design guideline related to other alphabets and languages is an interesting and important issue because there is evidence that web design guidelines for the Latin alphabet are not always appropriate for other alphabets. This paper investigated the effect of text color and background color on skim reading webpages for Thai younger and older adults both using both performance and preference measures, with the aim of developing evidence-based recommendations for Thai language websites for both younger and older users.

3 The Effect of Text Color and Background Color on Skim Reading Webpages in Thai Method 2.1 Design A two way mixed design was used in this study. The between participants independent variable was age group with two levels: younger and older adults. The within participants independent variable was combinations of text and background color with three levels: black text on white background (black/white); white text on black background (white/black); and sepia text on off-white background (sepia/off-white). The dependent variables included performance and preference measures. Two aspects of performance were measured: task completion rate and time spent reading per webpage. The preference measure was a five-point Likert item of liking for the three combinations of text and background color. Each participant undertook six skim reading tasks, two tasks for each of the color combinations. The task was to skim read the page as quickly and accurately as possible and to then answer four multiple choices questions about the page. Skim reading was chosen as the task as this is a very common reading task on websites. In an earlier study [8], we found that participants often used a mixture of scanning, skim reading and detailed reading, so for clearer results we set up the task as specifically skim reading. The order of presentation of color combinations was counterbalanced to avoid practice and fatigue effects. 2.2 Participants There were 36 participants, 18 older and 18 younger Thai adults. The mean age of the older adults was years (standard deviation 3.07, range years), 3 were male and 15 were female. The mean age of the younger adults was years (standard deviation 3.06, range years), 7 were male and 11 were female. 2.3 Equipment and Materials Participants completed the study on a PC running Windows XP and Internet Explorer 9 with 21.5 inch LED Monitor, a standard keyboard, and 2-button mouse with a scroll-wheel. A website with six pages about the Olympic Games was created for the study. Each page had four paragraphs and 354 words of text. There were four multiple choice questions for each page. The text and background colors in this study were black (#000000), white (#FFFFFF), sepia (#5E2612), and off-white (#F5EFDC). 2.4 Procedure Participants were briefed about the study and completed an informed consent form and a short demographic questionnaire. They were then asked to make themselves familiar with the computer, monitor, mouse, and web browser. Participants were first given three practice tasks, one for each color combination. For each experimental

4 618 S. Kamollimsakul, H. Petrie, and C. Power trial, participants skim read the page with the appropriate color combination, pressed the spacebar when they had finished reading, and then answered the multiple choice questions. This process was repeated for the six tasks. After completing all the tasks, participants were asked to rate their preference for each color combination on a 5 point Likert item (1 = not at all preferred, 5 = very much preferred). As a reminder, examples of the combinations were provided. 3 Results Analyses of Variance (ANOVA) on the task completion rate and time spent per webpage found that text/background color combinations had no significant effect on either performance measures. There was also no significant effect of age group and no interaction between the independent variables. On the preference measure, there was a significant main effect for color combinations, F (2, 68) = 30.01, p <.001, but no main effect for age group. Fig. 1 illustrates the means for the three color combinations. An LSD post hoc analysis found that white/black was rated significantly lower in preference (p < 0.05) than either black/white and sepia/off-white. There was no significant difference between black/white and sepia/ off-white. In addition, t-tests were conducted to investigate whether ratings of preference were significantly above or below the mid-point of the rating scale, to investigate whether participants were positive or negative about each color combination. One sample t-tests against the neutral mid-point rating of 3 showed that the mean rating for white/black was significant lower than neutral (t (35) = 4.66, p < 0.01), but the mean ratings for black/ white and sepia/off-white were both significant higher than neutral (black/white: t (35) = 6.35, p <.001; sepia/off-white: t (35) = 3.08, p <.01). Mean rating of preference Black on White White on Black Sepia on Off-white Text Colour and Background Colour Fig. 1. Mean preference ratings for three combinations of text and background color (younger and older participants combined) There was also a significant interaction between the color combinations and age group, F (1, 34) = 17.44, p < Fig. 2 illustrates the means for the interaction. A Scheffé post hoc analysis showed that for younger participants, white/black was significantly lower in preference rating (p < 0.05) than either black/white or sepia/off-white.

5 The Effect of Text Color and Background Color on Skim Reading Webpages in Thai 619 For younger participants there was no significant difference between sepia/off-white and black/ white. For older participants, there was a significant difference between black/white and either white/black or sepia/off-white (p < 0.05). There was no significant difference between the latter two combinations. 5 Mean rating of preference Younger Adults Older Adults Black on White White on Black Sepia on Off-white Text Colour and Background Colour Fig. 2. Mean preference ratings for combinations of text color and background color for Younger and Older adults One sample t-tests against the neutral mid-point of 3 showed that for younger adults, the mean rating for white/black background was significant lower than neutral (t = 3.86, df = 17, p <.005), but the mean rating for black/white and for sepia/offwhite were both significantly higher than neutral (black/white: t = 2.76, df = 17, p <.05; sepia/off-white: t = 6.23, df = 17, p <.001). For older adults the mean rating for white/black was significantly lower than neutral (t= 2.72, df = 17, p <.05) and the mean rating of black/white was significantly higher than neutral (t = 7.42, df = 17, p <.001) but the mean rating for sepia/off-white was not significantly different from neutral (t=.20, df = 17, p >.05). 4 Discussion and Conclusions This study found that three commonly mentioned combinations of text and background color had no effect on either younger or older participants' performance on task completion rate or time spent skim reading webpages. However, on the preference measure, there were significant differences between the combinations of text and background color and an interaction effect between the color combinations and age group. Younger adults preferred black text on white background or sepia text on off-white background in comparison to white text on black background. Older adults preferred black text on white background the most and white text on black background the least and were neutral about the sepia on off-white.

6 620 S. Kamollimsakul, H. Petrie, and C. Power Based on these results, proposing black text on white background is good for both younger and older Adults. Sepia text on off-line background is good for younger adults and acceptable for older adults. While White text on Black background should be avoided for all web users. This last point is interesting given that this currently seems quite a popular choice amongst web developers. These results represent only one study with younger and older adults and with only three color combinations of text and background color, albeit common combinations. Nonetheless they form an useful basis for evidence-based web design guidelines for Thai websites for both younger and older web users. Future research will investigate the same effects with English speaking participants. References 1. AgeLight: Interface design guidelines for users of all ages, 2. Holt, B.J., Komlos-Weimer, M.: Older Adults and the World Wide Web: a Guide for Web Site Creators. SPRY Foundation, creators_guide.pdf 3. Hanson, V.L.: Age and web access: the next generation. In: The 2009 International Cross- Disciplinary Conference on Web Accessibility (W4A). ACM (2009) 4. Holt, B.J.: Creating senior-friendly Web sites. Issue brief. Centre for Medicare Education 1(4) (2000) 5. Kurniawan, S., Zaphiris, P.: Research-Derived Web Design Guidelines for Older People. In: Proceeding of the 7th International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS), Maryland, pp (2005) 6. National Institute on Aging/National Library of Medicine (NIA/NLM): Making your website senior friendly: A check list, 7. Pernice, K., Estes, J., Nielsen, J.: Senior Citizens (Ages 65 and older) on the Web. Nielsen Norman Group (2013) 8. Petrie, H., Kamollimsakul, S., Power, C.: Web accessibility for older adults: effects of line spacing and text justification on reading web pages. In: Proceedings of the 15th International ACMSIGACCESS Conference on Computers and Accessibility (ASSETS). ACM (2013) 9. Zhao, H.: Universal Usability Web Design Guidelines for the Elderly (Age 65 and Older), Kamollimsakul, S., Petrie, H., Power, C.: Web accessibility for older readers: Effect of Font Type and Font size on skim reading text on webpages in Thai. In: 14th International Conference on Computers Helping People with Special Needs. LNCS (in press) 11. United Nations. World Population Ageing: (2002) 12. United Nations. World Population Prospects (2013) 13. United Nation Population Fund: Population Aging in Thailand: Prognosis and Policy Response, Bangkok (2006) 14. World Wide Web Consortium. Web Content Accessibility Guidelines 2.0.,