Does Your Website come with Affordances?

User Experience | 19 August 2015

It may seem too simple, but in our work here at Hi INTERACTIVE we have worked on several projects in which the concept of affordance was key; if you wonder whether all elements in your website are easily understandable for users, you are unknowingly looking for affordances. After all, your website may look stunning, but if it doesn’t ‘feel comfortable’, what is the likelihood of anyone spending too much time on it? Keep reading to understand where the concept of affordance came from and how it can be deployed in your best interest.

What are affordances?

It was the psychologist J. J. Gibson who, in 1977, first mentioned the term affordance in his article “The theory of affordances”; two years later, this same term would be fully explored in the book The Ecological Approach to Visual Perception. At the time, he defined affordance in a very simple way, noting it as the relationship between a given environment and an actor. At the time, affordances were already relevant for the field of design, since we all live surrounded by objects, whose use is sometimes more, and sometimes less, obvious. Affordance is not a particular feature of a particular object; it is rather the possibility of performing a given action with that object (for instance, a doorknob is an affordance of the door).
Originally, the definition of affordance as presented by J.J.Gibson referred to the set of all physical actions a user could take with a given object. This initial definition has evolved over time, due to the technological evolution of digital interfaces and nowadays also includes something called discoverability of actions. Discoverability is another interesting concept, quite pertinent for the digital sphere and points to the fact that it is through interaction with an interface (such as a computer) that you come to discover the actions you can take.

Why are they important to the digital field?

The digital field has a peculiarity compared to physical objects: regardless of whether your interface is a computer screen, a tablet or a smartphone, you’ll be dealing with a two-dimensional space. This means that we cannot get any physical clues from the object itself; all we get are visual clues, or affordances. This makes affordances possibly even more important in the digital field, since a make-or-break situation can be more easily created, whereby your users can either be drawn to your website or repelled by it. On a more business-like note, affordances also have a role to play in terms of conversions, which is all the more reason why investing in successful design can make all the difference.

Examples of digital affordances which are great to have

UX Designer Paula Borowska, in her great article "6 types of digital affordance that impact your UX", talks about several different kinds of affordances:

Explicit affordance: hints given off by language or by the physical appearance of the object (think red button saying ‘touch me’). Any language used on your website can provide valuable clues on things you can do: just think how useful it is, when filling out an online form, knowing whether you are supposed to fill it with numbers, letters or both.

Hidden affordance: this kind of affordance is usually employed to make complex visual designs simpler. Think drop down menus: you only see them when, for some reason, you need to use them. Instead of displaying all navigation options at once, which risk cluttering the screen.

Our very own Hi INTERACTIVE case studies on affordances

The case for affordances is no stranger to our work and there are at least two projects worth mentioning: Concertos para Bebés (Concerts for Babies) and the British Hospital. For the first of these two projects, we created a gallery of images which can be browsed horizontally; the tiny hand you’ll see on the screen is the affordance, or visual clue, which informs the user on how he can browse the gallery effectively. In the second project, we have divided the navigation bar into two: you can use the upper navigation to select the category you are looking for and the lateral navigation to select the medical specialty.

Don’t miss out on all the benefits you can get from affordances: contact us.