Key Concepts for the Interaction Designer: Affordances

Editor’s Note: This article is excerpted from James Pannafino’s book: Interdisciplinary Interaction Design: A Visual Guide to Basic Theories, Models and Ideas for Thinking and Designing for Interactive Web Design and Digital Device Experiences.

Interactive design is about more than technology. It involves how we deal with user- centric design problems. However, traditional design principles don’t always align in context with this new type of design thinking.

More and more, the core principles of interactive design are best fostered in an interdisciplinary approach. Each month James Pannafino and HOW Design will expose you to new, key terms or processes that create a new language to apply to your interaction design and way of thinking.


When objects or designs signal properties or functions, the affordance describes to us what they are used for or what they do. A handle on a drawer allows (or affords) us to push and pull the drawer. Similarly, a button on a digital page affords us to press it. If the affordance is used properly, a basic task should be easily utilized. When a basic affordance is too complex and needs more description, then the affordance no longer informs the user about the design’s purpose.

Physical Affordances

physical affordances, interaction designer, web design

A vertical crossbar on a door affords the user to open the door by pushing (left). The handle signals pull, but the function does not afford the user to complete the task; it needs further explanation and fails as a basic design (right).

Digital Affordances

interaction designer, interactive design

In digital design, many times the screen is flat and there is no dimensional cues to signal the ability to click. Designers must rely on visual form / dimension and proximity of elements to communicate the affordances to click or take an action.


interaction designer


Familiar shape and dimension of buttons afford users the ability to click that area to create an interaction. Note: This is just one of many possible examples.



Interaction designer, interactive design


Proper spacing between navigational elements and content affords the user the ability to click a button.

If you have a interactive concept you like to have explained, please email suggestions to jpannafino[at]

More Resources:


Want to learn more about interactive design and grow your skill set? Check out HOW Design University for courses spanning all experience levels.



One thought on “Key Concepts for the Interaction Designer: Affordances