“Affordance”, A Crucial Feature for All Products

From websites to something as simple as a door handle- affordance is crucial.

No, this is not about money and low cost solutions for products. We’re talking about affordance in reference to UX (user experience). 

Affordance means the perceived properties of a feature that show how to interact with an experience or product. Affordance is about making a potential interaction for a user intuitive. Decreasing confusion and frustration by helping them understand how and when to use a feature or product.

Affordance is crucial for users to understand your product, digital or physical. From websites to something as simple as a door handle- affordance is crucial.

Where does this come from?

The term, ‘affordance’, in design was coined in 1977 by James J. Gibson and used in the context of physical design. Later popularized by a book called, “The Design of Everyday Things” by Don Norman which explored all versions of UX & design (digital and non). 

Norman explored the shift of affordance toward a user’s perceived interaction, over the actual interaction. Emphasizing that the properties of a possible interaction must be clear and intuitive in order for users to understand what action triggering behavior is possible.

One Digital & One Physical Example of Affordance

1. Jason Friendly Foods Buttons (Gifs)
   
   A button doesn’t just have to be a static element standing on a screen. Buttons can be even more intuitive than sitting in an ordinary colored box. Affordance creates space between a user considering an action and the action itself occurring.
   
   It helps them not just see, but understand where an action trigger sits on a page and the decision to make it.
   
   For example, for our client we created not just a hover state to show a possible interaction- but a press state to show they have gone from possible interaction to intentional interaction. All elements that increase the intuitiveness of the UX.
   
   And throughout the rest of their website we’ve built tons of other component states to match the expectations consistently on any trigger. Like product cards and more.

2. Cups & Mugs
   I bet you’ve never really considered how the design of a mug invites you in. Not the colors, or the fun art you can get- but the functionality.
   
   Its handle “affords” holding the coffee mug. The shape and position of the handle on the cup signal to the user that there is a specific perceived action required to use said product (mug). Other perceived interactions for the handle on the mug may include hanging it for decoration, or holding it to clean the cup.

What Happens When You Don’t Consider Affordance

Small moments have a big impact. Without a trigger to signal a possible interaction, and signal how to interact with it, users don’t know if they can even start an interaction or complete it the intended way.

Leading to confusion, and frustration. There becomes a mismatched perspective on actions to take, and the results which leads to users being less likely to even make an intended interaction or even come back.

Some might consider these states in a digital product excessive, such as adding hover, selected and action completed. But if you sat down with all your users and asked them to choose between two interactions, which one do you think was more intuitive for them?

Questions to Ask Yourself
You can start small, you don’t need to create a giant masterplan to “fix” an experience (yet). Start with these three simple questions.

1. What small interactions do customers have with my product, services or online presence?
2. Do I provide adequate signals to take an intended action?
3. What visual feedback do I give them that they’ve triggered an action?

And if your answers start to sound like…

I am not sure if I do that.
I don’t know.
I don’t know what the signals are.
I don’t understand how to add visual feedback to an action.

Then we invite you to say hello to our team. If branding & quality UX is something you value.