User-Interface Design- A Case Study of Partially Sighted Children in Malaysia

2010 International Conference on User Science Engineering (i-USEr)User-Interface Design: A Case Study of Partially Sighted Children in Malaysia Mawar Madiah Syariffanor Hisham Department of Computer Science Faculty of Information and Communication TechnologyMultimedia University, Jalan Ayer Keroh Lama Universiti Teknikal Malaysia Melaka Hang Tuah Jaya, 75450 Bukit Beruang 76100 Durian Tunggal Melaka, Malaysia + 06-252 3145 Melaka, Malaysia + 06-331 6691 [email protected] [email protected]—A study to investigate partially sighted children’s In the educational context, the terms partially sighted, lowpreferences for font type, font size, font colour and background vision, legally blind, and totally blind are used to describecolours when reading texts from computer screen had been children with visual impairment and need special educationconducted at special integration classes for the visually impaired [10]. Their visual acuity is between 20/70 and 20/400 with thein public primary schools in Malaysia. A prototype of reading best possible correction, or a visual field of 20 degrees or lessapplication with flexible user interface was developed for the [10]. When someone’s visual acuity is 20/70 (read as “twentypurpose of the study. Four types of fonts, namely Times New over seventy” or “twenty-seventy”) means he or she can see atRoman, Courier New, Arial and Comic Sans MS at various font 20 feet of what someone with normal sight can see at 70 feet.sizes were tested. As for the font and background colours, black,white, red and attractive colours such as blue, green, yellow and The importance of application usability has beenpink were examined. The results of the study indicated that emphasised in the human computer interaction (HCI) field inpartially sighted children have their own preferences for font relation with user interface design [16]. User interface istype, font size and foreground and background colour when important because it is a part of an application with which areading texts from computer screens due to their differences in user interacts in order to undertake and achieve his or her tasks’visual problem and visual acuity. The flexible user interface, goals [13]. Texts, colours, buttons, icons, hyperlinks andindeed, had enabled the children to access and read the contents menus are some of the important elements that make up a userof the application easily. This study suggests the importance of interface. In general, different applications have different userconsidering these children in the user interface design. interface designs and are developed for different types of users. Therefore, in order to ensure that the applications can beKeywords: Partially Sighted Children, User Interface Design, accessed and used easily, it is significantly important to knowPreference, Font Type, Font Size, Font Colour, Background beforehand the user’s preferences for user interface design.Colours. Many studies on user interface designs have been I. INTRODUCTION conducted by many researchers and academicians. However, most studies treat users merely as end-users who are forced to Today many children learn to read and to write with accommodate themselves to use the newly suggested usercomputers instead of printed books and homemade flash cards. interface design. The users have no opportunity to initiate theirIndeed, most primary school children now use computers for own preferences for the design [5]. Whilst, in a user-centeredmany of their classes and assignments [6]. Due to this new design approach, the users are directly involved in theway of learning, many educational applications have been development process so that they can initiate their own ideasdeveloped to be used in classrooms. Moreover, children can and preferences for the user interface design [5].gain many benefits through learning games and interactivecomputer activities. However, children with disabilities, The purpose of this study is to investigate PS children’sparticularly partially sighted (PS) children, face significant user interface design preferences particularly for font type, fontproblems in using and accessing the contents of the current size, font colour and background colours. Times New Roman,available applications. This is because the applications are Courier New, Arial and Comic Sans were selected for the studydeveloped by fully sighted (FS) people who may not consider because these fonts are commonly seen in children’s texts [1]the children’s deficiencies and specific needs. As a result, the and recommended to use these fonts for text reading [1] byapplications may not be easily learned and used by PS children. many articles about user interface design guidelines.Thus, these children may not be able to gain the educational Furthermore, few studies conducted by Bernard et al. [2] andbenefits of the applications as they are intended to. Taslim et al. [14] had tested Times New Roman, Courier New, Arial and Comic Sans fonts with the FS children and proved that Comic Sans MS and Arial are the most readable and most978-1-4244-9049-3/10/$26.00 ©2010 IEEE 168

preferred by them. Thus, this study wants to investigate PS children to compare their preferences for user interfacewhether PS children have the same preferences as the FS design.children or whether they have their own preferences. Another study that explored children’s preferences for user Various colour combinations for fonts and background are interface design but only focused on font types is the study ofchosen for the study. Very high contrast background colours Bernard et al. [2]. The study involved 27 children aged from 9such as black and white must be tested in the study because to 11 years. All children had 20/20 or 20/20 corrected visionthese colours are recommended to be used in many user and most of them had at least some experience reading texts oninterface design guidelines, especially for those with low vision computer screens. The study asked the children to read eightproblems. Red, green, blue and yellow are chosen because passages, each with a different font combination. The fontsthese colours can help some PS users, especially those with examined in this study were Times New Roman, Courier New,visual field problems by capturing the areas of reading more Arial and Comic Sans MS at sizes 12 and 14. After reading thesensitively and allowing the users to read the texts clearly [9]. passages, the children were asked to answer a readabilityChildren like bright and attractive colours [11]. This is also the questionnaire which was divided into 4 sections, namelyreason why other colours besides black and white are chosen in perception of font to ease reading, perception of reading faster,this study. perception of font attractiveness and desire to use font type/size in school books. The study found that font size 14 was The prototype that was developed for the study has flexible considered to be easier and quicker to read and was moreuser interface so that it is easy for the participants to change the preferred than font size 12 to be used in school books. Infonts and the background colours to suit their needs. addition, Comic Sans MS font type was perceived as being easier to read and more attractive. The font Arial was preferred Therefore, the researchers believe that the results of this compared to serif fonts (Times New Roman and Courier New).study, together with the current available guidelines of the Web The overall study conducted by [2] found that 14 point ArialAccessibility Initiative (WAI) [15], shall help PS children to and the 12 point Comic Sans MS was the most preferred fonteasily access the contents of applications. types by the children. II. LITERATURE REVIEW Even though the study conducted by Bernard et al. [2] did In user interface design area, only a few studies have not differentiate by gender groups like what Taslim et al. [14]considered PS children’s preferences. In contrast, many did, still this study basically confirmed the existence ofstudies have considered adults with low vision [8]. preferences for children when reading texts on computer A study by Taslim et al. [14] explored user interface design screens. The strength of this study can be attributed to thepreferences for FS children. The study was conducted with 40 selected children that were screened in order to find FSprimary school children aged 10 - 12 years in one of the children. Nonetheless, the limitation of this study perhaps, didnational schools in Malaysia. The user interface elements that not include the PS children to acquire different preferences ofwere tested in the study were font type, font size, background them.colour and interface type. For font type, four conditions weretested which were Arial, Comic Sans MS, Courier New and In another study, Reece et al. [12] examined the preferencesTimes New Roman. For font size, two conditions were tested of normal readers and low vision readers for serif and italicwhich were 12 and 14 points. For background colour, five presence on electronic displays. 231 participants aged 18 yearscolours were chosen, namely green, blue, purple, red and old and above were involved in the study and were categorisedyellow. The interface types were categorised as simple and into two; normal and reduced vision. The participants withcomplex. The study found that there were significant reduced vision spanned a range in severity of vision loss valuesdifferences between boys and girls in their preferences for 20/30 to 20/400. The typeface preferences were based uponbackground colour, interface complexity, and font type but no computer screen displays of a word in both a serif type facesignificant difference for font size. and a sans serif typeface. Each participant then viewed a set of The study conducted by Taslim et al. [14] found that the such screens, and for each of them, the participant selected amajority of girls preferred purple whereas boys preferred blue preferred type and most readable typeface. The study foundas the background colour. For the interface type, all the girls that the participants exhibited an overwhelming preference forchose simple interface type and 20% of the boys preferred the sans serif typefaces and no italic presence. The preference wascomplex interface type. As for the font, the majority of the found for all categories at all levels, with the sans serifboys chose Arial as the most preferred and the majority of the preferences ranging from 87% to 95%. The study concludedgirls chose Comic Sans MS as the most preferred. that the very strong preferences for sans serif typefaces are an The results show that there is a significant difference important issue in the design process.between gender groups in their preferences for the elementsmentioned in the previous paragraph. However, despite the The study of Corley and Pring [4] explored the ability of PSfindings [14], the study still has a limitation. The study cannot children in processing words and pictures. The setting was at agenerally speak for every child of the same age since it only school for visually impaired children in London and thefocused on FS children. It is interesting to include both FS and samples consisted of 11 children (aged 6 - 10) with partial vision. The study was conducted in a variety of ways over a period of 14 months. The PS children were closely matched with groups of FS children. The study found that the PS children, like FS children, used both lexical and nonlexical 169

processing in processing words, though perhaps in different H2. PS children can easily access the content of thebalance. On the other hand, recognition and recall of pictures application with flexible user interface that allow themby the PS children was as good as that of the FS children. to change to their own preferable font type, font size,However, one of the findings of the study that can differentiate and foreground and background colour.between the ability of PS children and FS children is that FSchildren performed better than PS children when a preceding V. METHODOLOGYorienting question or a following elaborative sentence wasprovided. A. Participants 14 participants with partial sight were selected for the The study conducted by Corley and Pring [4] did not try tosuggest any preferred user interface for the PS children but the study. The participants must at least know how to read but notstudy was to prove that the capability of the PS children and necessarily know how to use the computer. The participantsthe FS children to process words and to recognise pictures are had a corrected visual acuity between 20/40 and 20/400. Thealmost the same except that the PS children, perhaps, found main causes of their vision loss were cataract, cancer, albinismdifficulty in integrating visual and verbal information which and accidents. The participants were allowed to wear glasses.followed too closely. Nevertheless, to relate the findings of [4] Of the 14 participants tested, only 12 participants were validand [14] with the objectives of the current study, it is for the study. This yielded 12 usable participants (n = 12) whoanticipated that PS children would have their own preferences were 6 boys and 6 girls from 9 – 12 years. The other 2for user interface design. participants were invalid for the study because they were not able to read texts from the computer screen because they were A study conducted by Lanyi et al. [7] focused on the user trained only to use Braille. Figure 1 shows the case summary ofinterface design for visually impaired children. Three the participants.multimedia game programs were developed with the aim toimprove the sight of visually impaired children. The gameprograms teach PS children to recognise objects in differentcolours, different sizes, and different backgrounds. Besides thethree game programs, an e-learning ICT was developed to helpthe education of low vision children. The e-learning is a web-based program that was designed based on therecommendations of Web Content Accessibility Guidelines(WCAG) [3]. The significance of the e-learning web page isits changeability for the low-vision users. The changeabilitymeans the user can set the colour of the texts and backgroundof the menu field and also of the content field. The size of thecontent can also be set. III. RESEARCH DESIGN Figure 1. Case Summary of the Participants A study to investigate PS children preferences for font type,font size, font colour and background colours when reading B. Taskstexts from computer screens was conducted at special The participants had to perform four reading tasks. Task 1integration classes for visually impaired in few public primaryschools in Malaysia. A prototype of reading application was requires participants to read simple words that will appear onedeveloped using Microsoft Visual Basic 2008 Express Edition at a time once a command button is clicked. Task 2 contains adevelopment tool. simple and short passage that has 4 lines with 3 - 4 words in each line. Task 3 and 4 contain simple passages but longer A semi-structured questionnaire with two parts was compared to the passage in task 2. They have about 10 - 12designed to get qualitative and quantitative data. Part A lines with 10 - 12 words in each line. The reading materials arecontained demographic questions and part B contained based on the Year 2 of the primary school syllabus. Bahasaquestions that were designed towards finding the participants’ Melayu or Malay language is used as the medium of instructionpreferences for font type, font size, font colour and background since Malay language is used as a medium of instruction incolours. The participants were asked to indicate their most primary schools in Malaysia.preferences for font size, font type, font colour and backgroundcolour when performing the reading task. The prototype allows flexibility at the user interface that enables the participants to change the font size, font type, font IV. HYPHOTHESISThe following research hypotheses were formulated for thisstudy:H1. PS children have their own preferences for font size, font type as well as font and background colour at user interface design. 170

colour and background colours at every reading task in order to B. Font Typesuit their preferences but more importantly their capability to Participants were asked to select the font type that was mostsee. Figure 2 shows the screenshots of the four tasks. preferred. Only task 1 and task 3 examined preferable font types. Task 2 and task 4 did not examine font types because the features tested in task 1 and task 3 were enough to know the participants’ preferences. Table 2 shows the number of participants that chose their preferred font type. For simple reading, Arial was the most preferred and for short passages, Comic Sans was the most preferred. Times New Roman and Courier New were not preferred at all. TABLE II. FONT TYPE Times New Courier Arial Comic Sans Roman New MS 9 Task 1 0 0 - 3 3 Task 2 - - - - Task 3 0 0 9Figure 2. Screenshot of the Four Tasks Task 4 - - -C. Procedures C. Font and Background Colour Each participant worked individually with the researcher on Participants were asked to select the font colour andthe reading task, in a secluded area of the classroom. The background colour that was preferred. Only task 1 and task 4prototype was run on Acer D725/D525 notebook Intel Pentium examined preferable font and background color. Task 2 andmobile processor, 3 GB of DDR2 667 MHz memory and 14” task 3 were excluded in this testing because the data receivedHD 1366x768 of display. While reading each task at a from task 1 and task 4 were enough for this investigation.controlled distance of 17” to 20” from the computer screen, the Future research should thus further investigate all the tasks.participants were asked about their preferences for font type, Table 3 shows the number of participants that chose theirfont size, font colour and background colour. About 15 - 20 preferred font colour and background colour. Obviously, theminutes were used for each participant to get his or her majority of the participants, especially those with serious visionfeedback. A small gift was given to each participant and also loss preferred black text and white background. Nevertheless,to the class teacher as a token of appreciation. some participants preferred colourful text and background as long as the colours are high in contrast.D. Analysis The data from the semi-structured questionnaire was TABLE III. FONT AND BACKGROUND COLORtransferred into SPSS. Simple descriptive tests were used to Black White Red Black Blue Black Blackfind the frequency, percent, minimum, maximum and mean. on on on on on on on White Blue Yellow Green Pink VI. RESULTS White Black 5- - - -A. Font Size Task 1 7 - Participants were asked to select the font size that was most ----- Task 2 - -preferred when reading the texts from the computer screen. -----Preferable font size was tested in all tasks. Table 1 presents the Task 3 - -minimum and maximum font size chosen by the participants. 11211On average, the participants needed font size between 30pt and Task 4 5 140pt to read the text clearly. However, two participants thatwere trained using Braille in class required at least 100pt to VII. DISCUSSIONread the texts. An analysis of the findings shows that PS children did have their own preferences for font size, font type, font and TABLE I. FONT SIZE background colour when reading texts from computer screen. Their preferences were affected by their current visual Minimum Maximum Mean Std. Deviation capability limitation. However, the flexible user interface at theTask 1 14 126 39.67 36.758 prototype allowed the participants to change the font size, fontTask 2 14 100 32.00 26.202 type, font colour and background colour.Task 3 14 100 30.33 24.714 Apparently, large font size was required for PS children toTask 4 14 100 32.00 24.628 read the texts easily. PS children with visual acuity between 20/40 and 20/200 required 14pt to 40pt of font size and those 171

with visual acuity 20/400 required 100pt to 120pt of font size REFERENCESregardless of font type. [1] AgeLight LCC. (2001). Interface Design Guidelines for Users of All Among the four font types tested in the study, only Arialand Comic Sans MS were selected as the most preferred. In Ages. [Online]. Available:addition to the findings, it was also found that Comic Sans MSwas most preferred for reading passages and Arial was most http://www.agelight.com/webdocs/designguide.pdf. [Accessed Feb. 3,preferred for reading words. When the participants were askedwhy they chose Comic Sans MS and not other font types, they 2010].replied that they always saw the font in school books. [2] Bernard, M., Mills, M., Frank, T. and McKown, J. 2001. Which Fonts This study also proved that black text on white background Do Children Prefer to Read Online? [Online]. Usability News. Softwarewas the most preferred by PS children for reading purposes. Usability Research Laboratory. Vol. 3 Issue 1. [Online]. Available:As a matter of fact, the finding of this study supports some http://www.surl.org/usabilitynews/31/fontJR.asp. [Accessed Feb. 3,guidelines [1,3,15] that are recommended for user interface 2010].design for visually impaired people. [3] Caldwell, B., Cooper, M. Reid, L. G. and Vanderheiden, G. (2008, Overall the study showed that even though the PS children December 11). Web Content Accessibility Guidelines (WCAG) 2.0.had different visual acuity, they manage to easily access and [Online]. Available: http://www.w3.org/TR/WCAG20/. [Accessed Oct.read the texts with flexible user interface. In fact, two 1, 2010].participants that used Braille in class can still read the textswith proper adjustment at the user interface. [4] Corley, G. and Pring, L. 1993. Partially Sighted Children: The Visual Processing of Words and Pictures. Paper Presented at the British VIII. CONCLUSIONS AND RECOMMENDATIONS Educational Research Association Conference (1993). This study will significantly help many people such asparents, teachers, software designers as well as governments to [5] Dini, S., Ferlino, L., Gettani, A., Martinoli, C. and Ott, M. 2006.make the best decision in planning for PS children in theireducation. Even though many studies on user interface design Educational Software and Low Vision Students: Evaluating Accessibilitypreferences had been conducted earlier but most of the studiesfocused on adults with low vision and children with normal Factors. [Online]. Available:vision. This study focused on children with partial sight.Finally, from the findings of this study, it is concluded that http://www.springerlink.com/content/8vg5123213801488/fulltext.pdf.specific interface design guidelines or a customisable userinterface is required for PS children rather than simply relying [Accessed Nov. 16, 2009].upon general design guidelines. It is also necessary to involvethese children in the design process in order to develop better [6] Early Childhood Newsletter. 2001. Do Computers Hinder Youngguidelines. Children's Development?. [Online]. Available: IX. LIMITATIONS Several limitations to this study should be reported. Since http://www.brookespublishing.com/email/archive/june01/june01EC4.htthe study looks at PS children from the age of 7 - 12 who canread from the computer screen, it is therefore hard to find a m. [Accessed Feb. 3, 2010].large sample size. In addition, to get the answers for questionnaires, the [7] Lanyi C.S., Matrai, R., Molnar G. and Lanyi Z. 2005. User Interfaceresearcher had to do face-to-face type of interview. Based on Design for Visually Impaired Children. [Online]. Available:the respondents’ answers, the researcher ticked the most http://www.springerlink.com/content/t16692514w777070/fulltext.pdf.appropriate answer in the questionnaire. This might create [Accessed Nov. 11, 2009].biasness in getting the data. [8] Liu, S., Wei M., Schalow, D. and Spruill, K. 2004. Improving Web ACKNOWLEDGMENT Access for Visually Impaired Users. [Online]. Available: The authors thank the schoolchildren and the teachers of http://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=1324570&usthe Special Education Integration Programme for visually erType=inst. [Accessed Nov. 17, 2009].impaired children of Sekolah Kebangsaan Ayer Keroh,Melaka, Malaysia and Sekolah Kebangsaan Sungai Kantan, [9] Martin, S. 1997. Effective Visual Communication for Graphical UserKajang, Selangor, Malaysia for their cooperation. Interfaces. [Online]. Available: http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html . [Accessed Feb. 9, 2010]. [10] Moore, J. E. and LeJeune, B. J. 2010. Low vision. [Online]. Available: http://cirrie.buffalo.edu/encyclopedia/article.php?id=17&language=en. [Accessed Feb. 2, 2010]. [11] Nousiainen, T. & Kankaanranta, M. (2008). Exploring children’s requirements for Game-Based Learning Environments. Hindawi Publishing Corporation. Advances in Human-Computer Interaction. Volume 2008, Article ID 284056, 7 pages. [12] Reece, G.A., Rafieetary, M., Eubank, T. and Lowther, D.L. 2008. Preferences of Reduced Vision Reader for Serif and Italic Presence on Electronic Displays. Association for Education and Rehabilitation of the Blind and Visually Impaired Journal: Research and Practice in Visual Impairment and Blindness. [13] Stone D.L. and Stone D. 2005. User interface Design and Evaluation. [Online]. Available: http://www.elsevierdirect.com/companions/9780120884360/casestudies/ Chapter_01.pdf. [Accessed Feb. 9, 2010]. [14] Taslim, J., Wan Adnan, W. A. and Abu Bakar, N. A. 2009. Investigating Children Preferences of a User Interface Design. HCI International 2009. Proceedings of the 13th International Conference on Human- Computer Interaction, San Diego, CA, USA, July 19-24, 2009. Springer, Heidelberg, Germany. [15] Web Accessibility Initiative (WAI). (2009). [Online]. Available: http://www.w3.org/WAI/. [Accessed Oct. 1, 2010]. [16] Welie, M. V., Veer, G. C. V. D. and Eliens, A. 2007. Breaking down Usability. Faculty of Computer Science, Vrije Universiteit 172

Amsterdam de Boelelaan 1081a, 1081 HV. [Online]. Available: 2010].http://www.welie.com/papers/Interact99.pdf. [Accessed Feb. 3, 173