See What Clicks with Visual Affordance Tests

Visual affordances refer to how the appearance of an object indicates how it should be used.  Here are some visual affordances with a bowling ball:

• Three holes the size of human fingers = put fingers there
• Triangular configuration = one hole is for your thumb
• Round object = throw or roll
• Heavy, round object = ok, roll it

According to Don Norman, author of The Design of Everyday Things, a design has failed when simple things needs lots of labels and instructions.  Visual affordance is the key to understanding the “function” of a product.

Procedure

You want to perform a visual affordance test for these reasons:

1. Validate if calls to actions are recognized by customers.
2. Reveal elements that might mislead your customers.
3. Reduce customer frustration with elements found in a visual affordance test.

1. Print out the page you want to test for visual affordance.
2. Give your customers a yellow marker.
3. Ask participants to highlight objects that are clickable.
4. Optionally, you can ask participants what they expect to happen, if they clicked on it (yes, it is an expectation test).

Several years ago, I performed a Design Studio Workshop, which is a facilitated sketching workshop.   The purpose of the Design Studio was to build a widget to show how changing out an incandescent bulb with an LED one would save money and energy.  The widget is shown below.

In this design, we were concerned with the sliders, embedded links, and visual elements (bulbs and our calculations).  We used a tool by Optimal Workshop called Chalkmark, which is specifically designed for Affordance Testing.

Our first question was: “What is this Year’s Main Topic?”  As illustrated below, most customers were able to determine the tagline of “Designing for a Sustainable World.” You can see random clicks, but the main topic area was understood.

We next asked this question: “What do you click to see impact of changing out a bulb?”   In the picture below, all of the affordance make sense.  You are either learning directly on this page or going to a secondary page.

In our third question we asked:  “What do you click to get more information?”  We see two predominant affordance clusters, which are both correct.   The pictures or link to the secondary page would get you more information.

Lastly, we asked: “What number best represents your energy savings?” We see clusters around the Money savings, kW Hours number, and LED bulb count pics. These clusters all make sense. We do have some clicks to more information (which is OK, but a stretch). I am not sure what to make to the click on the secondary slider.  We had 30 people take this affordance.  We had an intuitive design.