The Impact of Design and Aesthetics on Usability, Credibility, and Learning in an Online Environment
Macon State College
Central Georgia Technical College
This article surveys research in the areas of aesthetics and design, usability, visual aesthetics in education, and recent statistics related to online education. The focus of the article is on defining the role of visual content and aesthetics in the user interface and exploring what importance aesthetics and visual content have to education. Research has demonstrated that aesthetics plays an important role in shaping user responses to products and websites. Users also draw on aesthetic factors to judge usability and credibility. In the technology setting of online classes, it is therefore important for educational institutions and faculty to consider the educational function of visual content and the aesthetic judgments that are being made by students. Including visual content and applying aesthetic standards during online course development can ultimately improve not only the visual appearance of course content but can also improve how students react to and interact with those courses.
American and global cultures are innately visual, and visual methods of communication predate written language. There are cave paintings in France are estimated to be 16,000 years old (Cooper & Holman, 2008). There are few aspects of our daily lives that do not involve a visual component. Technology has allowed for access to visual media such as digital media, video games and television in a way that young adults have integrated these media into their daily lives (Glore, 2010). Internet content and Web 2.0 features like social networking, wikis, blogs (Weblog) and vlogs (video Weblog) are also very visual (O’Reilly, 2005). Visual elements thus clearly have a place in global culture, but do design and aesthetics affect how products are used, valued, and perceived? Are visual elements important to higher education?
Why do Design and Aesthetics Matter?
The first step in understanding the function of visual media in the technology culture is to define aesthetics and design. The digital aspects of aesthetics and design are not merely photos or graphics displayed on a screen, but are the method of deliberately arranging elements to appeal to the senses or emotions of the user; or the act of creating something that has not or does not exist (Batiha, Al-Slaimeh & Besoul, 2006). As part of the design process both aesthetic and functional considerations are evaluated, which requires considerable research, consideration, modification and redesign (Brinkkemper, 1996).
Some interface experts are suspicious of the role played by the visual aesthetics, and many academics consider polished, visually elaborate content to be a method for hiding poor scholarship (Lynch, 2009). Critics of visual design often quote eyetracking studies like those done by Jakob Nielsen as proof that content rather than design is important. Nielsen’s (2000) study did demonstrate that large graphics may not attract gaze fixations (78% of users looked at textual content first), but it failed to conclusively demonstrate that the graphics served no purpose in establishing an aesthetic tone and didn’t take context into consideration (Lynch, 2009). Anderson (2009) explains that the distinction between “how something looks and works is sometimes artificial” (para. 2).
Anderson (2009) suggests that the language commonly used to describe design by those in the technology field like “eye candy”, “skinning a design”, and “styling,” serves to limit the importance of visual design and separates aesthetics from usability. Are aesthetics and usability truly separate? There is a significant amount of research that supports the view that design, aesthetics and usability are inexorably linked (Alsudani & Casey, 2009; Fogg et al, 2003; Lindgaard, Fernandes, Dudek, & Browñ, 2006; Norman, 2002; 2004; Tractinsky, Katz & Ikar, 2000; Tractinsky, 2006; Zhang, 2009). But how are they linked?
Aesthetics is a branch of philosophy associated with art and beauty (Zhang, 2009) and is concerned with how individuals perceive objects or make judgments based upon information received as five human sensory inputs (Anderson, 2009). Aesthetics is also associated with affect, or mood, emotion, and feeling (Zhang, 2009). It is this perception and affective/emotional connection that make aesthetic concerns that much more important. Aesthetics essentially act as the bridge between a product and the user’s emotion and feeling.
Fogg et al. (2003) found that over 45% of consumers made judgments about the credibility of websites based on the site design, “including layout, typography, font size, and color scheme (p. 5).” Studies have found that users make these judgments about visual stimulus in a very short amount of time (Alsudani & Casey, 2009). Robins and Holmes (2008) found that subjects judge the credibility of the content of a website based on its appearance in 3.42 seconds.
Several studies have demonstrated that aesthetic judgments also affect a system’s perceived usability (Mbipom & Harper, 2009; Tractinsky, Katz & Ikar, 2000). These studies have demonstrated that from the user’s perspective “what is beautiful is usable” (Tractinsky et al, 2000, p.129), and this correlation between aesthetics and usability remained strong in post-use evaluation.
In addition to his eye-tracking studies, Nielsen (1994) has also written in support of intuitive appeal in product success. Nielsen admits that he was unable to make himself learn to use an ugly spreadsheet application, and goes on to explain the essential role of design in creating the first and last part of the user interface experienced by the user.
Donald Norman (2002, 2004) has written extensively on the connection between emotion and design. Norman (2004) studied both emotional responses to stimuli, or affective responses, and cognitive responses. He identified a three step process as being involved in both affective and cognitive responses: 1) visceral processing, 2) behavioral-level processing, and 3) reflective processing. Visceral processing is the most basic level response. It is instinctive and happens almost instantly upon exposure to stimuli (Norman, 2004). Behavioral processing is influenced by an individual’s past experiences, and consists of a user’s response to how a product functions and performs. These responses take place over the course of seconds or minutes (Alsudani & Casey, 2009; Lynch, 2009). Reflective processing is the most complex process and often involves assigning an overall value to the product or stimulus (Norman, 2004). Visceral reactions can take several seconds to reach conscious thought, but at a pre-conscious level they make users “predisposed to find a beautiful design easy to use – an effect that lingers long after the conscious behavioral and reflective levels of processing kick in (Lynch, 2009, para. 15).”
Most popular consumer electronic device reviews, like those for the iPhone™ (CNET, 2007; PCWorld, 2009), tout the beauty of the design, intuitive visual interface, and sharp graphics. Notably the iPhone™ reviews tend to mention the less than optimal performance of the phone or phone network. This is significant because the final recommendations for this smart phone were “Excellent” in spite of the fact that the phone component did not perform to expectations in tests. The iPhone™ has become an international product success regardless. It could certainly be argued that it if this product were less attractive or aesthetically appealing it would not have met with the same level of success. “Minor problems in the design are overlooked…In other words, when we feel good, we overlook design faults…Attractive things work better (Norman, 2002, p. 41).”
Of What Importance Are Design, And Aesthetics To Educators?
This paper has sought to demonstrate that aesthetic qualities do have an effect on a user’s perceptions, but until now has not addressed what learning implications aesthetics and design may have. Put simply is there research to support design, and aesthetics as relevant to learning?
There is substantial evidence that pictures, graphics and/or visual images do play a critical role in learning (Hiebert, 2009). The old adage tells us that a picture is worth a thousand words. The intent of this aphorism is to explain that a single image can be used to aid the user’s visualization, leading to a better understanding of the material (Glore, 2010; Hauske, 2007; Mupringa, Nora & Yaw, 2006) and in combination can convey ideas more easily than textual descriptions alone (Mupringa et al., 2006). Numerous studies with both visual and video-based imagery have demonstrated that student engagement and grasp of conceptual information is improved when they are exposed to visual content (Glore, 2010; Vaughn et al., 2009; Scribner, 2007; Margueratt, 2007, Huett, 2006; Anglin, Towers & Levine, 2001).
Web 2.0, and the emerging Web 3.0, applications are the most recent visual technologies to enter into the online learning environments. Web 2.0 technologies maintain common characteristics like user participation and some type of user controlled data (McGee & Begg, 2008; O’Reilly, 2005), and the potential educational advantages of these tools are dependent on their visual and participatory nature (McGee & Begg, 2008; Alexander, 2006). Even though the Web 2.0 tools do offer visually stimulating content, the entertainment of students is not the objective of educators who incorporate these technologies into their courses. Fostering collaboration is the goal most often cited by faculty for utilizing the Web 2.0 technologies (McGee & Begg, 2008; Alexander, 2006). Students are using social bookmarking sites like delicious.com as a method for increasing collaborative research (McGee & Begg, 2008; Alexander, 2006). Web-based productivity tools like Google Docs™ are being used to promote collaborative writing in traditional and online courses (Ferris & Wilder, 2006). Duke University’s Digital Initiative encourages instructors to incorporate micro-projectors, flip phones, iPods™, Twitter™, VoiceThread, and WordPress™ functions into their classes (Duke Digital Initiative, 2010).
The usage of these technologies is significant since distance education enrollments are increasing (Allen & Seaman, 2010), and the Web 2.0, and the emerging Web 3.0, technologies are used heavily by young adults. Seventy-two percent of young adults currently use social network sites to some degree (Lenhart, Purcell, Smith, & Zickuhr, 2010). This statistical population represents the current and future online student population, and for that reason alone Web 2.0 is relevant. Add to that factor the increased engagement afforded by working with the Web 2.0 technologies and it becomes clear that Web 2.0 has something to offer the online educator and student (Alexander, 2006).
There has been extensive research supporting the connection between aesthetics and usability (David & Glore, 2010), and much can be found about aesthetics education, with limited formal research on aesthetics in education (Hancock, 2004). Over 4.6 million U.S. higher education students were taking at least one online course in fall 2008 (Allen & Seaman, 2010). The student percentage represents a 17% increase over the previous year, and the increase is likely to continue as more schools begin offering more online courses (Allen & Seaman, 2010) and each of those people were making judgments about the credibility, and usability of their courses based in-part on aesthetics of class web content (Alsudani & Casey, 2009; Tractinsky, Katz, & Ikar, 2000; Fogg et al., 2003). Participants in studies by Scribner in 2007 and Glore in 2010 reported that the aesthetics of a course, particularly the layout, the use of graphics, and the ease of use, were important in motivating them to engage and persist in web-based learning. As such it is increasingly important that educators consider aesthetic qualities when developing course materials.
Hancock (2004) devised and tested a specific set of aesthetics standards for online courses and studied their effects on students. He began by focusing on developing quality course content and then distributed the content through a web-based course management system. The courses involved in Hancock’s study included several subject areas: Art, Advanced Surveying, and Sociology. The control courses were designed to be aesthetically neutral rather than deliberately negative versions of each class. The experimental courses were designed to be more aesthetically pleasing. The more aesthetic versions were compiled using Hancock’s (2004) list of standards which included considerations like item alignment and placement, image usage, color choice and usage, as well as font size and type. Though the data differences in the control and experimental opinion surveys were considered modest, they were consistently higher for all questions (including that of anticipated GPA) in the aesthetic group (Hancock, 2004). It should be noted that only one of the 11 questions specifically addressed the attractiveness of the course. The students in the control group also had relatively positive scores related to the course quality though they were lower than those from the students in the experimental group. This supports the idea that both aesthetic quality and content quality are critical. “Good design means that beauty and usability are in balance” (Norman, 2002, p.42).
Are good aesthetics currently being used in online content? There is at present no definitive data on aesthetics usage in online courses, but there is some information available on online course content types and instructor attitudes. A National Center for Education Statistics report (Parsad & Lewis, 2008) found that 98% of schools were using asynchronous web technologies for their distance education courses (with 92% using those technologies in a large to moderate extent). The asynchronous technologies were defined as “not in real-time” and specifically excluded audio and video technologies, thus we are looking at the vast preponderance of online course content being somewhat static web-based information. Eighty-five percent of online instructors reported that online course development requires significantly more time than traditional classroom preparation, and faculty also expressed concerns about support for online teaching (Seaman, 2009). McCarthy & Samors (2009) found that institutional resources and support often fall short of the level required to encourage the broadest possible engagement of faculty in online learning environments. The likely result is that elements that are considered nice to have but not necessary, like aesthetics, are neglected or implemented less than professionally.
At least one aesthetic concern is currently beyond the control of most individual educators or even individual schools or systems: the aesthetic of the e-learning platform. The main criterion for using and choosing e-learning platforms has been usability and tool options. The aesthetic qualities and sensory considerations have been in many cases absent (Stenalt & Godsk, 2006) with most e-learning systems offering only a “few options for creating an aesthetic visual environment (Hancock, 2004, p. 14).” In a survey of course administrators, Stenalt and Godsk (2006) found that 47% of the participants felt the e-learning platform offered only limited possibility of customization while 82% felt that design and layout was critical for user engagement.
The same attitudes and support limitations that likely restrict aesthetics implementation in online learning environments also likely limit the inclusion of optimal visual content in those courses such as Web 2.0 features. When compounded with the concerns of the limitations of an e-learning platform, a situation arises that many educators currently experience: a course that is automatically limited by what is easiest to create and distribute through an institutional mandated e-learning platform. Web 2.0 features such as social software, user-centered design, and collaborative tools are being increasingly implemented within higher education. E-learning platforms need to similarly change to support the Web 2.0 technologies and allow for greater aesthetic control (Stenalt & Godsk, 2006), and higher education should strive to provide an improved level of support for faculty with the end goal of enhancing course quality both aesthetically and functionally (McCarthy & Samors, 2009).
Quality standards for online courses are continually being scrutinized, researched and refined by many individual institutions (Chao, Saj & Tessier, 2006). These standards should include guidelines on the seamless inclusion of visual content and aesthetic considerations (David & Glore, 2010; Hancock, 2004). One such set of guidelines that are increasingly being used by intuitions are those set forth in the Quality Matters Program (Maryland Online, 2010). Stavrinoudis & Xenos (2007) found that users with higher experience levels in the online educational environment judged content, navigation, and aesthetics more critically than less experienced users. They also noted that greater exposure to the environment converted novice users to a higher level (Stavrinoudis & Xenos). This supports the logical view that any quality criteria that are developed will need to continue to evolve as both student expectation and technology evolve.
Visual imagery has an important role to play in global entertainment, communication, and education. Images can convey complex concepts in a succinct manner, and visual tools such as video and Web 2.0 and 3.0 technologies can improve understanding and foster peer collaboration. Design and aesthetics have a profound impact on how users perceive information, learn, judge credibility and usability, and ultimately assign value to a product. To dismiss design as merely visual is to make a fundamental mistake. Style does not replace substance, but style and substance in balance work much better.
Online courses are becoming increasingly important to higher education institutions. It is therefore important that visual and aesthetic concepts be considered in both course design and e-learning platform design and selection. Insufficient focus on aesthetics and inadequate levels of faculty support currently prevent aesthetics design from being fully implemented.
Support for design and aesthetic implementation can be accomplished through two options: using full-time instructional designers, or training for the existing faculty and staff. Dedicating full-time staff members to instructional design allows them to focus on the task at hand while training existing faculty and staff stretches the efforts of that staff member not allowing them to focus on their primary job well. When of creating an aesthetical environment, the staff or faculty members need a good sense of visual design, possibly through formal graphic design channels. In many cases, the faculty members who are already teaching online do not have formal training, or background in instructional design, or the related technologies, necessary to successfully implement principles of design and aesthetics.
There are several options for training, including “college-level” courses for credit and non-credit courses, and courses for certification. For example, The University of West Georgia has certifications available in several areas of distance/online learning and training. Regardless, there must be institutional support due to the training being costly and time intensive for each faculty or staff member that undergoes the training.
Building design and aesthetics into the instructional designing process takes time and will probably not be perfect the first time materials are developed. The process is iterative and varies based on the content, students and faculty. Personal experience indicates that when an individual acts as both instructor and instructional designer, it may take at least three terms to become invested in the design aspect of the course and grasp the communications abilities of the faculty and students involved. Acting only as an instructional designer, the process may take longer depending on the input and feedback of the faculty and the faculty’s willingness to actively participate in the process.
Alexander, B. (2006). Web 2.0: A new wave of innovation for teaching and learning? EDUCAUSE Review, 41 (2): 32-44. Retrieved on February 23, 2010 from http://www.educause.edu/ir/library/pdf/ERM0621.pdf
Allen, E. & Seaman, J. (2010). Learning on Demand: Online education in the United States, 2009. Wellesley, MA: The Sloan Consortium.
Anderson, S.P. (2009). In defense of eye candy. A List Apart: For People Who Make Websites, 282. Retrieved from http://www.alistapart.com/articles/indefenseofeyecandy
Alsudani, F., & Casey, M. (2009). The effect of aesthetics on web credibility. In Proceedings of the 23rd British HCI Group Annual Conference on People and Computers: Celebrating People and Technology (p.512-519). Swinton, UK: British Computer Society.
Anglin, G. J., Towers, R. L., & Levie, W. H. (2001). Visual message design and learning: The role of static and dynamic illustrations. In D. H. Jonassen (Ed.), Handbook of research for educational communications and technology, 26, 755-794.
Batiha, K., Al-Salaimed, S. & Besoul, K. (2006). Digital art and design. In K. Markov & K. Ivanova (Eds), Proceedings of the Fourth International Conference: Information Research and Applications, (pp.187-192). Varna, Bulgaria: i.TECH.
Brinkkemper, S. (1996). Method engineering: engineering of information systems development methods and tools. Information and Software Technology, 38(4), p. 275-280.
Chao, T., Saj, T. and Tessier, F. (2006). Establishing a quality review for online courses. Educause Quarterly, 29 (3) 32-39. Retrieved on May 20, 2009 from http://net.educause.edu/ir/library/pdf/eqm0635.pdf
CNET (2007). Apple iPhone – 8GB (AT&T) review. Retrieved from http://reviews.cnet.com/smartphones/apple-iphone-8gb-at/4505-6452_7-32309245.html
David, A. & Glore, P. (2010). The Impact of Design and Aesthetics on Usability, Credibility, and Learning in Online Courses. In J. Sanchez & K. Zhang (Eds.), Proceedings of World Conference on E-Learning in Corporate, Government, Healthcare, and Higher Education 2010 (p. 42). Chesapeake, VA: AACE.
Duke Digital Initiative (2010). Technologies. Retrieved on March 5, 2010 from http://dukedigitalinitiative.duke.edu/page/technologies-1
Ferris, S. & Wilder, H. (2006). Uses and potentials of wikis in the classroom. Innovate 2 (5). Retrieved on February 12, 2010 from http://www.innovateonline.info/index.php?view=article&id=258
Fogg, B., Soohoo, C., Danielson, D., Marable, L., Standord, J., & Tauber, E. (2003). How do users evaluate the credibility of Web sites?: A study with over 2,500 participants. Proceedings of DUX2003, Designing for User Experiences Conference. San Francisco, California. doi:10.1145/997078.997097
Glore, P. (2010). Identifying motivational strategies to engage undergraduate learning in web-based instruction. (Doctoral dissertation, Capella University). Retrieved October 14, 2010, from Dissertations & Theses: Full Text Database. (Publication No. 3422080)
Hancock, D. (2004). Improving the environment in distance learning courses through the application of aesthetic principles (Education Specialist Thesis). Retrieved from http://etd.fcla.edu/SF/SFE0000426/Thesis_Project_Hancock.pdf
Hauske, S. (2007). Instructional Design for Self-Directed E-Learning – Students’ Experiences and Perceptions. In T. Bastiaens & S. Carliner (Eds.), Proceedings of World Conference on E-Learning in Corporate, Government, Healthcare, and Higher Education 2007 (pp. 1564-1570). Chesapeake, VA: AACE.
Hiebert, E. (2009). High-leverage action #3: A picture is worth a thousand words. Retrieved from http://www.textproject.org/franklyfreddy/high-leverage-action-3-a-picture-is-worth-a-thousand-words
Huett, J. (2006). The effects of ARCS-based confidence strategies on learner confidence and performance in distance education. (Doctoral dissertation, University of North Texas). Retrieved May 6, 2008, from Dissertations & theses: Full Text Database. (Publication No. 3214480)
Lenhart, A., Purcell, K., Smith, A. & Zickuhr, K. (2010). Social media and young adults. Pew Internet & American Life Project. Retrieved on March 13, 2010 from http://www.pewinternet.org/Reports/2010/Social-Media-and-Young-Adults.aspx
Lindgaard, G., Fernandes, G. Dudek, C. & Browñ, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression!. Behaviour and Information Technology, 25(2), 115-126. doi: 10.1080/01449290500330448
Lynch, P. (2009). Visual decision making. A List Apart: For People Who Make Websites, 286. Retrieved from http://www.alistapart.com/articles/visual-decision-making/
Margueratt, D. (2007). Improving learner motivation through enhanced instructional design. (Master's thesis, Athabasca University). Retrieved September 30, 2008, from http://auspace.athabascau.ca:8080/dspace/bitstream/2149/1041/1/MDE_dennismarguerattThesis.pdf
Maryland Online, Inc. (2010). Underlying Principles of Quality Matters. Retrieved December 1, 2010 from http://www.qmprogram.org/research-grants/fipse/principles.
Mbipom, G., & Harper, S. (2009). Visual Aesthetics and Accessibility: Extent and Overlap. Human Centred Web Lab, School of Computer Science. (Unpublished) Retrieved September 14, 2010 from http://wel-eprints.cs.manchester.ac.uk/82/1/Aesthetics_Accessibility_Extent_Overlap.pdf
McCarthy, S. & Samors, R. (2009) Online Learning as a Strategic Asset: Volume I: A Resource for Campus Leaders. Washington, DC: Association of Public and Land-grand Universities.
McGee, J., & Begg, M. (2008). What medical educators need to know about "Web 2.0". Med Teach, 30(2), 164-9.
Mupringa, D., Nora, R. & Yaw, D. (2006). The learning styles, expectations, and needs of online students. College Teaching, 54(1), 185-189.
Nielsen, J. (1994). My foreword to Mullet and Sano's book on visual design. Retrieved from http://www.useit.com/books/mullet_sano_foreword.html
Nielsen, J. (2000). Eyetracking study of web readers. Alertbox. Retrieved from http://www.useit.com/alertbox/20000514.html
Norman, D.A. (2002). Emotion & design: Attractive things work better [Electronic Version]. Interactions Magazine, 9(4), 36-42.
Norman, D.A. (2004). Emotional design: Why we love (or hate) everyday things. New York, NY: Basic Books.
O’Reilly, T. (2005). What is Web 2.0: Design Patterns and Business Models for the Next Generation of Software. Retrieved from http://oreilly.com/web2/archive/what-is-web-20.html.
Parsad, B., and Lewis, L. (2008). Distance Education at Degree-Granting Postsecondary Institutions: 2006–07 (NCES. 2009–044).
PCWorld (2009). Apple iPhone 3G smart phone. PCWorld. Retrieved on December 10, 2009 from http://www.pcworld.com/reviews/product/31941/review/iphone_3g.html
Robins, D. & Holmes, J. (2008). Aesthetics and credibility in website design. Information Processing and Management, 44, p. 386-399.
Scribner, D. (2007). High school students’ perceptions: Supporting motivation to engage and persist in learning. (Doctoral dissertation, Capella University). Retrieved February, 28, 2008, from Dissertations & Theses: Full Text Database. (Publication No. 3288869)
Seaman, J. (2009). Online learning as a strategic asset: Volume II: Paradox of faculty voices: Views and experiences with online learning. Washington, DC: Association of Public and Land-grand Universities.
Stavrinoudis, D. & Xenos, M. (2007). The influence of aesthetics and content structuring to e-Learning systems’ users behavior. Proceedings of 11th Panhellenic Conference on Informatics, (pp. 551-558). Patras, Greece. Retrieved from http://quality.eap.gr/Publications/XM/Conferences%20English/C46%20-%20Influence%20to%20E-Learning%20Systems.pdf
Stenalt, M. & Godsk, M. (2006). The pleasure of e-learning: Towards aesthetic e-learning platforms. Proceedings of the 12th International Conference of European University Information Systems, (pp. 210-212). Tartu, Estonia. Retrieved from http://www.au.dk/fileadmin/www.au.dk/e-laeringsenheden/e-laering_og_ikt/publikationer/thepleasureofe-learning.pdf
Tractinsky, N., Katz, A., & Ikar, D. (2000) What is beautiful is usable [Electronic Version]. Interacting with Computers, 13(2), 127-145.
Tractinsky, N. (2006). Aesthetics in information technology: Motivation and future research directions. In Zhang P. and Galletta, D (eds.), Human-Computer Interaction and Management Information Systems: Foundations (pp. 330-347). New York, NY: M.E. Sharpe.
Vaughn, S., Martinez, L., Linan-Thompson, S., Reutebuch, C., Carlson, C., & Francis, D. (2009). Enhancing social studies vocabulary and comprehension for 7th grade English language learners: Findings from two experimental studies. Journal of Research on Educational Effectiveness, 2, 297–324. doi: 10.1080/19345740903167018
Zhang, P. (2009). Theorizing the relationship between affect and aesthetics in the ICT design and use context. Proceedings of the 2009 International Conference on Information Resources Management, (pp 1-15). Dubai, United Arab Emirates.
Online Journal of Distance Learning Administration, Volume XIII, Number IV, Winter 2010
University of West Georgia, Distance Education Center
Back to the Online Journal of Distance Learning Administration Contents