What Tinder Affords?

Don Norman was very clear in his distinction between real affordances vs perceived affordances. Real affordance is more similar to Gibson’s original definition – “An affordance is an action possibility formed by the relationship between an agent and its environment ( J. Gibson 1977; J. Gibson 1979)…… An agent does not need to be aware of the afforded action, such as the affordance of opening a secret door.”  Perceived affordance would be a doorknob popping out of an otherwise plain door. Of course, the door would no longer be a secret door then!

It is a fine line between convention and affordance as it really depends on what is considered universal. A button affords to be pressed or is it a learned convention over 200 years? It is so transparent now that we no longer see it as learned. In practice this question matters a little less (in now way am I suggesting that it is to be rid of completely!) as long as we are sure buttons will prompt the user to “press” without any training, then the button is a “perceived affordance”.

The touchscreen by itself affords everything from touching, tapping, scrolling, hitting, licking, pressing, pushing the palm into it, etc. These would be real affordances and they do not necessarily have to make sense but they are the “action possibilities” (Gibson, 1979). The task then is to restrict some of these affordances (no not constraints, we will talk about constraints later) by allowing for perceived affordances to be narrowed down to real doable action translations instead of mere action possibilities. Let’s consider “Tinder”. I choose tinder because it is constrained in the number of actions that can be performed in it. On most days the only actions on this app are – swipe left or swipe right. Texting on it (a later phase) may involve some more interaction with the app features, but we will consider only the basic actions performed by users on most days.

As an icon on the touch screen, tinder does not have a perceived affordance of “tapping” but rather tapping is a learned convention and the icon is visual feedback that advertises the affordance (Norman, 40).  The icon is a real affordance but there is no obvious action potential stored within the iconography. The feedback is the app launching and taking over the entire screen. On launching, we see all sorts of icons on the display which are matters of cultural convention. (See fig)

The icons: heart, x, star, back, thunder, require training in cultural conventions, and then some context in how they are used on tinder. Without performing actions and receiving feedback one does not immediately grasp what actions can be afforded. These conventions can be divided in accordance with various constraints offered: physical, logical, and cultural. (Norman, 40)

Physical constraints are the limited spaces on the screen where one can tap and expect feedback. The embossed icons or clearly defined buttons are good conventions that call out for a command “Click here” or are good action translators (Irvine, 5) suggesting that other places are not meant to be tapped. Another physical constraint would be the otherwise white background that offers no perceived action possibilities.

The intuitive swipe left or swipe right features on each photograph on tinder are still a learned convention. Maybe if they were presented as a stack (where we could see that more pictures exist behind) then the notion of swiping left-right as if swiping through flashcards would have been a very good perceived affordance.

An easy to spot logical constraint is the photo that appears after the one you swiped. It demands a similar action out of you. The logical constraint generates a clear affordance of what to do with the pictures underneath.

Since most GUI are now touch-based, designers are primarily left to operate with cultural conventions as a way to achieve perceived affordances, but it would be great to see a perceived affordance arising without the use of cultural iconography.

Reference:

Donald A. Norman, “Affordance, Conventions, and Design.” Interactions 6, no. 3 (May 1999): 38-43.

Gibson, J. J. (1986). The Ecological Approach to Visual Perception. Psychology Press.

Martin Irvine, “Introduction to Affordances and Interfaces.”

What Are Affordances in Web Design? (2014, July 15). Treehouse Blog. https://blog.teamtreehouse.com/affordances-web-design