Affordances in UI Design

What are affordances? 

  
In design, an affordance is the relationship between the objects we design and the way in which users interact with them. Think of affordances as a cue which gives a hint on how an object should be used. A well-designed affordance leads a user down the correct path. 
  
“Affordance'' was coined by James Gibson who was an American psychologist in 1966. He specialised in visual perception and published two books: “The Senses Considered as Perceptual Systems” and “The Ecological Approach to Visual Perception”. The term was further explored by Donald Norman in 1988 in his book, “The Design of Everyday Things”. According to Don Norman the term refers to “the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.”  
  

Affordances in the physical world  

   
You may not realise it, but our world is surrounded by affordances that help us use certain things. For example, the way in which a chair is designed tells a person they can sit on it. A car door can only be pulled to open from the outside and can only be pushed from the inside. A button in a car used to control a window is designed intently to help a person open or close the window without thinking about it. Push the button down to move the window down and pull the button up to move the window up.

A classic example of affordances gone wrong is the Norman door. Have you ever approached a door and wondered if you should push or pull the door? If yes, then the design of the door was not clear. A well-designed door will easily communicate to the user how to interact with it. For example, a door with no handle that says “Push” clearly indicates you should push the door.

Norman door

Types of affordances in design  

  
Digital affordances are derived from our interactions with objects in the physical world. They play a key role in how people interact and experience different interfaces. Affordances have a direct effect on users being able to achieve their goals. Let’s look at the fundamental affordances you will typically find within User Interface (UI) and User Experience (UX) design:  
  

Explicit affordances  

 
Explicit affordances are the clues given by the physical appearance of an object. An example of this is when you see a button on an app, your brain will automatically understand that this object is interactable. This is because the button is designed to be visually similar to buttons in the real world. If the button has copy or iconography attached, then the affordance becomes clear.   
   
The use of copy is an important accessibility consideration when communicating design elements like buttons and text fields. A button that says “Purchase” affords the user to interact with that button and allows them to buy those new Nike Air Jordans they’ve been waiting for.

Implicit affordances  

   
Implicit affordances are also known as hidden affordances. These are affordances that are not seen at first and require an action to be seen. Examples of this include iOS pull down menus, iOS action sheets, tool tips, or hovering over a button to show interactivity. Hidden affordances are smart ways designers can lessen visual load and complexity.   
   
Pull down menus or action sheets will hide different content options and will only be revealed once you interact with the menu item. These implicit affordances can be missed if the design is not clear enough, resulting in a bad user experience.

Pattern affordances  

   
Pattern affordances occur by convention. They are interactions a user would automatically recognise and know how to use because it has become universally understood. An example of this is underlined copy which informs that the copy is clickable. Designers can create UI Pattern Libraries for familiarity and consistency. The Human Interface Guidelines and Material Guidelines are great examples of UI Pattern libraries designers can utilise to create familiarity and consistency in their apps. 
   
Pattern affordances save people the effort of learning new interactions.

Metaphorical affordances  

   
Metaphorical affordances make use of metaphors to communicate meaning in an interface. An example of this is the use of a phone icon to call someone. The phone icon mimics the visual elements that a real telephone has, making it easy for the user to understand. Another example of a metaphorical affordance can be seen in the adoption of skeuomorphism in some earlier Apple interfaces. The aesthetic of skeuomorphic design was to literally mimic real-world textures, light sources and shadows to make elements on screen look and feel like the real thing.

Animated affordances  

  
Animated affordances are affordances cued by animation. Animation in user interface design creates a powerful connection between the outside world and the digital world. Animated affordances tell the user how to use something or how something is being used by animating the object in the same way we see objects moving in the real world. Examples such as swiping, scrolling, pushing, pulling and dragging can be animated in an interface in the same way we perceive and interact with real objects and elements.  
   

Negative affordances  

   
A negative affordance is basically no affordance. This is a key factor to consider when designing an interface. There are instances when an interface needs to tell the user that they can’t do something, or that something is inactive. An example of this would be an inactive state of a button. The purpose of this is to let the user know that action is needed in order to continue to the next step or complete a task.

False affordances  

  
A false affordance is when something unexpected happens. These affordances often lead to a negative user experience. An example of a false affordance is when selecting an active button, but nothing happens, no feedback is provided, and the system does not respond to the users action.  
  

Conclusion  

  
Affordances play a crucial part when designing experiences for people in the physical and digital world. It is the responsibility of the designer to make sure our designs are intuitive and inclusive. We should strive to design affordances clearly and easy to use and considerate of all user types and abilities.   
  

References  

 
https://www.interaction-design.org/literature/topics/affordances#:~:text=Affordances%20are%20properties%20of%20objects,key%20to%20users'%20desired%20actions

https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4#:~:text=Affordance%20is%20a%20property%20or%20feature%20of%20an%20object%20which,it%20to%20open%20the%20door

https://blog.prototypr.io/affordance-and-its-future-in-designing-interfaces-973a48ae8a0
 
https://uxdesign.cc/intro-to-ux-the-norman-door-61f8120b6086 
 
https://medium.com/@thoughtbottler/affordance-the-indicator-of-good-design-1977362f4ea9