Blog Post

Articles
4 MIN READ

Affordance: What Does It Mean For E-Learning?

NicoleLegault1's avatar
NicoleLegault1
Community Member
10 years ago

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.

  • 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.

Published 10 years ago
Version 1.0
  • Hi Nicole, thank you for writing about the affordances. There are so many principles we should learn from UX and web design. I learnt the definition of affordance from Norman's book "The design of everyday things" a couple of years ago, I highly recommend it, it opened my mind, it changes the way you interact with things around you, and the most important for us: it makes us think of the way we design interfaces for the learners.
    Alternatively, you may check Norman's course @ Udacity https://www.udacity.com/course/intro-to-the-design-of-everyday-things--design101
    I couldn't finished the course, but watching his lectures is really worthy
  • This is an excellent article, Nicole! I had never heard of the word "affordance," but the idea is something I often think about when developing a course. Throughout various stages of development, I'll ask colleagues to interact with my course as I watch what they do. If they try to click on something that isn't clickable, that's a clue that my navigation isn't clear enough. As you stated in the article, user testing is key. What I think is clear and explicit may not be intuitive to other users.

    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Thanks for the comment, Alyssa. Glad you liked the article, and so glad you agree with the user testing. It is SO important! Especially important to get people from various backgrounds and technological proficiency to test it out as well because as the article also states, how we interact is influenced by our past, so if we're on the computer every day and we've clicked a million buttons we might be more clear on when we see them, versus if it's our first time ever doing an e-learning course and we're super non-technical. Anyways! Good food for thought. Thanks again for commenting :)
  • Nicole, thanks for this great article on affordance. I always try to make user instructions as explicit as possible but I have never identified this characteristic as affordance.
  • RyanMartin's avatar
    RyanMartin
    Community Member
    Appreciate this.

    Crossing my fingers the Storyline dev team fixes the hover / select "affordance bug". Selecting a button should be the select state not the hover state (see Duolingo for user experience). This is a thorn in my side every project :(

    /Note: Aware Articulate doesn't make public the roadmap... just a timely article considering I'm rejigging button states today.
  • Exactly!

    Coming from a UI/UX background, I feel that a lot of e-learning templates or design could be improved upon if more UI/UX design principals were applied and taught within the industry.

    Great article!
  • DianaMyers's avatar
    DianaMyers
    Community Member
    L-O-V-E this article filled with great tips for newbies and great reminders for experienced designers. Thanks for sharing Nicole (awesome like always)!

    One big note: Make sure you *consistently* apply your effects throughout each project. It builds the credibility of your courses/projects and it lessons the effort learners need to expend to navigate/interact - all of which enables them to spend more effort on the content they're trying to learn.
  • TanyaStorm's avatar
    TanyaStorm
    Community Member
    Love this, thanks for teaching me something new today Nicole! Negative Affordance makes me VERY stabby. :) I always just called it "poor design" but now I have an even better (and more impressive) term!

    Meanwhile, Hidden Affordance tends to delight me! (Thanks for the beer bottle tip...)
    Cheers!