Employing Affordance-Based Design to Improve the Usability of E-Learning
User Interfaces
Hae-Deok Song
Chung-Ang University Korea
hsonga@cau.ac.kr
Hyungjoo Park
Chung-Ang University Korea
parkhyungjoo@gmail.com

Abstract: Given that a user interface interacts with users, a critical factor to be considered for improving
the usability of e-learning content user interface is to design a more affordable user interface. Most studies
on affordance are limited to the examination for the affordance of e-learning tools rather than thesystematic design of such affordance. Using the approach of Maier and Fadel’s affordance-based design
methodology as a framework, the researchers identified affordance factors, developed affordance strategies
and the user interface, and evaluated the user interface prototype. In addition, the effects of affordance
design strategies on usability were examined. Implications are suggested for designing strategies thatenhance affordances of user interfaces of e-learning contents.

Keywords: Affordance-based design methodology, User interface, E-learning content, Usability

INTRODUCTION
For successful e-learning, a user-centered interface design is critically important because a good design allows
students to access effortlessly to the e-learning contents. Affordances are major factors that need to be considered indesigning a user-centered interface; affordances are inherent properties of an object that induce certain user
behaviors (Gibson, 1979; Norman, 1988). When a learner perceives e-learning content user interface as more
affordable, they are likely to operate the e-learning user interface effortlessly and therefore, to show clearly desiredlearning behaviors.
Most studies on affordance have investigated the affordances of various media such as asynchronous videoconferencing tools(Krauskopf, Zahn, Hesse, 2012), handheld devices (Song, 2011), 3-D Virtual environments(Dalgarno & Lee 2010), and blogs (Robertson, 2011). Although these studies examined educational affordances ofdifferent educational media by exploring users’ perceptions about the affordances and constraints of the media, they
are limited to the examination of e-learning tools affordance rather than systematic design of e-learning tools
affordance.
Several studies have suggested some design strategies that support learning from an affordance perspective. They
include button and icon design to increase interactions between the medium and the learner (Jona, Bell, & Birnbaum,1991), design of learning agents that support active learning by reducing psychological distance from the medium(Johnson & Lester, 2000), and scaffolding strategies that help learners perform actively (Simons & Klein, 2007).
Despite that these strategies attempt to increase learning by actively influencing learners’ behavior, specificaffordances that stimulate learners’ behaviors were not identified and systematically taken into account in thedevelopment process. As an attempt to address this issue, Bower (2007) proposes a methodology for matching theaffordance requirement of learning task with affordances of technology tools. Implicit in this method is thatsimultaneous consideration for the affordance requirements of the tasks and for the affordance availability of thetechnology is needed for improving affordance of e-learning materials. To further develop proper affordance design
strategies, design strategies should be developed from a comprehensive approach. Thus, a systematic approach isneeded to identify and improve affordances that are pertinent to a specific technology for targeted learning tasks.
Maier and Fadal(2009) suggests a method that analyzes, synthesizes, and organizes affordances in the field ofarchitecture. However, little has been conducted in the development of e-learning contents. Therefore, a systematic
approach is needed to develop design strategies that improve e-learning content user interface.

METHODFor successful e-learning, a user-centered interface design is critically important because a good design allows
students to access effortlessly to the e-learning contents. Affordances are major factors that need to be considered indesigning a user-centered
Context
E-learning contents were obtained in this study from the EDUNET Cyber Home Learning System, Korea’s
largest education portal, which supports the distribution and utilization of a diverse range of high-quality educational
content. The subjects were ‘Information Technology Training’ from Information Communication and Technology.
The e-learning content was examined to see how affordable it was in aiding for students to induce the intended
learning actions and how useful it was aiding them to learning content.
Research Design
Starting with the affordance-based design model presented by Maier and Fadel (2009), four main steps werecarried out in this study: 1) identifying affordance structures, 2) identifying affordance design strategies, 3)
developing the new user interface, and 4) evaluating the user interface. For this, ASM was used to identify, analyze,
and refine, and select optimal affordance factors that need to be considered for components of an artifact.
Research Procedure
The researchers employed a series of processes to improve the usability of e-learning content user interface.
A literature review suggested important components of e-learning content and their associated affordance factors.

Eight experts (two professors in Instructional Technology, two professors in Information Technology, two e-learning
design specialists, one e-learning content-development expert, and one elementary-school teacher) were participatedas Delphi experts. They participated in an expert heuristic evaluation to come up with identification of e-learning
content component, e-learning affordance factors, prioritization of the identified affordance factors, andidentification of affordance design strategies. Content validity index was used to prioritize the identified affordance.
Suggested design strategies were incorporated into the development of new user interface. An experimental study
allowed the researchers to determine which affordance features of user interface were improved. The questionnaire
was completed by 171 fifth grade students at an elementary school.
Table 1 Methods, purpose, and numbers of participants in the study
Phase
Identifying affordance
structures

PurposeIdentify components for targetede-learning user interface

Identifying affordance
design strategies

Identify their associated affordance
factors
Evaluate and prioritize affordance
factors

Developing the userinterface prototype
Evaluating the userinterface

Identify design suggestions for
improving affordance
Create a new user interface prototype
Examine effects on usability ofe-learning user interface

Participants
Researchers

Methods
Literature review
DelphiEightexperts
whose
specialty is related withe-learning content userinterface

DelphiContent
index

Researchers

Affordance design
strategies
Experimental study

5h–graders at an elementary
school (n = 171

validity

Identifying affordance structures.
The affordance of the artifact components was analyzed using ASM. First, the components of an artifact areplaced in the upper portion of an ASM, where all components that are able to operate from the artifact must be
separated and arranged. For this purpose, the components of e-learning, the EDUNET Cyber Home Learning userinterface were analyzed and sorted. The resulting components included overall mood, titles, lists, location of thelearner, learning content, media feature controls, screen changes, captions, tips, behavior-inducing messages, andlearning support tools.
Next, the affordance factors are placed on the left side of the ASM as well. Cognitive, physical, and sensory
affordance suggested by Hartson(2003) were used to extract the affordance factors. Delphi experts modified theaffordance factors according to the characteristics of e-learning content. Cognitive type of affordance included four
components: accurate representation, provision of tips, inaccurate content, and confusing. Physical type ofaffordance included nine components: convenient operation, inducing interaction, immediate interaction, abnormal
termination, invalid connection, no movement, complex operation, cannot perform operation, and unresponsive.
Sensory type of affordance included two components: appropriate visual effects and appropriate auditory effects.
Identifying affordance design strategies.
To identify affordance design strategies, the affordance factors of e-learning components first need to beevaluated and prioritized. For this, the identified components of e-learning content were marked differently
according to their positive or negative affordance values. The positive artifact-user affordance factors were marked
with a ‘+’, and the negative artifact-user affordance factors were marked with a ‘-’. Next, priorities of affordancewere determined based on the calculations of marked affordance factors. The sum and percentage of components
marked with a ‘+’ and the sum and percentage of those marked with a ‘-’ were then calculated and noted. The
number of ‘+’ marks in the ‘AUA +’ area was added up and noted under ‘sum of + affordances,’ and the percentage

of affordances was then calculated. The ‘percentage of + affordances’ and the ‘percentage of - affordances’ were thepercentage values that were obtained by dividing the ‘sum of + affordances’ and the ‘sum of - affordances’ by the‘total +/- affordances.’ The ‘percentage difference’ is the difference generated by subtracting the ‘percentage of affordances’ from the ‘percentage of + affordances’. The affordance design factors had to be determined based on thepercentage difference between positive and negative affordances; components with a smaller positive value or anegative value would need to be improved (Maier, 2011; Maier & Fadel, 2009).
Once identifying the affordance factors, design strategies should be developed to improve components with anegative value. The e-learning content component with the lowest percentage difference was Media Features Control.
Location of the learner, list, screen changes, learning support tools, learning contents, and title were followed.
Affordance design strategies can be developed to reduce negative aspects and to improve effective and efficient useof the identified components.

FINDINGS
Affordance design strategies
Affordance design strategies were suggested for the affordance factors with percentage difference 50% below.
A summary of design strategies to improve affordances for the identified e-learning components is provided. For
example, for the media feature control, strategies for reducing negative-affordance items such as unexpected
termination should be eliminated. For this reason, strategies such as ‘ensure that the learning window does not close
unexpectedly’, ‘ensure error-free operation’, and ‘design buttons so that learners can perceive easily and operate’
were suggested to avoid negative affordances whereas the strategies of ‘ensure that operation methods are recognizedas similar to those in the real world’ and ‘ensure immediate processing after operation’ were suggested as positive
strategies.
New e-learning content user interface
Based on the results of suggested affordance design strategies, a new e-learning user interface was developed.
Many changes were incorporated into new e-learning user interface. For instance, media feature control is thee-learning component with the lowest percentage difference that has many negative affordances and thus, needs to be
improved. To decrease negative affordance, the new user interface has significant changes. Location of media control
panel is moved from the bottom of the center to the bottom of right area in the screen. New location allows learners
to easily operate screen. Familiar metaphors were included in the new media control panel so that students can better
perceive the media features. Script view and audio control functions were also added for leaners to process learning
efficiently.
The effects of affordance strategies on usability
Students in the affordance e-learning content group had a significantly higher usability score (M = 4.18, SD= .45) than students in the existing e-learning content group (M = 3.63, SD = .77); t(110) =-5.42, p < .01. Specifically,
students in the affordance e-learning content group had a significantly higher effectiveness usability score (M = 4.37,
SD = .47) than those in the existing e-learning content group (M = 3.72, SD = .85); t(105) =-5.90, p < .01, and thosein the affordance e-learning content group had a significantly higher efficiency score (M = 3.94, SD = .60) than thosein the existing e-learning content group (M = 3.54, SD = .80); t(130) = -3.53, p < .01. Finally, students in theaffordance e-learning content group had a significantly higher satisfaction score (M = 4.14, SD = .71) than those in
the existing e-learning content group (M = 3.57, SD = .87); t(138) = -4.60, p < .01.

CONCLUSION
The purpose of this study was to explore design strategies that facilitate users’ interactions with e-learning
contents from an affordance perspective. To achieve this, affordance design strategies for e-learning content wereidentified by employing the core process of affordance-based design methodology. The effects of these affordance
design strategies on usability were then examined.
Despite the importance of affordance design, most studies on affordance have examined the affordancecharacteristics that are existed in e-learning tools. Previous studies have suggested design strategies that improveaffordance attributes of e-learning, but these attempts have been limited by the lack of systematic approach in thedevelopment of such affordance. Such strategies will be possible when the properties that influence learner behavior
are systematically considered with reference to affordance-based design methodology in this study. Improvements inthe usability of e-learning user interface were achieved systematically through the use of affordance-based design
methodology in this study. Using the approach of Maier and Fadel’s (2007) affordance-based design methodology asa framework, the researchers identified affordance factors, identify affordance strategies, develop the user interface
prototype, and evaluate the user interface prototype. The systematic affordance design approach of this study canprovide designers with a guide to exploring affordance that are pertinent to critical components of e-learning userinterface, improving the components of e-learning user interface by reducing negative impacts and enhancing
positive impacts simultaneously according to critical progress on the development of e-learning user interface.
Affordance factors of e-learning content user interface were identified from Hartson’s affordance classification:
cognitive, physical, and sensory. The three types of affordance used in this study will provide designers withselection criteria that will be useful for identifying important affordance that are associated to e-learning userinterface component. Given that the affordances differ according to the characteristics of the medium(Kirshner,
2002), future study may need to look for other types of affordance that are distinctive in educational contexts.
The new e-learning content that employed affordance design strategies resulted in significantly higher scores for
all three components of usability (effectiveness, efficiency, and satisfaction). According to studies on affordances,when a person operates a specific system, the system affects the behavior of the user. Thus, enhancing theaffordances inherent in the system help the learners to induce intended learning behaviors and thus, use the userinterface effectively, efficiently, and satisfactorily (McGrenere & Ho, 2000). Results shows that elementary school
students with new e-learning content tends to easily catch important information, clearly understand organizedlearning contents, operate learning support tools without troubles, easily find necessary information, andimmediately move to desired learning content. The results also show that students with the new e-learning content
perceived the use of new affordable e-learning contents as more valuable. The findings from this study confirm thataffordance-based design is a critical vehicle in improving usability for e-learning content.
The affordance design strategies identified in this study had a positive impact on usability, indicating that if suchstrategies are properly utilized, e-learning contents that encourage more appropriate learner behavior can be better
developed. The growing use of new learning tools, such as smart-phones, tablets, and digital textbooks, in
educational settings emphasizes the need to apply affordance design strategies to various media to allow learners to
respond actively to changes in their learning environment (Sheridan & Kortuem, 2006). In addition, because
affordances are affected not only by users’ intentions in using the media, but also by various user-related factors,
such as age, learner characteristics, and previous e-learning experience, these user-centered variables should also betaken into consideration in future studies.

REFERENCES
Bower, M. (2008). Affordance analysis-matching learning tasks with learning technologies. Educational Media International, 45,
1, 3-15.
Dalgarno, B. & Lee, M. (2010). What are the learning affordances of 3-D virtual environment, British Journal of Educational
Technology, 41(1), 10-32.
Gibson, J. J. (1979). The ecological approach to visual perception. Boston: Houghton Mifflin Comp.
Hartson, H. R. (2003). Cognitive, physical, sensory, and functional affordances in interaction design. Behaviour & Information
Technology, 22(5), 315-338. doi:10.1080/01449290310001592587
Johnson, W. L., & Lester, J. C. (2000). Animated pedagogical agents: Face-to-face interaction in interactive learning environments.
International Journal of Artificial Intelligence in Education, 11, 47-78.
Jona, M., Bell, B., & Birnbaum, L. (1991). Button theory: A taxonomic framework for student-teacher interaction incomputer-based learning environments. Evanston, IL: Institute for the Learning Sciences, Northwestern University.
Kirshner, P. A. (2002). Can we support CSCL? Educational, social, and technological affordances for learning. In P. A.Kirshner(Ed.). Three worlds of CSCL: can we support CSCL? (pp. 7-47). Heerlen, The Netherlands: Open University of theNetherlands.
Krauskopf, K., Zahn, C., & Hesse, F. (2012). Leveraging the affordances of Youtube: The role of pedagogical knowledge andmental models of technology functions for lesson planning with technology, Computers & Education, 58, 1194-1206.
Maier, J. R. A. (2011). Affordance based design: Theoretical foundation and practical applications. Saarbrucken: VDM.

Maier, J. R. A., & Fadel, G. M. (2009). Affordance-based design methods for innovative design, redesign and reverse engineering.
Research in Engineering Design, 20(4), 225-239. doi:10.1007/s00163-009-0064-7
McGrenere, J., & Ho, W. (2000). Affordances: Clarifying and evolving a concept. Proceedings of Graphics Interface 2000 (pp.
179-186). Toronto: Canadian Human-Computer Communications Society.
Norman, D. A. (1988). The psychology of everyday things. New York: Doubleday.
Robertson, J. (2011). The educational affordances of blogs for self-directed learning. Computers & Education, 57, 1628-1644.
Sheridan, J. G., & Kortuem, G. (2006). Affordance-based design of physical interfaces for ubiquitous environments. Proceedingsof Ubiquitous Computing Systems, Third International Symposium, UCS 2006, Seoul, Korea.
Simons, K. D., & Klein, J. D. (2007). The Impact of scaffolding and student achievement levels in a problem-based learning
environment. Instructional Science, 35, 41-72. doi:10.1007/s11251-006-9002-5
Song, Y. (2011). What are the affordances and constraints of handheld devices for learning in higher education, British Journal of
Educational Technology, 42, 6,