Affordance: What Does It Mean For E-Learning?

Ever heard of affordance? If you haven’t, you’re far from alone—even if you design user experiences when you create e-learning. But this term is quite significant in the design and user experience world. So, just what is affordance?

The term was first introduced by a psychologist, James Gibson, in the late 1970s, as a term used in cognitive psychology. In that aspect, affordance refers to all of the possible actions in a certain situation, in relation to a person and what their capabilities are.

How we use affordance in relation to design was introduced by Donald Norman in 1988. He introduced the term as perceived affordance in the context of human-machine interactions (which is what e-learning is). According to Norman, affordance depends not only on the physical capabilities of an individual, but also their perception, which is influenced by their past experiences and future goals.

Therefore, perceived affordance means that an object's characteristics or design provide clues or suggestions about how to interact with an object, and and those cues are perceived individually by a person’s past experiences with similar objects. For example, a button suggests clicking or pressing, and a knob suggest twisting or turning.

Affordance is an important concept in e-learning design, because it impacts how learners interact with our course designs. When we create e-learning, we design elements such as buttons, hyperlinks, data entry fields, etc. By applying important visual identifiers, we can help learners navigate our courses more easily. You see a button for the first time, how do you know what to do? It’s perceived affordance that gives you clues about what it’s for or what to do, even if it’s an object you’ve never seen before.

There are many types of affordance, but here are a few of the most important:

Negative affordance: When there is a perceived affordance, but nothing happens. For example, a button is clicked but nothing happens.

Hidden affordance: When an object can do something that you would not expect it to be able to do.  For example, you can use a lighter to open a beer bottle.

False affordance: When you expect one thing, but something else occurs. For example, you approach a door with a handle which you pull, only to find out the door opens instead by pushing.

Explicit affordance: The information given by either text or an object’s physical appearance. This is one we’re most concerned with, because by applying explicit affordance to objects, we can help our learners navigate our courses more fluidly.

Look at the following 3 buttons and see how explicit affordance (the raised look and the text “click me” makes it pretty obvious what the learner should do) makes one button more obvious than others:

Here’s another example. Notice which of the following text entry fields provides the clearest explicit affordance.

These are just a few examples of how affordance can impact a learner’s ability to get through your course. As you can see, providing explicit affordance makes e-learning content more intuitive and easier to grasp. When learners are distracted trying to figure out what they’re supposed to click, or what they’re supposed to do on a specific slide, they’re not focused on what really matters, which is the content of your course.

How to apply affordance?

Now that you understand what affordance is, you’re probably wondering what this means for you, the e-learning designer. There’s a few things you can do to make sure you’re providing your learners with a high level of clear, explicit affordance.

• Follow established design standards: As you design your courses, follow established design standards, such as using a drop shadow and a bevel effect on buttons to make them look clickable (Read more: Tips for Creating Great Buttons That Stand Out), or by using a different color and underline on text that is a hyperlink. These design standards are constantly changing and evolving, but e-learning design takes a lot of its cues from the standards in the web and graphic design industries. So keep an eye out on what’s happening, design-wise, in those areas, to make sure your course designs are fresh and up-to-date. Read more: Web Design & E-Learning: Long Lost Siblings? & User Interface Design: 3 Things E-Learning Designers Need to Know.

• Use direct and concise text: Another important tip is to not let your courses get too wordy. Be ruthless in your text editing, and get rid of every single word that does not need to be there. Edit out any information that is nice-to-know as opposed to need-to-know (Read more: The Dos and Don’ts of Separating Need-to-Know from Nice-to-Know) and condense your text to make it as to-the-point as you can. You should also try to use action verbs so learners always know what to do. Read more: Tips for Removing Redundant E-Learning Course Text & Top Writing Tips for E-Learning.

• Do thorough user testing: Finally, the only way to know if your learners are getting the explicit affordance cues you’ve included, is by doing thorough user testing. This is a critical part of development, and one that you should not skip. For more information about testing, read this: The Top 4 Reasons to Test Your E-Learning Courses.

Next time you design a course, be aware of perceived and explicit affordance and how it’s influencing your course design. Follow the three tips listed above to make sure you’re always being clear about what you want learners to do.

Do you have any tips of your own about how to make sure learners can easily navigate your course? Please leave them in the comments below!

Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.