In a recent Guild report describing The Human Side of Technology & Learning, Jane Bozarth wrote, “A challenge for those working with technologies for learning is balancing the affordances of a technology with the needs of the human learner.” Getting this balance right means understanding how learners will perceive affordances in digital content—including eLearning—and how they might respond.
Affordances in the physical world
An affordance is a quality, characteristic of, or clue offered by an object that provides information about the purpose of an object or how to interact with it. For example, the seat of a chair is the affordance that enables sitting or standing on it; it’s also a visual cue that this is a chair, or at least an object that a person can sit on. The zipper on a bag or backpack is an affordance that allows the user to put things inside and close the bag, ensuring that nothing falls out. The zipper usually has a tab or string—another affordance—that shows the user where to pull to open or close the zipper.
Some affordances are misleading or badly implemented in the physical world, leading to errors. A curved handle that invites pulling when placed on the side of a door that requires pushing is a common example. Missing or badly designed affordances on doors are a favorite topic of Donald Norman in The Design of Everyday Things, first published in 1988 as The Psychology of Everyday Things.
In the book and through his work, Norman introduced the idea of an affordance as both a property of the item and a function of the user’s ability to understand it.
Poor design and misplaced or misleading affordances detract from the user experience, or UX: A pot holder that I have that has a cute saying on it has a hanging loop—an affordance—that forces me to hang it so the words and picture are upside-down.
Digital affordances
In a similar vein, digital affordances can ease and improve UX of digital content—including eLearning—or frustrate users and severely damage UX.
Some design elements have become so commonly used that they function as affordances. Examples include the “hamburger” icon that indicates a menu and the telephone receiver icon to indicate a telephone function.
Figure 1: In much digital content, three stacked lines that vaguely resemble a hamburger are used to indicate a menu; a telephone receiver is used to signal a phone number
Designers often struggle with designing affordances that are clear enough that users can intuit navigation cues, relative importance, and other characteristics of content, while also designing attractive content that conforms with branding, color, and other design requirements.
The Interaction Design Foundation says, “UX designers often utilize the knowledge/experience people have of their past interactions with direct or mechanical control so as to design electronic products’ affordances. For instance, buttons on software interfaces often resemble physical buttons with elevation (featuring drop shadows).”
Digital interactions occur via smartphone or tablet touch screens—glass screens—or through user-controlled input devices like a mouse or keyboard. UX designers often mimic affordances of familiar physical items.
These visual metaphors provide information to digital users. An example of this is the “folder” metaphor for storing and organizing digital files. While there’s no digital folder on your computer hard drive or in the cloud, the image of a file folder is instantly recognizable to most computer users and provides cues about what to do.
A digital affordance can be explicit—a button that says “Click here”—or hidden. Hover text, drop-down menus, and buttons that appear only after the user takes a specific action are examples of hidden affordances.
Affordances in eLearning often mirror affordances in digital consumer products and services, but eLearning designers have additional considerations and constraints to work with.
Learner-centered design
When designing eLearning and creating affordances in that digital content, the focus should be on the target user. Designers should have a “typical” learner in mind or create a persona. They should know, for instance, how computer-savvy the typical learner is and therefore how likely she is to recognize and understand various affordances. To make content globally inclusive and accessible, designers should also consider whether visual metaphors will be recognizable to all members of the target audience.
A concern in eLearning is cognitive load: Designing an interface that learners struggle to understand increases cognitive load and takes energy that otherwise could be applied to learning and retaining the content. For novice users, or for learners who don’t use computers or eLearning often in their work, designing a highly intuitive interface with clear, explicit affordances can improve UX significantly.
An additional concern is accessibility. Affordances in eLearning should be designed to allow for screen-reader use, for example, which could mean adding labels on buttons or as alt-text. They should not rely on color alone to distinguish them from other content or to indicate what action they perform.
Explore the human side of technology
Bozarth’s report, The Human Side of Technology & Learning, is available for free download to all eLearning Guild members. In addition, members are invited to join their peers at DevLearn 2019 Conference & Expo, October 23–25 in Las Vegas. Kate O’Neill, author of Tech Humanist, is a keynote speaker, presenting "Tech Humanism: Shaping the Future of Meaningful Human Experiences."