Physical properties of an object or environment that defines or elucidates its possible uses.

Some objects or environments are better suited for certain uses than for others. A steep slope with stairs built into it is better suited to a human's climbing than one with a smooth surface, a round wheel is better suited to rolling than a square one, or a door with a protruding handle is better suited to being pulled than one with a flat metal plate. These objects' physical properties make them more convenient for people to perform these actions, and their properties can even imply these actions to an observer simply through their physical form. These objects and environments are said to better "afford" these actions.

The "affordances" of an object then, are all the actions to which its physical properties make it better suited. As you can probably imagine, depending on the object, the list of its potential affordances could be very long. However when people refer to an object’s affordances, they usually aren’t referring to every single action it could afford, but to the one or two things that it most obviously affords to the people who are most likely to be using it. In this way, affordances exist in this strange place between the objective and the subjective. What actions an object affords are based on objective truths about the object: its size, shape, and other properties; but they are also based on how those truths relate to capabilities of the individual using the object. A teapot affords pouring to an fully-abled person, but not to one who can't easily grasp objects.

The subjectivity of affordances goes beyond the capabilities of a users, but also into that user's motivations and intentions for an object. Upon seeing a fist-size rock, one person might see an object that affords weighing down their papers, while another might see an object that affords being thrown through a window. In his article that first coined the term (The Theory of Affordances), James Gibson explores how humans will actually conceive of and contextualize objects based on the actions the objects afford them, instead of on the actual physical properties of objects. For example, when asked to sort a metal knife, a stone tool, and a smooth stone, people are more likely to group the two objects that afford cutting together than they are to group together the two made out of stone.

When making a design, it's important to consider the affordances of the various components of the design as well as the affordances of the environment in which it will be used. When the obvious affordances of objects correspond with their intended use in the design, the design will perform more efficiently and its use will be more naturally intuitive to the user. Users will naturally make assumptions about components of the design based on their affordances, and if those assumption line up with the design's intention, that user has just learned something about the design without ever needing to be explicitly taught.

This can be true of the components of a game's design, but also control methods. A good example is item selection in modern console games. The limited inputs of a console controller didn't easily afford selecting from linear lists of items that were common on PC games, so over time more and more console games have moved to radial menus that the joysticks of a console controller easily afford selecting from.

In Prey (2017), on PC you could select weapons using number keys which afford quickly pressing one of 10 (shown left), or on console you could use the thumbstick to select from a radial menu (shown right).

Beyond the consideration of physical input, it might be tempting to dismiss affordance as not being relevant to games that exist entirely in the digital space, since virtual worlds aren't constrained by the same rules as our physical reality. But, in some ways, in this space affordances become even more important. Users bring their preconceptions and knowledge from the physical world into your digital one. By using the language of physical affordances that are already universally understood by your users, you can more easily demonstrate the uses and restrictions of your digital world without ever having to teach our users anything.

A great example of this is in the early days of touchscreen phone UI design. Apple especially known for their skeuomorphic UI designs with the original iPhone. For each piece of UI on the iPhone, the designers modeled it after a physical object who's affordances a user would already be familiar with, then made sure that their digital facsimile had similar functions in the program - a physical dial affords spinning to set the correct date, a physical button with beveled height affords pushing in, a physical paper page affords turning it with a swipe of your finger. Users already knew how to use the UI because they knew how to use the objects off of which it was modeled.

Similar to these UI practices, when designing a game, try to model different actions, resources, and environments off of real-world equivalents that afford the same functions you would like their in-game equivalents to perform in the game systems. This will assist in the player learning the game and create a more immersive, realistic-feeling experience for them in the end.

Affordances in UX Design

As you probably noted above, digital interfaces have moved away from the skeuomorphism of the early iPhone UI over the years. New interfaces have cleaner, flatter designs that take advantage of all the things digital spaces can do that their physical counterparts cannot. As this evolution occurred, UX (user experience) designers needed to spend a lot of time evolving the understanding of how users related to and understand their digital environments. They found a lot of use for the term "affordances," and in this subdomain, it has taken on a much more specific definition than the broad one I've offered above.

A UX designer mapping out wireframes for an app (though I have never seen someone do it physically on a wall like this in practice — A UX designer mapping out wireframes for an app (though I have *never* seen someone do it physically on a wall like this in practice

In this new digital world, there aren't physical properties for users to intuit affordances from, so the term is instead used to refer to several different methods of signaling the function of the interface to a user. It has become a very useful term to this domain, but I feel that its use has really started to be conflated with Signifiers (a different term which I’ll cover in a separate article one day). This is muddying what makes affordances unique, but as the term is used in this way commonly now, I wanted to make sure to discuss it here.

There are six different types of affordances in UX design that people discuss. I'm not sure who originally coined these six terms, but the earliest reference to them I can find is in this article by Paula Borowska.

Explicit Affordances

Explicit affordances are any visual hints given off by the physical appearance of the design or any text that appears in in. Examples of this would be a button with bevels to appear like a physical button, or an entry field labeled with "Address" so users know what to write.

Pattern Affordances

Pattern affordances are those actions that are used so commonly by other digital UIs that they have established a convention. Settings menus being represented by a gear, or swiping right to bring up settings on Android are both examples of this.

Hidden Affordances

Hidden affordances are those that aren't readily apparent until the user actually starts interacting with the interface. Drop down menus or right-click options on PC are both good examples of this. Nesting functions into hidden affordances can simplify the initial appearance of the design, but designers should be cautious, as hidden affordances can often be missed by users.

False Affordances

False affordances are created when a component of the UI signals an affordance to the user for a functionality that it doesn't have. These are almost always errors, and are rarely purposefully built into a design. Examples might include a button that does nothing, or a gear icon that leads to a menu other than settings.

Metaphorical Affordances

Metaphorical affordances signal the use of a digital object by drawing a comparison to something the user already understands. The skeuomorphism from the original iPhone UI discussed above leaned heavily into this, as does a lot of the concept of the "desktop" on PC operating systems - folders, cut, copy, paste - all these original functions were named based on physical objects or functions people already understood.

Negative affordances

Negative affordances aren't actually an affordance at all, but a signifier of a current lack of affordances. Greyed out buttons are the quintessential example of this. This signals that there is sometimes an affordance there, but there currently isn't.

Featured posts:

Affordances