If you spend a little time with customer and/or user experience professionals, you will quickly see that they use very special language. You've probably heard of UX or even CX. But, do you know the term “affordance”? No ? So much the better is that we will explain to you in this article.

History of “affordance” terminology

The term was introduced for the first time by the psychologist James Gibson. It was not until 1979 that he clarified the definition of his terminology in the book “The Ecological Approach to Visual Perception” ::

“The affordance of the environment is what it offers to the animal, which it provides, in good or bad. I invented it. By that I mean something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment ”.

Applied to design, the term only designates the possibilities of physical actions that the user is aware. In this perspective, the term was developed in the explorations of Donald Norman in his book, “The Design of Everyday Things”.

According to the expert, “… The term” affordance “refers to the perceived and real properties of the thing, mainly the fundamental properties that determine the way in which the thing could be used. The buttons are made to be supported. The slits are used to insert objects. The balls are used to throw or bounce back. In one look, the user knows what to do. No image, label or instruction is necessary ”.

With the advent of various user interfaces, affordances have received a new development vector.

But then, what exactly is digital affordance?

One of the main objectives of website design is to improve the user experience. The affordances can be used specifically to achieve this objective. At the beginning, digital means may seem without interest to the process. Some people may even consider them as counterntintive. However, digital interfaces can deeply influence the user's experience, as the interaction model changes entirely.

For example, when a person clicks on a “Submit” button, they do it due to the appearance of the button. It includes characteristic elements which indicate to users that this is an interactive element. A simple text, without effect on this one, would in no way encourage people to click. This is where digital affordances come in. Make the hyperlink look at a real button Help visitors find and use the item.

The objective is to make the digital element resemble that encountered in the real world so that visitors can easily associate the characteristics. This is what the Churchill agency does when creating and redesigning the site.

Elements of the user and interactivity interface

Website designers are responsible for the design of the interfaces that people use. They use elements that are supposed to have visitors interact with the site in question.

This means that all the elements they include in a user interface must have characteristics that make them interactive. The way users perceive and use a website is only the result of how the designer has assembled the elements of the interface. The whole design focuses on the encouragement of interaction.

The theory of affordances in websites design

Once you have understood what an affordance is and how it can be used, you will improve in the design of interfaces. The use of affordances in websites will lead to better conviviality and greater interaction on the part of users, depending on the objective of the site. An affordance can, for example, influence conversion or registration rates. Due to its visible impact, the affordance must be the main concern of a website designer before starting its work, even if it may seem delicate at the start.

Examples of affordances in websites design

Once the designers have learned to define the affordance, it is time to study the aspects linked to each type of affordance.

Labels

The labels represent the most common type of affordance. They are specific to websites that target a less informed audience in terms of technology. For websites whose interfaces are complex and difficult to navigate, the use of labels can make things easier. A label indicates the function of an element allowing the user to know what he does.

For example, when a user completes a form, he expects to have details on what he should write in each field (name, address). As all forms are personalized for each website, there is no specific model that they could follow.

The label is the clearest and most precise method to give people details on the operation of the fields and what they have to do to interact with the site.

Models

People who spend time on different websites will notice patterns between them. These patterns refer to certain actions which are repetitive and which are the same, or at least similar, on each site to which people access. For example, when visualizing images in carousel mode, users will know how to use the left and straight arrows to navigate among the images.

Carrousel mode can be used elegantly on any type of interface to report actions to visitors. People are exposed to a multitude of model offers every day, browse different types of websites. Thus, they recognize them and use them faster when they come across a similar model.

Metaphorical affordances

The easiest way to add an affordance to the design of sites is to have a real world reference. This object that exists in real life represents metaphors for affordance. Take the icons for example. Most icons are inspired by objects of real life, thus communicating affordance.

In addition, email icons use envelopes as a metaphor. The home page of a website is often reported by a house icon, which transmits the idea of ​​”going home”. Printer icons refer to the use of a printer's features, etc.

It is interesting to note that the backup icon is a disk that is obsolete technology, but designers always use it because it acts both as a metaphor and a model, insofar as people are used to this association.

Hidden affordance

A hidden affordance will only appear when certain conditions are met. For example, make a word clickable only in the overflight. The affordance is not present as long as the user has not discovered it and did not interact with it.

Designers should use hidden infordances for websites that already have a congested interface and want to simplify it visually. The only drawback of a hidden affordance is that the user must find it by himself, without having any clues that lead him to her.

A web project? Let's talk about it! Free audit