How do I design so that people can easily understand the affordances of my creation?

Design in Context: What affordances motivate people to play popular video games?

Picture yourself as a designer tasked with creating an immersive virtual reality educational game for science learning for middle school students. One goal of the game is for students to explore different ways to interact with the elements of the game environment and discover what those elements do. How would you approach this challenge? What features would you incorporate into the game to guide the student’s actions without relying much on instructions through text?

This chapter will introduce the notion of affordances, which is a psychological concept that addresses how users perceive the intended use of tools and objects in the environment. The notion of an affordance can inform instructional designers to design and develop user-friendly tools to support learning. In this chapter, we will first explore theories that explain how humans perceive and interpret objects, determine their potential uses, and how these objects can trigger specific actions. Such information will enable designers to improve or refine their object design (which can be learning tools in the context of instructional design) for improved user experiences. Furthermore, when users do not see the perceived value, the designer may have to introduce signifiers or provide training to help users understand, and familiarize themselves with, the usage of the functionalities. Lastly, this chapter will explore the practical application of affordance and signifier theory across various design disciplines.

Story

Animal Jam is one of the popular educational games by WildWorks, created in collaboration with the National Geographic Society for children aged 6 to 12 (“Animal Jam Classic,” 2024). Launched on September 9, 2010, the game rapidly gained popularity, amassing over 160 million users by 2020. Centered around wildlife and environmental themes, the game immerses players in diverse biomes like forests, deserts, tundras, and coral reefs, showcasing how plants and animals adapt to various climates. Players embody animals such as tigers, koalas, and wolves, fostering a sense of connection to the natural world while exploring ecosystems. These social and cultural and contextual elements created an engaging platform for ecological awareness, positioning both players and animals as active participants in the game’s environment.

Interactive design elements such as badges, rewards, and progress tracking enrich the gameplay experience. Players earn badges by completing Missions, which vary in themes and difficulty levels. Badges can be displayed on a player's nametag, allowing up to two to be shown off to others, and new badges are regularly added, some with limited availability. Rewards for completing Missions include in-game prizes and Sapphires, with additional opportunities available through various mini-games. The game also supports progress tracking, enabling players to monitor their active Missions and steps for completion while their unlocked badges are visible to others through their profiles.

Discussion Questions

• What roles do badges play? How do they fulfill social interactions recognitions?

• How is the reward system designed to motivate and sustain engagement in the game?

• How does it influence players' perceptions of value and effort?

• What role does the progress-tracking feature play in this game? How is it designed to appeal players for collaboration and completion of Missions?

Theory of Affordance

Introduction

Affordance is like gravity—always present but not directly sensed, only observed through its effects. Just as one must interact with the environment to feel gravity (like free-falling on a trampoline), understanding affordance requires engaging with the environment to see how objects prompt certain actions. Gibson (1986) and Norman (2013) made important contributions to the concept of affordance, which explores these interactions between people and their surroundings.

Gibson’s Affordance

Gibson (1986) defined affordance as the environment providing opportunities for action (e.g. a surface to walk on or an anchor to grip), and the organism interacts with those opportunities to produce beneficial or harmful outcomes. Young (2004) concurred with Gibson that an affordance is the possibility of actions from the individual’s interaction with the environment. Gibson’s theory identifies four key factors: (1) the physical properties of objects and environments, (2) individuals’ perception and interpretation of these properties, (3) the potential actions enabled by perceived affordances, and (4) ambient light, which makes affordances perceivable. Gibson's theory is aligned with Young’s (2004) works, which noted that learning from an ecological perspective is about seeing new possibilities for actions in the environment. Thus, instructional designers must structure the environment to create perceivable affordances that align with the users’ perceptions (Kulikowich & Young, 2001; Lobo et al., 2018). As Young (2004) postulated, two central elements of learning are intention and attention. Users’ intentions must be aligned with the goal of the learning environment, and the environment must guide users’ attention toward completing the tasks, which aligns with Gibson’s bi-directional interaction of affordances.

Building on Gibson’s (1984) work on ambient light and visual perceptions, Young (2004) extends the concept of affordances into instructional design by emphasizing the importance of guiding learners’ perception, action, and learning through intentional design, multisensory modality cues, and environmental structure. The visual perception of affordances operate across four dimensions:

• Physical: Clickable button affords learners to navigate to the next module.

• Cognitive: Highlighted section affords focus attention. Thus, reminding learners critical information.

• Sensory: Drag-and-drop activity affords learners to match concepts. Thus, engaging tactile and visual input.

• Functional: Progress bar affords clear indication of task completion. Thus, encouraging learners to stay on track.

These dimensions guide instructional designers to create experiences that support meaningful interactions between the learner and the tool and foster learning through perception and action.

Norman’s Affordance

From the ecological perspective, Gibson (1986) defined affordances as inherent, bidirectional relationships between organisms (i.e., beings with perceptual abilities) and their environment, focusing on perceived affordances. At the same time, Norman also introduced the concept of signifiers, which refers to the guides that direct users to discover affordances, such as helping users see the affordances, providing step-by-step instructions, and giving feedback toward the goal of identifying affordances intended by instructional designers. While affordances and signifiers are crucial in Human-Computer Interaction (HCI), affordances are particularly important for creating intuitive interactions that align with user expectations. Well-designed affordances enhance immersion and realism by enabling natural engagement with digital objects and environments. Therefore, designers must ensure that designed affordances align with users’ mental models and expectations for effective User Experience (UX) and User Interface (UI).

Norman (2013) further enhanced the dimensions of affordances as shown below:

• Physical – Norman shifted from Gibson’s view by focusing on how physical features guide behavior. For example, a door handle’s shape and position prompt users to pull or push correctly.

• Cognitive – Norman emphasized that affordances depend on cultural learning. A crosswalk suggests crossing, but pedestrians must still learn to watch signals for safety, as rules vary by culture.

• Sensory – Norman highlighted visual cues across all five senses. For instance, a native user may recognize two sticks as tools for picking up food based on cultural familiarity and past experiences.

• Functional – Norman stressed design’s role in defining specific functions. For example, an office chair signals comfort and support, while a simple classroom chair is just for sitting.

• Emotional – Norman added emotional elements to affordances, which Gibson did not address. For instance, a mural might evoke memories or connections, shaping how people perceive and engage with it.

Affordances in Human-Computer Interaction (HCI)

Human-computer interaction (HCI) is not new. In the past, we used peripherals such as keyboards and mice to communicate with computers. Due to the advent of digitalization, HCIs have become more ubiquitous and sophisticated. Unlike hardware peripherals that require training, modern HCIs have become almost intuitive to many. This was made possible by the concept of affordance, which made communication between humans and digital devices seamless.

Thus, as an instructional designer in digital media, understanding the basics of digital affordances helps the designer become more aware of all the elements that need to be incorporated into the digital device. This will reduce the training time, improve the interaction, and improve the user interface and learning process.

• Physical affordances are actionable features for users to interact. Examples are buttons and sliders.

• Cognitive affordances are interfaces that provide cues for action. Examples are the progress bar and breadcrumb navigation.

• Sensory affordances are feedback that stimulates our five senses to help users improve perception. Examples are visual changes such as blinking objects and sound effects signaling danger or error.

• Functional affordances are special features that improve users’ task efficiency. Examples are autocomplete and drag-and-drop functionality.

• Emotional affordances engage users’ emotions to interact with the system. Examples are emojis and avatar actions.

It is important to note that all the affordances, especially the first four, work together to create intuitive user experiences (Hartson, 2003). Thus, designing an HCI with only one type of affordances is impossible. In the following subsections, we discuss various types of affordances, including physical, cognitive, sensory, functional, and emotional, specifically outlining the characteristics of each type of affordance and how it interacts with other types of affordances, as well as the implications of each affordance to instructional design and user/learner experiences. Guided by a critical analysis and synthesis of the literature on affordances (e.g., Blin, 2016; Hartson, 2003; Lee & McLoughlin, 2008; Franzoni et al., 2017; Vallverdú & Trovato, 2016; Vallverdú et al., 2018), we explore the relationships and interactions between various affordances in the following sections. The discussions, which are based on the mentioned literature, are summarized in Figure 1 (“Relationship among Various Types of Digital Affordances”) and Table 1 (“Descriptions of Human-Computer Interaction Affordances and Functions”). Notably, some affordances span more than one category, reflecting their multifaceted nature. For example, the visual metaphors affordance can be functional, physical, and cognitive depending on specific situations.

Physical Affordances

Characteristics

The three characteristics of physical affordances are visible-perceivable, understandable-operational, and purposeful-usability (Harton, 2003). This means that the affordance design must be obvious for the user to notice so that perception can take place in the user. The next step will be actionable operations that could take place. The operation will result in an outcome that enhances the user’s usability, performance, and productivity.

Important Factors to Instructional Designers

Guiding Tool Design

• Crucial for creating clear cues for effective learning experiences and user engagement (Blin, 2016; Lee & McLoughlin, 2008)

• Support other affordances to create effective and user-centric HCIs (Blin, 2016)

• Consider perceived and actual affordances of tools (Bower, 2017)

Empowering Tool Usage

• Enables personalization, thus creating a student-centered learning environment (Bower, 2017; Hartson, 2003; Lee & McLoughlin, 2008)

Application in HCI

• Developing user-friendly touch interfaces

• Designing ergonomic hardware controls

Cognitive Affordances

Characteristics

In HCI, cognitive affordances are design elements that help, support, facilitate, or enable thinking and knowing about something to support users’ learning and problem-solving (Hartson, 2003; Segundo-Ortin & Heras-Escrbano, 2023; Jorba, 2020). Examples of cognitive affordances include providing cues, feedback, and guidance, which help users make informed decisions, understand system responses, and evaluate the success of their actions. In the case of Animal Jam, nametags help players recall the identity and social hierarchy of the others in the game.

Important Factors to Instructional Designers

Guiding Tool Design

• Enhance user comprehension (Hartson, 2003)

Empowering Tool Usage

• Increase user motivation to continue to engage with HCI (Hartson, 2003)

Application in HCI

• Designing intuitive navigation systems

• Creating self-explanatory user interfaces

Sensory Affordances

Characteristics

Sensory affordances create a sense of immersion that keeps users engaged in an artificial environment. They involve interaction through the five senses—sight, sound, touch, etc. (Hartson & Pyla, 2019). Unlike other affordances, sensory affordances focus on how users physically experience things rather than think or act. While cognitive affordances aid understanding and physical affordances guide actions, sensory affordances focus on what users see, hear, or feel when interacting with a system.

Important Factors to Instructional Designers

Guiding Tool Design

• Enhances awareness of the artificial environment (Hartson, 2003)

• Precursor and complementary effects to physical, cognitive, and functional affordances lead to user understanding, engagement, and action within the human-computer interaction (Hartson, 2003)

• Well-planned sensory elements in the system/environment lead to experiences that are user-friendly, inclusive, and appealing, thus improving usability, engagement, and learning outcomes (Hartson, 2003)

Empowering Tool Usage

• Multiple-sense stimulation leads to more focused and accurate actions (Hartson, 203)

Application in HCI

• Enhancing user engagement through rich sensory experiences

• Creating inclusive interfaces for users with disabilities

Functional Affordances

Characteristics

Functional affordances in HCI are design features that show users how to interact with a system to complete tasks or achieve goals (Hartson, 2003; Blin, 2016). They make users' actions meaningful by providing clear steps, feedback, and guidance. Unlike other affordances, they focus on practical usability, helping users stay on track and accomplish their objectives efficiently.

Important Factors to Instructional Designers

Guiding Tool Design

• Facilitate task completion, goal achievement, and user productivity within the interface.

• Minimize steps, optimize workflow, and improve productivity in completing common tasks (Hartson, 2003)

• Improve usability, reduce cognitive load, and enhance user performance (Bower, 2017)

• Help the designer decide and optimize multimedia learning effects (Bower, 2017)

• Designers can create interfaces that are intuitive, purposeful, and conducive to achieving desired learning outcomes (Hartson, 2003)

Empowering Tool Usage

• Enhance user efficiency, effectiveness, and satisfaction with the system, leading to improved learning outcomes and user performance.

Application in HCI

• Enhancing operational workflow to improve business productivity

• Designing an efficient Learning Management System

• Leveraging adaptive learning in educational software

Emotional Affordances

Characteristics

Emotional affordances are design features in HCI devices that trigger emotional responses, improving user interaction (Vallverdú & Trovato, 2016). They play a key role in human-machine collaboration, helping with tasks like planning and negotiation (Franzoni et al., 2017). Unlike other affordances, they create personalized, engaging experiences by interpreting emotional cues and fostering deeper connections. Emotional affordances are also subjective, shaped by personal experiences and cultural backgrounds. In Animal Jam, badges and rewards are designed to influence the players' emotions, making them feel excited, motivated, engaged and pride.

Important Factors to Instructional Designers

Guiding Tool Design

• Create interfaces that resonate with users emotionally (Vallverdú et al., 2018)

• Recognize emotional cues through observation processes to tailor instructional technology to the emotional states of learners (Vallverdú et al., 2018)

• Simulate situated learning environments that allow collaboration with peers or mentors to provide emotional support, encouragement, and validation (Vallverdú et al., 2018)

• Establish a robust communication environment, provide support, and adapt to the emotional needs of learners (Franzoni et al. 2017)

Empowering Tool Usage

• Enhance user engagement, motivation, and satisfaction with the system (Vallverdú et al., 2018)

• Improve learning outcomes and user experiences (Vallverdú et al., 2018)

• Foster meaningful and impactful interaction (Vallverdú et al., 2018)

Application in HCI

• Developing compelling social media interfaces in game-based learning

• Producing immersive virtual reality experiences in game-based learning

• Addressing users’ emotions and preferences effectively

• Fostering a strong emotional bond in designing education content

Fine-Tuning Strategy

One of the key concepts of affordances is bi-directionality. Gibson’s (1986) theory was grounded in the bidirectional relationship between objects and their environment. Norman (2013) expanded this concept into product design, emphasizing the interaction between designers and users—where designers create products for users to engage with. Young (2004), on the other hand, stressed that instructional designers must be conscientious of the user-object/environment bi-directionality. Our earlier discussion focused on the user-object bi-directionality within the HCI context. This section highlights that designs may not be intuitive to users. As such, we introduce five fine-tuning strategies for improving the design, ensuring a more user-friendly experience.

Strategy 1: Think-Aloud Exercise

In the think-aloud exercise, participants verbalize their thoughts, reasoning, and decision-making processes while they perform the task. In so doing, the designers gain insight into the design flaws, capture the users’ learning, and identify discrepancies between users’ behavior and designers’ intentions, revealing unforeseen challenges in affordance engagement. For further details, refer to https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/

Strategy 2: Scaffolding

Scaffolding is a method that provides temporary supports to accomodate learners’ needs as they are learning a new knowledge or skill area, which can be gradually withdrawn and faded over time as learners gain competence in acquired the specified knowledge and skills. The technology design may start with simpler interactions, gradually increase complexity based on learner progress, encouraging exploration and building upon existing understanding through subtle cues and increasing challenges. Once the users become familiar with the affordance, the assistance will be gradually removed as the users gain competence and confidence.

Strategy 3: Feedback

Feedback loops in the HCI context refer to those mechanisms that provide users with information about their performance. They prompt users to adjust their actions to achieve desired outcomes and improve their interactions. Feedback can be positive (reinforcing certain behaviors) or negative (correcting errors). Effective feedback will explain how a learner's actions lead to specific consequences and how those actions are influenced by the environment; indirectly, creating a cycle of mutual interaction between the learner and environment. The role of feedback is to understand why certain actions were successful, or not successful, and then suggest alternatives rather than focusing on unused features. In so doing, learners will be encouraged to experiment and explore other possibilities.

Strategy 4: Simplification

In instructional design, simplification is defined as removing unnecessary elements, breaking down tasks into manageable steps, and presenting information clearly, concisely, and intuitively. Thus, the most relevant affordances for the learner's current task and goals should be the highlight in the HCI design. By minimizing clutters (such as unnecessary elements and information) and prioritizing key interactive features, designers will help users to become less frustrated, more engaged in the environment, and foster discovery of different elements within the environment. For further details, refer to https://www.nngroup.com/articles/visual-hierarchy-ux-definition/

Strategy 5: AI-Integrated Adaptive Learning System

This digital learning environment is powered by artificial intelligence (AI) to personalize the user/learning experience based on the user’s needs, performance, and interactions. These systems dynamically adjust content, feedback, difficulty levels, and learning pathways in real-time by analyzing user behavior and progress data. Analyzing performance and interaction patterns, AI systems present relevant affordances at appropriate times, creating a responsive and tailored learning experience that aligns with individual learning styles. For further details, refer to Leveraging ChatGPT for Adaptive Learning through Personalized Prompt-based Instruction: A CS1 Education Case Study | Extended Abstracts of the CHI Conference on Human Factors in Computing Systems

Figure 1

Relationships among Various Digital Affordances

Note. Shapes that have broken lines indicate the multifaceted nature of the affordance. For example, buttons can be under both "Functional" and "Physical" categories, so they are placed in the Category of "Functional-Physical (FP)"

Try it Yourself

You work for an education technology company that develops apps and software. Your manager hands you a new project brief that requires you to design an app for the refugees in a nearby city to help them learn English. The target audience comprises adults and children. As the project leader, you must contend with the following questions before meeting your team members.

• What is the appropriate approach to designing an intuitive and effective app for both target audience groups (i.e., adults and children), designing a generic app for both groups or separate apps for the two groups?

• Does the audience's understanding of their social and cultural background matter to the design? In what ways?

• How do you plan to conduct user analysis to embed proper affordances in your design?

• Would you emphasize any affordance dimensions more than others?

• How can affordances help you design tools and functionalities to help refugees learn English effectively?

Conclusion

This chapter has provided an overview to equip instructional designers to create user-centered designs that are intuitive, efficient, and emotionally satisfying. All five affordances must amalgamate to create a holistic HCI engagement and improve the learning experience. The examples provided are some of the most commonly used affordances, and instructional designers are encouraged to consider all aspects of affordance in the design process.

References

Animal Jam Classic. (2024, June 14). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Animal_Jam_Classic&oldid=1206615038

Blin, F. (2016). The theory of affordances. In C. Caws & M. J. Hamel (Eds.), Language-learner computer interactions: Theory, methodology and CALL applications (pp. 41–64). John Benjamins Publishing Company. http://doi.org/10.1075/lsse.2

Bower, M. (2017). Design of Technology-Enhanced Learning. Emerald Publishing Limited. http://doi.org/10.1108/9781787141827

Franzoni, V., Milani, A., & Vallverdú, J. (2017). Emotional affordances in human-machine interactive planning and negotiation. In A. Sheth (Ed.), Proceedings of the International Conference on Web Intelligence (pp. 924–930). Association for Computing Machinery. https://doi.org/10.1145/3106426.3109421

Gibson, J. J. (1986). The ecological approach to visual perception. Psychology Press.

Hartson, H. R. (2003). Cognitive, physical, sensory, and functional affordances in interaction design. Behaviour & Information Technology, 22(5), 315–338. https://doi.org/10.1080/01449290310001592587

Hartson, R., & Pyla, P. S. (2018). The UX book: Agile UX design for a quality user experience (2^nd ed.). Morgan Kaufmann. https://doi.org/10.1016/C2013-0-19285-9

Jorba, M. (2020). Husserlian horizons, cognitive affordances and motivating reasons for action. Phenomenology and the Cognitive Sciences, 19(5), 847–868. https://doi.org/10.1007/s11097-019-09648-z

Kulikowich, J.M. & Young, M.F. (2001). Locating an ecological psychology methodology for situated action. The journal of the learning sciences, 10(1–2), 165–202. https://doi.org/10.1207/S15327809JLS10-1-2_7

Lee, M. J., & McLoughlin, C. (2008). Harnessing the affordances of Web 2.0 and social software tools: Can we finally make” student-centered” learning a reality? In J. Luca & E. R. Weippl (Eds.), Proceedings of ED-MEDIA 2008—World Conference on Educational Multimedia, Hypermedia & Telecommunications (pp. 3825–3834). Association for the Advancement of Computing in Education. https://www.learntechlib.org/p/28915/

Lobo, L., Heras-Escribano, M., & Travieso, D. (2018). The history and philosophy of ecological psychology. Frontiers in Psychology, 9, Article 2228. https://doi.org/10.3389/fpsyg.2018.02228

Norman, D. (2013). The design of everyday things – Revised and expanded edition. Basic Books.

Segundo-Ortin, M., & Heras-Escribano, M. (2023). The risk of trivializing affordances: Mental and cognitive affordances examined. Philosophical Psychology, 37(7), 1639–1655. https://doi.org/10.1080/09515089.2023.2228341

Vallverdú, J., & Trovato, G. (2016). Emotional affordances for human–robot interaction. Adaptive Behavior, 24(5), 320–334. https://doi.org/10.1177/1059712316668238

Vallverdú, J., Trovato, G., & Jamone, L. (2018). Allocentric emotional affordances in HRI: The multimodal binding. Multimodal Technologies and Interaction, 2(4), 78. https://doi.org/10.3390/mti2040078

Young M. (2004). An ecological psychology of instructional design: learning and thinking by perceiving–acting systems. In D. H. Jonassen (Ed.), Handbook of Research on Educational Communications and Technology (2nd ed., pp. 169–178). Lawrence Erlbaum Associates.