Affordance in Interaction Design: Examples and UX Implementation

The objects we encounter in daily life (and in UI design) all have different properties and characteristics. In this section, we will learn how to use these varying properties to achieve our design goals. We will also learn which objects to choose based on their respective properties.

What does affordance mean?

Affordance is a property in which a product’s functions are influenced by the physical properties it possesses.

Every object has its affordance. Some objects are better suited for some functions than others.

Take our hands for example. When we grab something, it’s easier for us to use our hands than our legs. The reason is that our hands can afford to grab things due to their physical properties.

Similarly, shovels are great for digging. While a steel rod can also be used for digging, it is fairly intuitive for us to use the shovel. This means that shovels can afford to dig better than steel rods.

How does Affordance improve our Products?

1. Affordance increases efficiency.

When objects are used for their intended function, the design produces better results.

Wheels in chairs are way more efficient than replacing them with cubes. We can make cubes work instead of wheels but it won’t yield the same results.

Thus, using objects for their intended function is the most efficient way for us to work.

2. Affordance helps familiarize people with objects and their functions.

The wheels in the chair afford mobility. Thus, people will understand and memorize their purpose. On a larger scale, it helps people grasp concepts of objects easily.

It’s said that if used properly, the affordance property makes it seem inconceivable that a particular design could be used in any other way.

Using Affordance in UI design

We now know how affordance helps users. So how do we use this property in product design?

Use real-life objects in our designs so that users can relate. For example, using a trash can as an icon for storing deleted items to imply the way a certain function is supposed to be used.

The recycle bin uses a trash can as an icon. This directs people in understanding that unwanted files or apps are stored there.

Similarly, the general layout of a real-life button is imitated in websites. It makes them look like an object which can be pressed. So the design is self-explanatory.

We can use everyday objects to guide people without adding any instructions. This makes the app simpler. It also enhances the usability of the design.

Summing Up

• Due to physical properties, some objects are better suited for some functions than others. This property is affordance.
• If possible, we should always try to design products to afford their intended function to maximize efficiency.
• Use images of common physical objects to simplify designs.

Further Reading

• 80/20 Design Rule
• Designing products for all: Accessibility
• Influencing Users through Discomfort: Cognitive Dissonance