top of page
  • Writer's pictureproformUX

The Role of Affordance in Interaction Design

If you spend any time with a CX/UX professional, you'll quickly find that we love our buzzwords- words which we have happily hijacked from the common vernacular and to which we have assigned myriad new meaning. The next few posts will deal with the demystification and disambiguation of several CX/UX terms which we often toss into the pot.

Today's foray into the etymology of CX cult jargon deals with the term "Affordance".

According to Wikipedia:

"An affordance is a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling.

The term is used in a variety of fields: Perceptual perceptual psychology, cognitive psychology, environmental psychology, industrial design, human– computer interaction (HCI), interaction design, instructional design and artificial intelligence.Different definitions of affordance that have developed are explained in the following sections.

The original definition described all action possibilities that are physically possible. This was then refined to describe action possibilities of which an actor is aware. The term has further evolved for use in the context of HCI as indicating the easy discoverability of possible actions."

Don Norman recommends four (4) simple conventions to follow when making design decisions relative to their value as offering or creating affordance:

  1. Follow conventional usage, both in the choice of images and the allowable interactions

  2. Use words to describe the desired action (e.g. "click here" or use labels in front of perceived objects).

  3. Use metaphor

  4. Follow a coherent conceptual model so that once part of the interface is learned, the same principles apply to other parts.

J.J. Gibson - a pioneer of Affordance Theory

American psychologist James Jerome Gibson was influential in changing the way we consider visual perception. According to his theory, perception of the environment inevitably leads to some course of action.

Affordances, or clues in the environment that indicate possibilities for action, are perceived in a direct, immediate way with no sensory processing. Examples include: buttons for pushing, knobs for turning, handles for pulling, levers for sliding, etc.

Based upon Gestalt theories, Affordance Theory has various implications for design, human-computer interaction, ergonomics, visualization, etc. Some believe that good design makes affordances explicit.

According to Danish UX researcher Mads Soegard:

The distinction between Gibson's and Norman's sense of affordances allows us to distinguish between the utility/usefulness and the usability of an object: We both design for usefulness by creating affordances (the possibilities for action in the design) that match the goals of the user (the relativity of the affordance vis-à-vis the user) and we improve the usability by designing the information that specifies the affordances (perceptual information as shadows on buttons to afford click-ability etc.).

Expanding and illuminating Norman's "Affordance Criteria" for enterprise interaction design: 1. Follow conventional usage, both in the choice of images and the allowable interactions

While convention certainly (sometimes appropriately!) limits creativity, not following conventions can doom an interface to failure. "Conventional Usage" does not imply that internal conventions are to be considered as universal usage models.

"Conventional Usage" means the usage of proven, observed, and used conventions which, by way of great volumes of interactions, are both replicable and reliable for design inclusion.

An example of this would be a doorknob placed on a door about the height of one's hip, versus at the center-top. Affordance between knob and door are established interactions based on best practices.

Best practices are derived from mass usage of a convention.

The acceptance of the relationship between two or more elements relative to a usual and expected action can be described has having "affordance", or that "the elements provide a good example of affordance".

2. Use words to describe the desired action (e.g. "click here" or use labels in front of perceived objects).

Again, the relationship between the desired action and the text label should be examined (e.g. learn more, click here, contact us, watch now)

While words are more easily and more quickly understood than graphics, care should be taken to represent the text in a way that offers affordance within the context of the action experience.

The call-to-action should distinguish itself from other textual elements on the page, but should still connect itself to the context in which it is found - whether a banner, right-rail graphic, in-line text link, or other pattern.

One of the most prevalent affordance blunders in call-to-action items is the use of styling which seems to provide affordance with the contextual element (banner, article, ad, etc.) but fails to offer full affordance with the entire palette and branding context of the entire web experience.

Project silos are the most frequent perpetrators of full affordance blunders as they fail to take the full path of a user's journey through the site to their content area, into account.

3. Use metaphor

Look for a more expansive discussion on the use of metaphor in design on a later date....

4. Follow a coherent conceptual model so that once part of the interface is learned, the same principles apply to other parts.

Norman asks the pertinent question relative to this criterion: "...there still remains the bootstrapping problem; how does one learn the model in the first place?"

The creation of consistent models and patterns of interaction are vital to the integrity and cohesive usability of an enterprise website.

While standards of practice always face the brutal hordes of use cases forever assaulting the boundaries of the definitions which determine their existence, it can and should be said that strong, usable, and meaningful interaction conventions are borne out of the intense pressure of repeated observable use.

The enterprise website with a broad and expansive user base can find itself both in a constant struggle to define its standards, while at the same time be faced with an exceptional opportunity to observe use and establish fully interpreted models of convention which not only function well, but also follow good form.

The last word on Affordance:

A well socialized standard of affordance goes an exceptionally long way in eliminating subjectivity throughout the interaction design experience. All interface design should be filtered through the lens of the principles of affordance when deciding if we "like" the way information is presented.

Following a pattern currently in production is not enough to say a newly created element passes the test to endure unless that pattern has also been vetted against meaningful affordance standards.

Correct patterns are not built on repeating prior patterns. They are built on the basis of proper affordance based on observed and predictable use; use which results in the achieving the correct objective experience.

Establishing Key Performance Indicators is an excellent way to measure the success of one's pattern model library. More on that to come...

390 views0 comments

Recent Posts

See All


bottom of page