Affordance is a mysterious word the first time you encounter it. Do you know the story of the evolution of keyboards with QWERTY and AZERTY layouts? Different legends have different stories to tell. But they all claim that the developments happened over time to make life simpler for the people using it.
Explaining affordances
Affordances in digital media focus on the interaction that occurs between people and technology.
The concept of affordances was first developed by Gibson in 1979. In its original definition in psychology, it includes all activities that are possible between an individual and their environment. Therefore, an affordance according to Gibson does not vary if the individual’s needs and goals change.
Affordances were then popularized in design and Human Computer Interaction(HCI) research by Norman in 1988, who established them as the design feature of an object. This definition explains that the nature of an object commands how it should be used. Later on, subsequent researches mentioned that affordances could evolve through direct interaction with technologies. This often leads to processes of experimentation and adaptation. Such processes, in turn, can mould people’s behaviour with different technologies.
Redefining affordances in design
In Norman’s book The Design of Everyday Things, this interpretation was popularised within HCI, interaction design, and user-centred design. It makes the concept dependent not only on the physical capabilities of an individual, but also on their intentions, beliefs, and past experiences. Thus affordances are prompts that give clues to users on how they may interact with something, irrespective of whether it is a physical object or digital.
According to Norman, “…the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. […] Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”
So when you see a pen, it is a prompt for you to write with it. Similarly, a button on an interface is a prompt for you to click it. Affordances support our successful interactions with physical and digital objects.
Affordances and digital users
Users must be able to develop an accurate picture of the interface, so that they can immediately predict the consequences of their actions.
Today, users can touch, shake, swipe, rotate… digital components in a way that resemble corresponding actions on a physical object. The use of physical affordances as a source of inspiration in the design of products offers the possibility of a seamless transition from the physical to virtual. However, it may influence the user negatively, especially if the required behaviours are similar but the effects are variable.
Examples of affordances in user interfaces
Explicit affordances are recognised by expected prompts that direct the user to a particular action. For example, when a button has a label describing an action, then its purpose becomes clearer.
Graphic affordances are displayed with visuals on an interface. They help users to understand its functionality. Graphics of all kinds are perceived quicker and retained better than copy hence they are important. Examples are photos, branding signs, illustrations, buttons, notifications etc.
Yet, pictures always do not explain everything. This is where copy or language affordances comes into play. Copy hints and prompts help users understand what to do or what to anticipate. They determine what information to be retained. For example, users derive meaning from reading labels, instruction manuals, newspapers, books etc. In a digital world, it is no different. It is a candid way to interact with a user.
Janet Walker mentions four affordances: procedural, participatory, encyclopedic, and spatial.
- Procedural affordance means that the device can complete a limited number of relevant actions.
- Participatory affordance means the “actions of humans and machines are meaningful to one another” (Walker), so people can interact with the digital device in a way that benefits both parties.
- Encyclopedic affordance is being able to store and retrieve information.
- Spatial affordance means the medium is presented in a way easy to navigate and use.
Twitter’s use of the four affordances helps it stay at par with modern tech and user needs:
- It has a straightforward design that is compatible with both mobile and desktop
- A home icon features the timeline of feeds the user follows.
- A search icon lets users find other people and explore content.
- A visibly distinct tweet icon allows people to post content of their choice.
- A bell icon shows notifications the user received
- An envelope icon takes the user to personal messages.
Apart from providing users with relevant feeds, it also helps users search based on #hashtags. Thus Twitter has a limited number of well-defined functionalities that are user-friendly. It is a platform for users to share content with a limited set of characters primarily using the concept of hashtags to gain popularity. People can post content of any form and can access other public content as well to view, like, comment etc. When we take into consideration all the above affordances and see how it is applied to modern day applications, we can conclude that affordances is all about staying relevant to your user needs. It is about how easy you can make your solution for your users while satisfying all their requirements.
We hope our article afforded you to learn more about this interesting subject. Stay tuned on our blog for more articles on experience design and UX, or follow our publication on Medium.