learnability matters

Do you hold your users through the doors of a building to show them the way? Why should you show your learners “Click Next to proceed”?

Do you point an arrow to a doorbell to indicate: Press here to ring the bell? Why do you need to instruct your learner for every tab or a button to say: Click each tab to know more.

Do you need a guide every time you use your lift or go to a theatre?

Don’t you turn on the lights when it is dark? Don’t you go looking for water if thirsty?

Why should eLearning courses instruct learners to click the “Know More” button to look for more information? Why do they ask learners to click “Submit” after selecting an option?

Why should we underestimate the intelligence of our learners? Can you imagine how annoying it can be to have someone point out instructions for everything that you attempt in your house or office?

Just as good architects, product designers, and usability experts understand the psychology of users while designing houses, products, and software, why can’t instructional designers design courses by understanding or studying the psychology of learners? If the things around us are designed to be intuitive, why can’t our instructional design or eLearning be intuitive? Why shouldn’t our courses have affordance?

What is affordance?
“An affordance is the property of an object that suggests its possible uses. For example, a person viewing a chair automatically sees that it affords sitting. So does a large rock and a railing. If your goal is to sit, then the sitting affordances offer a simple means for achieving the goal. J. J. Gibson, the eminent perceptual psychologist, first suggested the notion 50 years ago. He said that when a person looks at an object, he directly perceives properties such as its shape, color, size, etc. Further, people perceive its affordances, the things that a person can do with it. Affordances are as much a perceptual property of an object as its color and shape. Gibson’s insight was that that perception and action are closely and automatically tied. “(The above extract is taken from Visual Expert Human Factors.)

What is affordance in eLearning?
eLearning does not have affordance. Every time a learner opens a course, the course tells the learner how to navigate, how to access the features, and which path to follow in the course. Yes, you do need a guided tour if you visit a 200 year old castle in Turkey and want to complete the visit in a day. You do not need a guided tour every time you visit a theatre in your city!Affordance in eLearning is the perceptual property of the elements in an eLearning course. This means when learners look at the elements in the course they can directly perceive the properties of the elements such as shape, color, or size without the help of instructions.

Affordance is critical in eLearning for adult learners. Adults learn through metacognition (check out the Sprint on adult learning strategies). They want to learn through self-assessment and self-correction. They lose interest if the course is patronizing. Adult learners do not appreciate handholding and spoon feeding. To ensure that adults can explore and learn, the courses should have affordance. This will minimize friction in navigation and eliminate minor irritants from their learning path.

Affordance in eLearning is as much about intuitive buttons, navigation, tabs, check boxes, menu items, hyperlinks, as about layout, color, and the use of media. Let’s discuss these in detail.

Affordance in eLearning layouts
Let’s attempt to understand this using some screen shots of courses. These courses have been picked at random from demos and courses available online.

What are the elements that have the affordance of being clickable on this screen?

1. Blue buttons: Money, Quick Close, House, Furnishings, Warranty
2. Grey round buttons on the bottom panel

You would be surprised to know that the blue buttons are not clickable. They are merely graphic elements on the screen. Why do they give the impression of being clickable? If they are not buttons, they should not look like buttons. They could be simply stated as text in the main boxes “Your Items” and “Their Items”.

Let’s look at another example:

What kind of actions can you do in this screen?

1. The orange button looks clickable. It also gives an impression that if you click it, you may find more information.
2. The blue box in the centre looks like a tabbed presentation. Clicking on the tabs “Bundle” and “Win Squared Technique” should provide more information.
3. Grey round buttons on the bottom panel are certainly clickable.

In reality the orange button is not clickable. The blue box is not a tabbed presentation. Essentially, it is just a single label for the same info. Misleading, isn’t it?

Let us look at the properties of these elements in the course.

Now let us analyze the affordance of elements on few more screens.

Which elements are clickable on this screen?

1. Do you think the bulleted points in blue on the computer screen are clickable? Yes, they are meant to be hyperlinks and are clickable. But they do not have the affordance of hyperlinks. The text is blue but it is not underlined.
2. What about the colored tabs on the left, do they look clickable? Well, yes and no. The fact that they resemble tabs of a diary makes them clickable but then again they are disjointed and this gives an impression ot being just color box
3. Do the points in the box “What happened?” look clickable? They certainly do not look clickable. It looks more like a checklist of things. However, this is intended to serve the purpose of a menu. Clicking each point on this menu will take the learner to the corresponding screen

Let us look at the screen below.

The blank button holes in the center certainly look “droppable”, but the elements on the extreme right do not look “dragable”. They may look clickable but not dragable. The other reason why they do not have the affordance of being dragable is because of their location on the screen. They are on the extreme right of the screen. They do not match with the mental model (we will discuss this another time) of learners who typically drag things from left to right or top to bottom.

In comparison, look at the screen below. The unorganized pieces of the jigsaw puzzle have the affordance of being dragged to fit into the blank space alongside.

Let us discuss the affordance of the elements in the screen below.

What do you think of the affordance of the following in the image above?

1. Visual layout – Does the layout have affordance of visual hierarchy? Yes, it does. The visual layout aids readability. Each chunk of information aids the learner to read, understand, and act on the information. You do not have to provide instructions for the learner to move on the screen.

2. What are the elements that are clickable on this screen?

1. • The option buttons in the text box in the lower half of the screen
   • View Another Complaint- Red button
   • The small round buttons on the bottom-left corner of the screen

The option buttons, “View Another Complaint” button, and the small round navigation buttons have affordance. Learners do not need instructions for these activities.

3. Do you think anything else can be clicked on the screen?

If you have prior exposure to eLearning, then you may guess that a learner can view the Course Map, Resources, Glossary, and Audio. However, on the screen, these buttons do not look clickable. The learner may need instruction to perform any activity on the left panel. For example, the learner may not click Glossary if he/she wants to know the meaning of a term.

Let us look at affordances of tabs in eLearning courses. Can you guess which tabbed page (vertical tab or the horizontal tab) has more affordance and why?

(Fig 1)

(Fig 2)
Before we make a decision, let us understand tabs. In real-life, tabs are used to mark file data or mark information in files in the drawers, organizers, and telephone diaries. We use the same mental model in eLearning courses to denote information that can be pulled out by clicking the tabs. So, a tab should have the property of being “clickable”, “thumbable”, sortable, or pullable to reveal concealed information.

Based on this understanding, which of the two tabbed pages have the affordance of a tab? Most tabs in real life are either vertical (files in a drawer) or horizontal (telephone diaries). But very few tabs are horizontal and organized on the left as in Fig 2. These types of tabs (Fig 2) have poor affordances as they do not match the mental model of the learner. The learner may not click the tabs without instruction unlike the vertical tab (Fig 1) where the learner will click the tabs without instruction.

Conclusion
So, let’s conclude based on the above screens. eLearning course makers must ensure that the on-screen elements used in the course have affordances. Buttons should look “clickable”, tabs should be “clickable” or “pullable”, hyperlinks should look “navigable” and objects to be dragged should look “dragable” and “dropable”. A quick check for affordances is to find out the properties of these elements in real life and understand how users act on these buttons in real life. If the elements have affordances, we need not spend valuable time and space giving instructions to learners to act on these elements. Instructions take learners away from the core content of the course (this will be another research area—instructions in eLearning.)

Absence of affordance in eLearning can mislead learners and prevent them from achieving their learning outcome. Remember, you cannot “afford” to lose your learners!!

Share this