What's an Affordance in UX Design? - UX Terms to Know

First, let's clear up a common misconception: affordances have nothing to do with how much money you've got in your pocket or what you can “afford” (sorry, bad joke). But, mishandle them in UX, and they might just affect your company's bottom line! What’s an affordance in UX design?

Affordances in UX design refer to the potential interactions an object or element can offer. You can think of it as the unspoken language between a user and an interface. A clear affordance definition would be the possible actions that an interface element suggests, both from a UI standpoint (visual cues) and from users' past experiences.

Here’s a video you can watch to quickly learn what affordances are and why they’re significant:

The origin of affordances

American psychologist James Gibson first introduced the term "affordance" back in 1977. His explorations, which many stakeholders in the UX industry now embrace, provided a fresh perspective on how end users perceive and interact with the digital world, aligning closely with their mental models. It revolved around the interactive possibilities an object presents to its users.

Fast forward a few years, and the concept of affordances was later popularized in the design community by Don Norman. He emphasized that affordances are not only physically possible actions, but are the ones that users perceive as possible.

Here are some real-world examples of affordances:

• The "insert coin" slot on a vending machine? This is a classic UX affordance indicating that a coin should be deposited.

• A website button's material design makes it look clickable, thereby reducing a user’s cognitive load and fitting their mental model of interactive elements.

• The dropdown menu with a pull-down arrow is a blend of both affordances and signifiers, suggesting more options.

Why are affordances important?

A successful design often strikes a balance between these different affordance considerations to create a seamless and user-friendly experience:

Usability and clarity

Affordances enhance usability and provide clarity on how to interact with an interface. Users should be able to easily understand how to perform actions without confusion.

Improved intuitiveness and increased efficiency

For UX professionals, understanding affordances is essential to reduce the learning curve for users. When interactions feel natural and require minimal thought, users are more likely to have a positive experience.

In addition, affordances promote efficient interactions that allow users to accomplish tasks quickly and without unnecessary steps or delays.

Error prevention and inclusivity

Affordances guide users away from unintended actions and errors. Preventing user mistakes can save time and frustration for both the user and the designer.

At the same time, well-designed affordances cater to a broad range of users, including those with varying levels of experience and abilities. It also benefits users who are new to a platform or technology making the design accessible and inclusive.

Consistency

Maintaining consistency in affordance across an interface is important for building trust and ensuring that users can predict how elements will behave. It allows users to focus on their tasks instead of figuring out how the interface works.

Types of affordances in UI

Here are some affordances to consider when designing a product or service:

Perceptible affordances

These are visible characteristics of objects that naturally suggest to users how they should be used, making it intuitive for you to engage with them. For instance, a pull-down lever on a water dispenser is a perceptible affordance because it provides hints on what actions are possible with them.

Pattern-based affordances

Pattern affordances are common design elements that users have seen repeatedly across different platforms. Because they follow standardized UI practices, users recognize their function instantly. For example, the hamburger menu (☰) in apps and websites signals hidden navigation, and the shopping cart icon (🛒) in online stores, are familiar patterns that users instantly recognize. 

Hidden affordances

In cases where affordances aren't immediately apparent in user interfaces, users like you rely on your prior experiences or trial and error to identify potential actions, such as hovering or clicking to reveal dropdown menus.

False affordances

False affordances occur when an object's features mislead you into thinking you can perform certain actions that aren't actually possible. An example is a decorative button that appears clickable but has no functionality.

Sensory affordances

Sensory affordances include design features that engage your senses, like providing audible or visual feedback (e.g., a ping sound) to signal the availability of an update. When users interact with a digital interface, they rely on immediate cues to understand whether their actions were successful. Sensorial affordances ensure that these cues are clear and responsive, reducing uncertainty and improving usability.

UX affordances have a partner in crime: signifiers

Alongside UX affordances, there are signifiers. These are cues that guide users on how to recognize and interact with affordances.

For example, picture the website's search bar as the affordance. Now, when you see a magnifying glass icon inside or next to it, think of it as the signifier. That magnifying glass icon tells you, “Click here to start searching.” It's like a sign saying, “This is how you find what you're looking for."

The Inclusive design principles dictate that good UX lies in striking the right balance between affordances and signifiers so that interfaces can remain intuitive, reduce design debt, and align well with usability heuristics.

As the design process progresses, evolving from initial wireframes to the final prototype, careful consideration of affordances becomes essential. Designers often employ various tools and techniques, such as affinity diagrams, user personas, atomic research, focus groups, and triangulation methods.

These methods help refine the information hierarchy, ensuring that the end product, even when starting as a minimal viable product (MVP), aligns closely with user expectations.