Affordances in User Interface Design

Full-Size.jpg

Introduction

How do you know how to interact with something? When you walk up to a door that you’ve never walked through before how do you know how to open it? When you see a button, how do you know to push it? When you see a lever, how do you know to pull it? These devices were all designed to take advantages of common actionable cognitive perception called affordances.

Affordances defined

The Merriam-Webster dictionary defines affordances as “the qualities or properties of an object that define its possible uses or make clear how it can or should be used.” In interaction design there are two competing definitions of affordances that are used. One is by James Gibson and the other is by Donald Norman.

Gibson's definition of affordances

  • Action possibilities in the environment in relation to the action capabilities of an actor
  • Independent of the actor's experience, knowledge, culture, or ability to perceive
  • Existence is binary - an affordance exists or it does not exist.

Norman's definition of affordances

  • Perceived properties that may not actually exist
  • Suggestions or clues as to how to use the properties
  • Can be dependent on the experience, knowledge, or culture of the actor
  • Can make an action difficult or easy

Tying it all together

In interface design we need to take advantages of affordances. Make interfaces that people instinctively know how to use without having to be told how to use them. One criticism of the flat UI design trend is that part of interactivity is starting to be lost for the sake of an almost sterile design aesthetic. I personally miss the interactivity that is suggested with a slightly more skewmophic approach. Buttons should make me want to click on them, not just be simply a gateway to a new section of the application.

Sources

https://www.merriam-webster.com/dictionary/affordance

https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/affordances

https://dribbble.com/shots/899177-Slide-Concept