THE INFLUENCE OF VISUAL DESIGN ELEMENTS ON WEB-BASED LEARNING INTERFACE APPEARANCE

Transcription

1 THE INFLUENCE OF VISUAL DESIGN ELEMENTS ON WEB-BASED LEARNING INTERFACE APPEARANCE Zuriana Abu Bakar School of Informatics and Applied Mathematics University Malaysia Terengganu Phillip D. Long Centre for Educational and Innovation and Technology (CEIT) The University of Queensland ABSTRACT In a Web-based learning environment, learning materials are delivered through a Web browser. Thus, the appealing of the system interface is crucial in order to attract and further encourage students to explore the learning materials. Visual design is a field that is responsible for shaping the appealing of interfaces. Thus, this study aims to identify the visual design elements that could influence the appealing of interfaces based on the students preferences. There were five design elements considered in this study to construct the interfaces which were font colour, background colour, font type, font size, and line height spacing. This study took a quantitative research approach that involved survey questionnaire. The results demonstrated that the background colour was the most influencing element in determining the appealing of interfaces. Additionally, there were nine factors that caused each element to be chosen as the most influencing element. Field of Research: User interface, visual design, design elements, visual appealing, web-based application Introduction In the millennium age, Web-based learning becomes an essential educational medium to transfer skills, information and knowledge. The effectiveness of learning and e-learning (Web-based learning) interface design is substantially interconnected (Levy & Yupangco, 2008). This is because in the Webbased learning environment (assuming an asynchronous approach), learning materials are delivered through a Web browser and the instructors or lecturers are not directly conveying information and learning materials to the students. Thus, the way learning materials are presented to students in Web-based learning environments has changed the interaction mode from human-human interaction (traditional learning) to human-computer (system) interaction. In human-computer interaction, the student needs to interact with the software interface in order to perform learning activity. Hence, the user interface of a Web application plays an essential role to ensure that the learning interaction and process is successful in Web-based learning environments. This is because the interface of an application is the first thing the students see when browsing the Web-based learning application. A study by Lindgaard, Fernandes, Dudek, & Brown (2006) WorldConferences.net 150

2 discovered that it took only 50 milliseconds for people to determine whether they like or dislike the webpage they were presented with, and that this decision was attributable to the page s visual appeal. This study reveals how quickly the beauty of webpage attracts users to use the application. In the learning context, a user interface is a pathway in which the instructor or designer communicates with the learner (Cheon & Grant, 2009). Designing a usable and appealing interface is still a challenging task for instructional designers (Chalmers, 2003). As Ardito et al.(2006) pointed out that, the challenge of designing the user interface is to provide an easy interaction that could grasp the students interest. A good interface design (considering colour, text format and size) would encourage people particularly students to explore further into that learning website (Lin & Gregor, 2006). On the other hand, poor interface design could hinder learning by causing students to spend more time on learning, and thus becoming a barrier to effective learning (Ardito et al., 2006; Cheon & Grant, 2009) and subsequently, affecting (Lin & Gregor, 2006) and disengaging students (Hedberg & Metros, 2006). Thus, the look and feel of online educational systems and applications are crucial elements to be considered in the study, especially if one takes into account the fact that the computer interface is the primary channel through which learners interact with the learning environment. A visual design plays an important role in the appearance of the system interface. Therefore, the present study intends to identify which visual design elements including font colour, background colour, font type, font size and line-height spacing that most influence the students when selecting the appealing interface for Web-based learning applications. This study attempts to answer the following research questions: i. Which design element has the most impact on the selection of appealing interfaces? ii. What are the factors that have been considered in selecting the design elements that contributed to the appealing interfaces? The remainder of this paper is organized as follows. The extensive research background is explained in Section 2. Section 3 discussed the previous related work. The methodology adopted for this research is described in Section 4. Then, the results and discussion are followed in Section 5. Finally, concluded with the conclusion in Section Research Background This section describes the design considerations related to the present study including the visual design and its elements such as colour, typography, and so forth. 2.1 Visual Design Visual design is a field that is responsible for providing the graphic treatment of the interface in order to achieve the appealing of interfaces (Garrett, 2003). In general, visual design is interested in arranging information items (for example, text images, diagrams, pictures, tables) in such a way that the items are visually attractive, perceptive and easily understandable (Vanderdonckt, 2003). The basic components of visual design can be grouped into two main categories, which are the principles and the design elements. This study is focusing on visual design elements. WorldConferences.net 151

3 2.2 Visual Design Elements In this study, visual design elements were used to generate the appearance of the interfaces. This section discusses the visual design elements selected for this study. Visual design elements (or simply referred to as design elements ) make up every interface application that is built. The harmonised combination of visual design elements makes interfaces look effective and attractive. There are numerous design elements involved in creating an interface design, including points, lines, form (shape), texture, space, colour, typography, pattern and movement (McClurg-Genevese, 2005). The present study focused on typography and colour elements. Typography was selected as one of the elements to build up an interface because most websites are heavily text-based (Ling & Schaik, 2006). Text supports unspoken or voiceless communication (Beaird, 2007). In addition, 95% of what is commonly referred to as Web design is typography (Reichenstein, 2006). With regard to colour, this element has one of the strongest influences over the appearance of a Web interface and it can enhance the aesthetic of a webpage (Hall & Hanna, 2004; Stocks, 2009). Colour also can be used to attract attention, group elements, and indicate meaning (Levy & Yupangco, 2008). Hence, due to these reasons, this study concentrated on two design elements in creating the appearance of the interfaces. Colour was applied to the text and background of the pages and the typography elements considered included the font type, font size and line height (vertical spacing). These typography and colour elements are discussed further in the following sections Typography The Cascading Style Sheets (CSS) properties offered many choices of typographic elements that can be employed in designing the appearance of interfaces. For example, the typography properties in CSS include text-indent, text-align, text-decoration, text-shadow, text-transform and many others. Due to having a lot of options of typographic elements, it was not feasible to test every combination of elements. Subsequently, three typography elements needed to present the content were selected, namely, the font type, size and line height. Fonts can be grouped into six generic font family categories: serif, sans serif, cursive (handwritten), novelty (fantasy), monospace, and dingbats (Beaird, 2007). Serif and sans serif fonts were designed specifically for computer or screen display (Bernard, Lida, Shannon Riley, Hackler, & Janzen, 2002). For this reason, this study considered the serif and sans serif font families in creating stimuli pages since this study focused on the screen display in general and the Web medium in particular. The font size is an important element in the typography category since this variable is among the most commonly used webpage design variables for achieving appearance affects (Schmidt, Liu, & Sridharan, 2009) and to determine the legibility of the text (Sklar, 2006). Text that is too small is hard to read, but text that is too big takes up too much space. The most popular font sizes for Web body pages (content) range between 12 pixels (px) and 16 pixel (approximately between 9 points and 12 points) (Read, MacFarlane, & Casey, 2002). Previous studies have reported the default font size in most Web browsers is 16 pixels (Beaird, 2007; Teague, 2009). Many typographic decisions are based on text spacing. There are two types of text spacing, namely, horizontal and vertical spacing. In print design language, the vertical space (white space) between lines of text is known as leading (Beaird, 2007). A number of studies used the term interlinear spacing, in turn vertical spacing and line height. The line height is the space from the baseline of one WorldConferences.net 152

4 line of text to the baseline of the next line of text, and it is not the space between lines of text (Teague, 2009). Text with added vertical space is much easier to read because adding vertical space means inserting additional white space between the line texts. On the computer screen, increasing the white space helps guide the user along the line of text and provides rest for the eye (Sklar, 2006). However, the line height element is often overlooked (that is, is not specified) in reports of studies with varying other typographic features (Bernard et al., 2002). Van Merriënboer and Ayres (2005) highlighted that more recent display technology permits a finer grained measurement of interlinear spacing than single and double spacing, but there does not seem to have been recent empirical studies of this variable. Therefore, due to the insufficient consideration of line height in the prior research, this element was taken into consideration in the present study. This was because line height is an important element in forming Web interfaces generally, and educational websites specifically. Without the line height property, the text is less legible and readable Colour Colour was applied for the text and background of the stimuli pages in the present study. The colour can be divided into three categories: primary, secondary and tertiary colours. The three primary colours are red, blue and yellow. These three primary colours are not made from a mixture of other colours. A secondary colour is made up from mixing equal amounts of any two primary colours. These colours are orange, violet and green. Blending equal amounts of a primary and a secondary colour produces a tertiary colour. The red-violet, blue-violet, blue-green, yellow-green, yelloworange, and red-orange are the six tertiary colours. 3. Previous Related Works In a growing body of literature there are numerous studies that have been performed to measure the visual appeal of web pages based on visual design elements as presented in Table 1. Table 1: Literature in the field of visual appeal judgment based on design elements Author(s) Ivory (2001) Laarni (2004) Faria & Oliveira (2006) Ramadan (2011) Design elements measured Measured eleven metrics word count, body text (%), emphasised body text (%), text positioning count, text cluster count, link count, page size, graphic (%), graphics count, colour count, font count. Measured three factors of visual quality colour (text/background colour combinations), font type, word style. Measured eight elements page cover, text font size, text font colour, text font family, horizontal position, vertical position, horizontal distortion and vertical distortion. Measured four elements - Arabic typeface style, font size, page layout and foreground/background color combinations of e-book materials. WorldConferences.net 153

5 Additionally, Fogg (in Sutcliffe, 2009) found that the participants reported that visual elements such as layout, use of colour, and typography influenced their impression of site credibility (Sutcliffe, 2009). Therefore, the present study attempts to cope this issue by focusing on the visual appeal of Web learning pages based on the combination of two design elements, namely, typography and colour specifically font colour, background colour, font type, font size and line-height spacing. 4. Research Methodology Questionnaire surveys were conducted to rank the design elements that give most impact on preferred visual appeal selection. In addition, the reasons why the element was identified as the most influential element were obtained from this survey. In this section, the participants in the study, the measures, the materials used, the pilot study and procedure are explained. 4.1 Participants This study involved 40 university students as the test subjects. The sample consisted of 22 females and 18 males. The range of the participants ages was from 19 to 35 years. All the subjects reported normal colour vision and normal or corrected-to-normal visual acuity. Any potential participants with colour blindness were excluded from the experimental procedure. 4.2 Measures As mentioned before, paper-based questionnaires were used to measure the influence of design elements in the interface preference selection. Additional information to explore why that element (one element out of five) was the most influential element in choosing the visually appealing interfaces was also gathered from this questionnaire. This questionnaire consisted of two questions. Question 1 was a closed-ended question. In this question, the participants were required to rank five design elements, ranging from 1 = most impacting element to 5 = least impacting element. Question 2 was an open-ended question. In this question, the participants were required to state the reason why that element was rated as the most influential element in the visual appeal of interface preferences. 4.3 Materials The materials in this study included the handout (printed document) and the stimuli (displayed using the Visual Appeal Preference System). The printed handout was one-page questionnaire that contained two questions regarding the design elements. 4.4 Pilot Study A pre-test questionnaire was conducted in this pilot study. Three postgraduate students agreed to participate in the pilot study. The feedback included queries regarding the clarity of the items or sentences which needed paraphrasing or restructuring. With regard to the comment on the clarity of the sentences, ambiguous words were substituted with clearer expressions. The pilot study data was used to receive feedback on the instrument and was excluded from further analysis. 4.5 Procedure A Web-based system prototype namely Visual Appeal Preference System (VAPS) applied in learning environment was developed to display the stimuli (interfaces) lively to the participants (students). VAPS was able to automatically generate the system interfaces that consisted of five design WorldConferences.net 154

6 elements including font color, background color, font type, font size and line-height spacing. Initially, participants were required to select the appealing interfaces based on their preferences. Then, the questionnaires were distributed to the participants. They generally took not more than five minutes to give their feedback in these questionnaires. 5. Results and Discussion Two results were generated from the questionnaire responses. The details of the results are explained in the following sub-sections. 5.1 Question 1: The ranking of the design elements The direct ranking method was applied to analyze the data obtained from the Question 1 responses. Direct ranking consists of assigning integers to objects, indicating the order of preferences or judgments. If there are k objects, the integers will run from 1 to k. Ranks usually run from 1 to k, with 1 given to the most desired object and k the least (Dunn-Rankin, Knezek, Wallance, & Zhang, 2004). For this question, the rank values were from 1 to 5, in which the value of 1 was assigned to the most influential element and the value of 5 was given to the least influential element. Votes in paired comparison studies are an inverse of ranks (Dunn-Rankin et al., 2004). Total votes are the inverse of total ranks for each element. Therefore, the highest total votes indicated the most influential element in interface preference and the lowest total votes denoted the least influential element. The votes were calculated by the following equation: Votes ( k R k ), where k the number of objects and R k is therank of object k [1] Two responses (out of 40) from Question 1 were dropped due to the inaccurate data entry by the participants. Therefore, 38 responses were left for analysis, subsequently contributing 190 total ranks for each element. The total rankings and votes for the design elements that influenced the selection of the visual appeal of interface preferences are shown in Table 2. Table 2: Ranking and voting of visual design elements Visual Design Elements BC FC LH FS FT Votes Rankings Rankings Note: BC is background colour, FC is font colour, LH is line height, FS is font size and FT is font type. WorldConferences.net 155

7 As can be seen from the results presented in Table 2, the background colour element obtained the least total rankings, which were 70 rankings and the highest voting, which were 120 votes. Both values indicated that the background colour element was at the first ranking or the most influential element in the visual appeal preference selection. The second ranking was the font colour element with 99 rankings and 91 votes. This was followed by the font spacing and font size elements with the ranking values of 106 and 128, respectively, and the voting values of 84 and 58, respectively. The least impactful element that was assigned at the fifth (lowest) ranking was the font type, with 163 ranking value and 27 votes. 5.2 Question 2: Factors that affecting the impactful elements Based on the 38 valid responses to Question 2, the reasons for choosing the most influential elements are summarized and presented in Table 3. There were nine interesting factors that caused each element to be chosen as the most influencing element when selecting the preferred visual appeal of interfaces. The non-shaded boxes represent the reasons/factors that have contributed to the elements as the preferred elements. On the other hand, the shaded boxes illustrate that these factors did not influence those elements. Table 3: Factors of the most influential element in visual appeal preference selection Visual Design Elements Factors for the most impactful element BC FC LH FS FT Readability Draws more attention to the text/develops interest towards the text/changes what the font looks like Dominant part of the web page Influences the vision Comfortableness of the eyes First impressions Influences feelings/mood Easy to identify the words Increasing reading speed Note: BC is background colour, FC is font colour, LH is line height, FS is font size and FT is font type. The results of the present study revealed that the participants chose background colour as the most impactful element. Based on the questionnaire response, their reasons for this choice were readability, drawing more attention to the text, being the dominant part of the page, influencing the eye s vision, comfortableness of the eyes, first impressions and influencing their feelings. Another WorldConferences.net 156

8 possible explanation for why colour was selected as the most impactful element is that users tend to see masses of colour and shape first when they look at a webpage, then graphics, and finally text (Lynch & Horton, 2008). 6. Conclusion In summary, the main purpose of this study is to identify the most influential design elements (background colour, font colour, line height, font size and font type) in selecting the appealing interfaces based on student preferences for a Web Web-based learning application. In addition, the factors that contributed to the most influential elements were also investigated. This study discovered that background colour was the most influencing element in determining the visual appearance preferences among five design elements in the Web-based learning application. As a result, it could be suggested that the background colour was the most dominant component in visual appearance based on the participants preference choices. The next highest rated element was font colour. It is interesting to note that the background colour was strongly associated with the font colour. In addition, the font spacing was ranked as the third important element, followed by font size and font type. In conclusion, from the interface design perspective, the findings of the present study could provide designers with practical evidence-based user interface guidelines, particularly the association between visual design elements and visual appeal. There is a clear need for design guidelines because the designers are challenged to design the interfaces that could attract students interest since they have their own preferences. References Ardito, C., Costile, M. F., Marsico, M. D., Lanzilotti, R., Levialdi, S., Roselli, T., & Rossano, V. (2006). An approach to usability evaluation of e-learning applications. Universal Access in the Information Society, 4(3), Beaird, J. (2007). The principles of beautiful web design. Collingwood, Victoria, Australia: Site Point Pty. Ltd. Bernard, M., Lida, B., Shannon Riley, Hackler, T., & Janzen, K. (2002). A Comparison of Popular Online Fonts: Which Size and Type is Best? Usability News, 4(1). Chalmers, P. A. (2003). The role of cognitive theory in human-computer interface. Computers in Human Behavior, 19, Cheon, J., & Grant, M. M. (2009). Are pretty interfaces worth the time? The effects of user interface types on Web-based instruction. Journal of Interactive Learning Research, 20(1), Dunn-Rankin, P., Knezek, G. A., Wallance, S., & Zhang, S. (2004). Scaling methods (Second ed.). New Jersey, London: Lawrence Erlbaum Associates. WorldConferences.net 157

9 Faria, A. C., & Oliveira, J. B. S. d. (2006). Measuring aesthetic distance betwen document templates and istances. Paper presented at the 2006 ACM Symposium on Document Engineering. Garrett, J. J. (2003). The elements of user experience: User centered design for the Web. USA: Easy Riders. Hall, R. H., & Hanna, P. (2004). The impact of Web page text-background color combinations on readability, retention, aesthetics, and behavioral intention. Behaviour & Information Technology, 23(3), Hedberg, J. G., & Metros, S. (2006). Engaging learners through intuitive interfaces. In D. Hung & M. S. Khine (Eds.), Engaged learning with emerging technologies (pp ). Netherland: Springer. Ivory, M. Y. (2001). An empirical foundation for automated Web interface evaluation. (Doctor of Philosophy), University of California, California, USA. Laarni, J. (2004). Aesthetic and emotional evaluations of computer interfaces. Paper presented at the Aesthetic Approaches to HCI: Proceedings of the NordiCHI 2004 Workshop, Tampere, Findland. Levy, S., & Yupangco, J. (2008). A picture is worth 1000 words: Visual design in e-learning. Learning Solutions: Design Techniques, 1-8. Lin, A. C. H., & Gregor, S. (2006). Designing Websites for learning and enjoyment: A study of museum experiences. International Review of Research in Open and Distance Learning, 7(3), Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology, 25(2), Ling, J., & Schaik, P. v. (2006). The influence of font type and line length on visual search and information retrieval in web pages. International Journal of Human-Computer Studies, 64(5), Lynch, P. J., & Horton, S. (2008). Web style guide: basic design principles for creating Web sites (3rd edition ed.). London: Yale University Press. McClurg-Genevese, J. D. (2005). The principles of design. Digital Web Magazine. Ramadan, M. Z. (2011). Evaluating college students performance of Arabic typeface style, font size, page layout and foreground/background color combinations of e-book materials. Journal of King Saud University - Engineering Sciences, 23(2), Read, J., MacFarlane, S., & Casey, C. (2002). Endurability, engagement and expectations: Measuring children s fun. Paper presented at the Interaction Design and Children, Germany. Reichenstein, O. (2006). The 100% Easy-to-read standard. Retrieved 12 March 2013, from Schmidt, K. E., Liu, Y., & Sridharan, S. (2009). Web aesthetics, performance and usability: Design variables and their effects. Ergonomics, 52(6), WorldConferences.net 158

10 Sklar, J. (2006). Principles of web design (Third ed.). Boston, Massachusetts: Thomson Course Technology. Stocks, E. J. (2009). Sexy web design. Victoria, Australia: SitePoint Pty. Ltd. Sutcliffe, A. (2009). Synthesis Lectures on Human-Centered Informations J. M. Carroll & E. M. Frymoyer (Eds.), Designing for User Engagement: Aesthetic and Attractive User Interface Teague, J. C. (2009). Fluid web typography: Scale and rhythm. Van Merriënboer, J. J. G., & Ayres, P. (2005). Research on cognitive load theory and its design implications for e-learning. Educational Technology Research and Development, 53(3), Vanderdonckt, J. (2003). Visual design methods in interactive applications. In M. J. Albers & B. Mazur (Eds.), Content and Complexity: Information Design in Technical Communication (pp ). Mahwah: Lawrence Erlbaum Associates. WorldConferences.net 159