An affordance means qualities of an object or medium that allows you to perform certain actions with this object or its fragment. But let’s translate this to plain English: if there is a chair, then you can sit on it. This is an example of an affordance.
As you have probably already guessed in UX/UI design, affordances are ubiquitous. And now, we’ll talk about what they are and how they help improve design and usability.
A Bit More About Affordances
Affordance is a term from the psychology of perception and the design of human-computer interactions. It means that an object or environment has properties that allow it to perform any actions with it.
All the objects around us have affordances. Some of them are obvious (“Push” stickers on doors), and others are hidden (with a chair you can break a window in case of fire, or fight off a robber). The term affordances were first coined by psychologist James G. Gibson and then applied to human-computer interactions by Donald Norman in his book “The Design of Everyday Things.” Professional user experience company constantly uses affordances. They are necessary for their work. Unlike physical objects, which often have certain readable properties depending on their size, shape, and weight, on the internet, web pages must be endowed with affordances through design. For most developers, this process seems intuitive – because they see thousands of design patterns daily. But have you ever really thought about what makes an object clickable, highlightable, and moveable? What qualities do these entail?
Having a thorough understanding of the principle of affordances will help you become a master of creating interfaces or product design. You can use affordances to improve the usability of layouts and encourage users to take the particular actions you need them to. Improved affordances will significantly affect conversion rates, sign-up rates, and user actions that are important to the site, application, or product you are designing.
Explicit Affordance
These, with nearly 100% probability, allow what exactly needs to be done, even in a situation when the user has never encountered anything similar before. A good example is the Buy, Add to Cart or Checkout buttons in online stores.
Note that almost everywhere, virtual buttons visually stand out and resemble real-life buttons in appearance. A concrete, simple, and concise call to action helps pronounce affordance even more.
Another example is the forms on sites with sample fields. Form fields are affordances, and textual explanation makes them clear and explicit.
Implicit Affordances
Often, it’s unrealistic to indicate an opportunity and show the user what to do next: excessive information can overload the interface and impair usability. In this case, implicit affordances are used in hidden or metaphorical ways.
Hidden
Appears when the user performs a specific set of preliminary actions. An excellent implementation of hidden affordances can be seen on social networks. An example everyone knows are the different reaction possibilities to photos on Facebook.
Hidden affordances in this situation provide the user with all the same opportunities as explicit ones, but they do not distract from the main content.
Metaphorical
Another way to simplify the interface is to use metaphors. There are no explicit inscriptions or indications of what to do and where to do it. But due to a simple and understandable metaphor, the user immediately recognizes the opportunity. An example is arrows on different websites – when the user clicks, they can switch between images.
There is no explicit indication, but the metaphor is so clear and obvious that it can be considered by any user, even those unfamiliar with the interface.
False Affordances
Often users see affordances where there are none. This occurs as the result of gross errors in designing the interface and developing custom scripts.
Examples of false affordances:
- a non-clickable logo or clicking on the logo on a page other than the main one;
- formatting plain text as a link or non-clickable links in the text;
- horizontal scrolling on the site with no scrolling, etc.
Users try to realize possibilities according to scenarios they are familiar with, and they do not work. The result is a reduction in usability and the loss of user loyalty.
Affordance Optimization
How can you optimize the affordance of your user interface and try to make it more user-friendly? Here are a few tips:
- Drawing up profiles of tasks.
- Unfold a user scenario into separate actions and analyze them from a position of priority, frequency, and complexity.
- Conduct live tests.
- Study user opinions about the interface and analyze their feedback on interacting with it.
- All approaches can be combined to provide more accurate and objective information.
Final thoughts
As you can see, affordances are powerful tools that help UX/UI designers from the best user experience company improve the usability of digital products. After optimizing capabilities and introducing improvements, be sure to conduct A / B testing to compare the old and new versions of the interface. Perhaps during additional checks, you will find even more opportunities to make usability as optimal and user friendly as can be.
