What is affordance?

Affordance refers to the perceived or actual properties of an object that suggest how it can be used. In design, affordances help users intuitively understand what actions are possible, such as a button suggesting it can be clicked or a handle suggesting it can be pulled. Effective affordances reduce the need for instruction or explanation and allow users to interact naturally with products. For example, a scroll bar affords vertical scrolling, and a door handle affords pulling. Recognising affordances helps designers create user interfaces and products that feel intuitive and aligned with users' expectations.

Best Practices for Implementation:

1. Ensure Visual Clarity

Use clear visual cues that suggest the function of interactive elements. For instance, buttons should look clickable, with appropriate visual affordances like shadows, highlighting, or distinct colours. This allows users to easily identify how to interact with elements without requiring additional instructions.

2. Consistency Across Elements

Keep affordances consistent across similar elements. For example, buttons across your interface should behave the same way and look similar. Inconsistency can confuse users and disrupt their mental model of how the interface functions.

3. Design for Intuition

Align design elements with real-world expectations. For example, sliders for volume controls resemble physical sliders, leveraging users’ understanding of how similar objects work in real life. This reduces the learning curve and makes interfaces feel more natural to navigate.

4. Use Signifiers When Necessary

While affordances should be obvious, sometimes additional signifiers (e.g., labels or icons) help reinforce what an object can do. For instance, a "play" icon on a button not only suggests that it can be clicked but also indicates the result of the action.