Affordance is a term coined by psychologist James Gibson in 1977. It refers to the possibilities of utilisation of a product based on the physical capabilities of the user. For example, we can open a door by turning the doorknob, pulling the door or pushing the dor to open. In 1988, Don Norman defined affordances as perceivable action possibilities. What he meant was affordances are only actions which a user can consider possible.
So, several designers create objects to conform to the needs of the users based on their physical capabilities, previous experiences and current goals. Clear affordances are crucial to when it comes to usability. A user can map the possibilities of what a product can do as per their idea of what a product should do.
Affordance in UX
Now that we’ve covered what affordances are, let us have an in-depth look on how UX design uses affordances.
Buttons are a core element used in an interface that allows interactivity, with the accompanying content, shape, colour, and contrast play a significant role to design one.
Animated affordances imitate simple actions like toggle buttons that show something is switched on by changing the colour when the toggle is dragged. Complex animations, such as a button that blinks or vibrate, indicates that the action is not allowed, yet.
Notifications draw the attention of the user to indicate a change of some sorts. For example, If you haven’t completed setting up your profile, the product would notify you to do the same. Notifications should not be too distracting, as they are sent to the user to tell them something important.
Think of the Sign-Up option on any app or website. That is what we call an input field. Input fields reflect a space where the user can enter their data. Input fields can also appear as a dropdown box indicating that the user needs to make a selection.
How do you differentiate one app from another? In one look, I would say through its icons. Icons rely on metaphorical affordances to help a user navigate. Icons are used to help the user perceive categorisation as images have a faster recall over text. For example, a floppy disk icon is seen as a Save button in many apps.
Photos, like icons, are quick visual hints that help the user understand what they can utilise a product. For example, Swiggy started as a meal delivery service, so their website showed different meals they provide, allowing the user to know what their website has to offer with just a glance.
If you want to know more about what is mentioned above, why don’t you read our blog on Micro-interactions in UX Design and extend your knowledge base?
Affordances in Design
Don Norman in his book, Psychology of Everyday Things, introduced the term affordance as the actions a user perceives to be possible, distinct from those which are possible.
Click here to know more.
You would notice the above mentioned underlined text. At first glance, one may think of it as a hyperlink, but it is not clickable, there is no hyperlink attached to it. It’s an example of how perceived and actual affordance are distinct and different. However, while designing, one must include both affordances.
Think about it, one cannot carry out the desired actions if the product does not afford it. Similarly, if the user is unable to perceive afforded actions, those actions cannot be carried out.
Types and examples of affordances in design
If you want to understand how affordance work when designing an interface entirely, you need to understand the specifics first. There can be six different types of affordance within any digital interfaces.
Explicit affordance is the hints given off by the physical appearance of the product. An excellent example of both language and physical cues can be raised button that says Continue or Click here. It’s obvious, due to the button’s raised appearance that indicates the possibility of clicking, along with the text.
Pattern affordance exhibit certain conventional norms. An excellent example would be a clickable logo (on the top left corner of a webpage). One would notice this general norm everywhere; so one can expect it everywhere. One can also observe that emails represented with an envelope, while settings with gear, so on and so forth.
Patterns come in handy when one wants to target mental shortcuts, but only if the users are aware of them. When designing with new patterns in mind, one has to make sure the users know these patterns. Otherwise, one can get creative without being explicit.
Hidden affordance in digital designs is similar to physical products. In the digital world, however, the actual affordances remain hidden until one commits an action to reveal it. For example, in dropdown menus, one does not notice the full menu unless they hover or click on it. UX Designers use it to hide navigation options, as there are several to show at once.
UX Designers use hidden affordances to simplify any visual design. A significant drawback to hidden affordances is not knowing what to expect. It becomes a guessing game as the user goes ahead.
False affordance yield something else that is unexpected. It’s like you are trying to turn on the light with your TV remote – or no action at all. Very often, you find a button that looks active but does nothing or a link that opens an ad instead of your desired webpage.
False affordance is the missed out details in a design, like a broken link situation. One should be wary of any false affordances within the design if they can help it. It would be best if one doesn’t surprise the users without an endgame.
Skeuomorphism relies heavily on metaphorical affordances, like imitating real-world products to communicate. An excellent example of those is icons: map, shopping cart or basket, home, printer, video, microphone, phone, etc. due to its usage as a metaphor instead of a physical letter.
If a UX Designer is designing something and they are not sure in terms of conveyance, the idea is to go back to the real-world for inspiration a starting point. Whether its good or not is not their decision. But including the metaphor that needs attention is up to them.
Negative affordance indicates no affordance whatsoever. It’s when a button in the design looks inactive. Have you ever noticed the colour of a button turn grey? Well, it’s one of those moments. Now, here is the tricky part: the button might appear usable, even though it is not. If the button looks inactive, however, it is active, then it’s only low design. At times the UX Designers want to indicate that you couldn’t do anything. They remain vigilant around negative affordances.
Perceived affordance + example
Don Norman clarifies perceived affordances as the actions the user perceives as being possible based on how an object is presented.
Perceived affordances are what one can think a product can do, based on the perception of the user. The way to make sure the affordances are clear is by using signifiers. Signifiers are instructions indicating what one can do. In product design for screen-based interfaces, all that the designer has available is control over perceived affordances.
For example, a desktop with its keyboard, monitor, and mouse affords to point, touch, view and click on display. However, most of these affordances hold no value. Also, if the display is not a touch-sensitive screen, the screen can still afford to be touched, but it does not reflect the desired result on the desktop. All screens afford to be touched, yet only a few detect the touch and are capable of responding.
When designing the UI/UX of a product, the UX Designers should use signs to suggest actions that are possible, like an underlined text indicating a link, for the sake of the conversation. If one is designing for augmented reality or virtual reality, They can use the advantage of displaying behaviours of the real-world in the affordances.
Overall, the fine details of an interface can help give the users with the hints they require. Providing the user with incorrect visual cues will ruin the user experience and ultimately leading to frustration. When users know what to do without exploring the product, the tasks are done faster without any mistakes.