Blog Post

Articles
3 MIN READ

Apply the Principle of Affordance to E-Learning

NicoleLegault1's avatar
NicoleLegault1
Community Member
6 years ago

Have you ever heard the term affordance? If you haven’t, you’re not alone, but it’s an important design principle that e-learning designers need to understand. Affordances are an object’s characteristics or aspects of their design that provide clues and suggestions for interaction. Affordance can be explicit, meaning made obvious by an object’s physical appearance, and also perceived, meaning influenced by past experiences and interactions.

For example, not only does the handle on a mug physically represent something we can slide our fingers into and hold onto, but our past interactions with objects that have handles also clue us in as to its use.

Affordance is an important concept in e-learning design, particularly explicit affordance. When we design training we include buttons, hyperlinks, data entry fields, and other elements. By understanding affordances and how they influence the course-taker, we can help learners navigate our training more easily.

Look at the following buttons to see how affordance makes one button stand out more than the others:

Take a look at the following text entry fields. Which one provides the clearest explicit affordance?

These are a few examples of how affordance can impact a learner’s ability to get through your course. Providing explicit affordance makes e-learning content more intuitive and easier to follow. When learners are distracted trying to figure out what they’re supposed to do next, they can’t focus on what really matters, which is the course content.

Here are a few things you can do to provide learners with clear, explicit affordance:

Follow established design standards

As you design your courses, follow established design standards that are used in the web and design industry. These design standards are constantly changing and evolving, but e-learning design takes a lot of its cues from the standards in these industries. Keep an eye on trends and designs to make sure your courses look and feel up to date.

Use direct and concise text

It’s crucial to use concise language and clear instructions. Be ruthless in your text editing and get rid of every word you don’t need. Edit out any information that is nice-to-know (as opposed to need-to-know) and make your text as to the point as possible. Keep in mind that using action verbs will help ensure your learners know what to do.

Do thorough user testing

The best 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. You can gather information by observing or recording your learners as they complete the module and also by gathering their feedback during and after the course. Ask them questions about where they got stuck, whether they ever felt lost, whether the navigation was clear, etc.

Next time you design a course, be aware of affordance and how it’s influencing your course design. Follow the three tips listed above to make sure you’re always clear about what you want learners to do. If you have any tips of your own, I’d love for you to share 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. If you have any questions, please share them in the comments.

Published 6 years ago
Version 1.0
  • Base on what Dan Norman wrote in his book (The Design of Everyday Things) we have two terms that describe objects.

    Affordances define what actions are possible (It is a relation between object and a person (user) so for example a chair affords (“is for”) support and, therefore, affords sitting.
    On the other hand signifiers specify how people discover those possibilities: signifiers are signs, perceptible signals of what can be done (chair's flat surface and a back support). Therefore signifiers are far more importance to designers than are affordances.

    Hope that adds a little bit of a background to the article.
    • KatiCountryman's avatar
      KatiCountryman
      Community Member
      I am reading this book right now! It was the first thing I thought of as I opened this article … "Hey wait, there are signifiers too!" :) Great read in this article and highly recommend The Design of Everyday Things, too.
  • The advice to follow standards is good, but one has be be thoughtful about which standards. A recent example I encountered was a remote control that came with a new TV I got for my father. Both of us were baffled about how to raise or lower the volume from the remote, because the normal Volume Up/Down buttons were not present. Turns out the designer of the remote control put the volume control buttons on the side of the remote, instead of the front. That *does* follow a design standard, but it's the *wrong* design standard. Tiny little Volume Up/Down buttons are on the sides of many cell phones. But my father and I both have a lifetime of experience using television remote controls, and it is *not* a common practice in remote control design to have the volume controls on the side like that. Additionally, there were no affordances (or signifiers, if you prefer) in the form of labeling or icons or any other indication on the front of the remote that the volume controls were hidden on the side.

    In the end, we returned the TV.
    • NicoleLegault1's avatar
      NicoleLegault1
      Community Member
      Thanks for chiming in with your own first hand experience Ray! :)
  • One design standard common on the web is to subtly animate or change the visual of a button or other interactive element when the mouse is hovered over it. Mouse over the user icons next to these posts to see an example. This can be easily replicated in Storyline using states and triggers and makes a big difference to the user experience.
  • JodiSansone's avatar
    JodiSansone
    Community Member
    Very timely discussion for me. Today I'm working with some really dense SME Finance content. I just created a slide with 8 clickable objects they have requested...my client wants 8 hotspots. It makes no sense to me. You just gave me some confidence to push back. :)
  • JodiSansone's avatar
    JodiSansone
    Community Member
    By the way , the button icons in storyline are really helpful. I wish there was a way to customize them more, but I rarely make a button without an icon.
    • GavinElliott-89's avatar
      GavinElliott-89
      Community Member
      You don't need to use the built in buttons. You can design your own using the shape tools, icons or images and then use triggers so that it's treated just like a button. :)
  • JeffreyRiley's avatar
    JeffreyRiley
    Community Member
    You can customize buttons more than shape or color. You can bring in an image. I did that for one client with their logo. I like to customize buttons because they already have states and that saves time.