What is Affordance in UX design?

It’s not too much if we say the most underrated word in web Design is Affordance. An affordance can be defined as what a user can do with an object based on the user’s capabilities. Psychologist James G. Gibson first coined the term in 1970, then introduced to human-computer interaction by Donald Norman in his book The Psychology of Everyday Things. It defines the relationship between an environment and an actor. Understanding affordance will allow you to have a better understanding of the product and interface design, in turn, makes you a much better designer.

 

What is Affordance?

The term “affordance” was first introduced by psychologist James Gibson in 1970th. Gibson used this term to describe the actions people consider possible when interacting with an object, usually based on their perception or knowledge about it. We can say all the objects around us have affordances. For instance, a button that you use to scroll this article, a chair affords you to sit on it now, and a door affords you to open it. Learning the affordances of our environment is an integral part of our socialization.

 

Affordance is everywhere

As mentioned before, psychologist James Gibson coined “affordance” in 1977, referring to all action possibilities with an object based on the user’s physical capabilities. A chair, for example, can be used to sit on, stand on, throw, or do other functions. Clear affordances are essential for usability. Users will use their conceptual model to map out the possible uses of an object.

 

What is Affordance in UX?

Affordance is a relationship between a person and a physical or digital object in the design world.  The user interface (UI), affordances can be perceivable and actionable. Users can see a UI and determine which actions are possible based upon their previous experience, It sad by. Don Norman: “When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

You may like: What Are UX Checklists For Designers?

 

Which types of Affordance affect UX?

To clarify your understanding of how you can use affordances to improve user interactions, you need first to meet and learn about all types of available affordances. They are:

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

 

1- Explicit Affordance

These affordances provide cues by referring to the physical appearance of an object, or language. This is similar to Perceptible Affordance. Click is an example of the mouse buttons that you press. An input field with the words ‘enter email address’ allows you to enter an email address. The role of language is crucial in guiding users through digital interfaces. Language provides clear guidance on what to do and what you can do.

These affordances can be described as explicit because nearly anyone can comprehend how to interact with an element. However, it’s important to consider your interface’s obvious use without explicit, spelled-out directions. Your design needs to be usable and intuitive without holding your user’s hand at every step.

 

2- Pattern Affordance

Pattern affordances are most commonly used because they rely upon patterns that users recognize. A pattern affordance refers to Affordances set out by conventions. The navigation on the homepage of a mobile device is a pattern that many users understand; therefore, many cell phones, such as Apple, have physical or virtual navigation on their homepages. Patterns are great for communicating mental shortcuts, but only if your users know these patterns. As a UX designer, you need to find this ability to create some amazing designs without being explicit.

You may like: What Is A Wireframe?

 

3- Hidden Affordance

Hidden affordances are not revealed to the user until they take a specific action, such as hoovering or mousing over an element. We can describe it as “Hidden affordance in digital designs is similar to that of physical objects.” Hidden affordances are frequently used to simplify the visual complexity of a design. The drop-down menu is an excellent example of hidden Affordance, where users can’t see the other menu items unless they click on or hover over the parent tab. Hidden affordances are used to reduce clutter and emphasize the hierarchy/level of importance of the actions that users can take.

 

4- Metaphorical Affordance 

These affordances are real-life objects that can be used as metaphors to describe actions users can take. These metaphorical affordances are usually represented by icons or logos to let users know what actions they can take. Icons are beautiful examples of this: maps, shopping carts or baskets, homes, printers, videos, microphones, phones, etc. Metaphorical affordances help communicate complex tasks quickly, as users can easily understand them. Another good example is: The Floppy Disk represents save. Many children born after 2000 only recognize this icon as a metaphor.

 

5- False Affordance

False affordances convey a capability but afford a different capability or none at call. In a simple way, False Affordance in the digital space affords something unexpected. False affordance is when a piece of text is colored, underlined and not linked. False affordances are usually caused by perceptions that are not consistent with reality. False Affordances are most common in designs that have details missing, such as a broken link situation. False affordances can confuse users and manipulate their intelligence. They should be avoided and reported as bugs.

 

6- Negative Affordance

Negative affordances indicate that certain design elements are not active and cannot be acted on. A greyed-out button or link is the most common example. Element design is based on the idea that elements should be able to indicate they are unavailable for use. This usually happens because a precondition has not been met. Negative affordances guide users on order they need to take action. For example, if a user is filling out a form and hasn’t filled everything out yet, the button state could appear inactive because you don’t want them to proceed yet. But, if the button looks inactive, but is active, then it’s simply poor design.

 

How to Design an excellent Affordance?

The Affordances decrease user errors and cognitive load, while improving user experience. To correct clues and provide immediate, effective feedback that is essential you should:

Always put the users first and understand users best through UX research.

Use the size option to display your users which affordances they should prioritize.

Follow design conventions, so users recognize affordances and understand your affordances.

Use signifiers to provide more information to direct users to the affordances your design.

Use design principles to create logical and clear affordances without clutter.

Ui UX design services

Our Ui UX design services help you improve your user’s experience and let them enjoy checking out your website or application. We help make your interfaces more user-friendly and efficient. UI/UX design services can also help you gather valuable feedback from customers to improve your product or service.