It is not too much to say that affordance is the most important word in web design. Affordance is defined as the ability of a user to use an object according to their capabilities. The term was first used by James G. Gibson, a psychologist. It was then extended to human-computer interaction in Donald Norman's book The Psychology of Everyday Things. It describes the relationship between an actor and their environment. Understanding affordance will help you understand the product and interface design. This will make you a better designer.

What's Affordance?

James Gibson, a psychologist, introduced the term "affordance" in 1970th. Gibson used the term "affordance" to describe actions that people think are possible when they interact with an object. This is usually based on their knowledge or perceptions. All objects have affordances. A button you use to scroll the article will allow you to click on a chair, while a door allows you to open it. Socialization is about learning the affordances of our environments.

All are eligible for Financing

James Gibson, a psychologist, coined the term "affordance" as he called it in 1977. This refers to all actions that an object can perform based on the user’s physical abilities. For example, a chair can be used to stand, sit, throw or do other functions.

 

What Is Affordance in UX?

Affordance refers to a relationship between an individual and a digital or physical object in the design universe. The user interface (UI), affordances, can be perceivable or actionable. It is possible for users to see the UI and decide which actions are possible based on their past experience. Don Norman: "When affordances have been taken advantage of, users can see a UI and determine which actions are possible based on their previous experience ."

What types of Affordance impact UX?

You need to first meet all affordances in order to understand how to use them to improve user interactions. These are:

  1. Explicit
  2. Pattern
  3. Hidden
  4. Metaphorical
  5. False
  6. Negative

 

1- Explicit Affordance

These affordances are cues that refer to the physical appearance or language of an object.

These affordances could be called explicit since almost anyone can understand how to interact with the element. It is important to think about your interface's use without requiring you to give specific directions. Your design should be intuitive and usable without requiring the user to do anything.

2- Pattern Affordance

Most patterns are familiar to users, so pattern affordances are very common. Pattern affordances are defined as Affordances that are set out in conventions. A mobile device's homepage navigation is a familiar pattern. Many cell phones, including Apple, have either virtual or physical navigation. Although patterns are great for communicating mental shortcuts and communication, they must be understood by your users. You must be able to create amazing designs as a UX designer without being explicit.

3- Hidden Affordance

Users don't see hidden affordances until they do a specific task, such as hovering over or mousing over an item. It can be described as "Hidden affordances in digital designs are similar to those of physical objects." These hidden affordances are often used to simplify the design's visual complexity. Hidden affordance is best illustrated by the drop-down menu. Users can't see other menu items unless the parent tab is hovered over or clicked on. Hidden affordances can be used to reduce clutter and highlight the hierarchy or importance of the actions users can take.

4 Metaphorical Affordance

These affordances can be described as real-life objects and can be used to represent actions that users can take. These metaphorical affordances can be represented by logos or icons to inform users of the actions they can take. This is a beautiful example of the use of icons: maps, shopping baskets or baskets and homes. Printers, videos, microphones, phone, and other devices are all examples. Metaphorical affordances are a way to communicate complicated tasks quickly and easily, so users can understand them. Another example: The Floppy Disk is a symbol for save. This icon is only used by many children who were born after 2000.

5- False Affordance

False affordances may convey a capability, but they can also afford another capability or none at all. A False Affordance is a digital space that offers something unexpected. False affordance occurs when text is not linked, colored or underlined. False affordances can be caused by beliefs that are inconsistent with reality. False affordances are more common in designs with missing details, such as broken link situations. False affordances may confuse users and alter their intelligence. These should be avoided and reported to the authorities as bugs.

Source: https://temismarketing.com/blog/what-is-affordance-in-ux-design/