Affordance in Design|UX,UI


Affordance in Design

Many designers try to create products that are very easy to navigate so that their customers can flow through them at first glance. To design anything with this level of abruptness, designers need to understand a lot of affordances – what they are and how to use them. Certifications are all around us but knowing how they affect UX design is crucial in creating high-quality user-friendly products.

Psychologist James Gibson created the “affordance” in 1977, which refers to the probability of all activities with an object based on the consumer’s physical abilities. For example, there are facilities such as sitting in a chair, standing and throwing.

Dan Norman later (1988) introduced the term to the design community and slightly modified the meaning to make it more convenient for designers to use. So we can say that obvious costs are important for consumption.

Signifiers and Affordance

Dan Norman also introduced the term “signifier”, which was widely used in his 2013 Everyday Things edition.

“Signer” is a kind of natural gesture about qualification. Dan Norman introduced the term to indicate a clear distinction between the context in which it is presented as an important component of the total cost to the individual and the actual carrier. The signatory maybe himself. Just as there is a cost without an index – the signed part of the expense does not appear.

1. What is Affordance?

Affordance in Design|UX,UI

Verification is a compelling indicator of how an object works and how it perceives both its perceived and actual function.

2. How many types of verifications are there?

Success in physical and digital products is everywhere. But before we get into the general costs of UX design, let’s look at six main types.

Clear agreement

Obvious costs are the perceptual properties of an object, giving you an idea of ​​how it will be used.

Hidden Affordance

Hidden affordance is the inherent properties of an object. Evidence indicating the performance of an item may not be clear and may not appear until action is taken. A typical example of hidden affordance is the drop-down menu or other clickable feature that only appears when the user hovers over it.

Pattern verification

Affordance models are based on meetings that are already set up to represent the function. These are widely used or agreed-upon protocols on how things work. Take the camera for example. For the most part, all cameras have a shutter button on the top right. Another example is underlining italic, or contrasting text, which refers to the hyperlink in the text body.

Metaphor bearing

Affordances are based on images of real or original objects used to express intent. For example, a shopping cart icon to indicate your online purchases, a microphone image showing the option to envelop or record to send an email or message.

Wrong statement

False carry occurs when an attribute of an object indicates that the object is not working. An example of this is unlinking underline text by clicking the button that turns on your lights or the TV remote. False costs are often random or due to a lack of effective design techniques.

Negative effect

Negative affordance is used when expressing a lack of work or interactivity. This type of expense is usually used when you need more information from the customer and you want to prevent them from going to the next step.

3. How is affordance used in UX design?

Affordance in Design|UX,UI

Now that we have covered the major types of affordance, we will go a little deeper into how to use additives in UX design.


Buttons are one of the main elements used to indicate interactions in the interface. Size, color, shading, contrast, and related copies play a huge role in creating a clear and effective button.


Animated expressions often mimic actions or movements in the real world (swiping, pushing, pulling, pulling, etc.) and range from casual to very complex. Toggle buttons are simple animated displays that show any change in appearance or color when the user drags the toggle.


Notifications can be used to draw the attention of any user or to indicate a change. For example, suppose the user has not finished setting up their profile, a red dot may appear next to the profile icon in the menu bar. Another good example is the number that appears next to the shopping cart icon when you add something to your cart.

Input field

Input fields indicate where user data can be entered. These are often indicated by the difference between the size and area of ​​the field and its background.


Icons often rely on a pattern or metaphor that can be navigated through a user interface. Traditional designs use the ability to use the heart or star symbol to indicate the “Favorites” page, while the floppy disk symbol is symbolically referred to as the “Save” button.


Like icons, photos are quick visual codes that help customers understand what they can do with the product.

4. How to design the best affordance?

Designing at a good cost means minimizing customer error and friction. Your design should not mislead or surprise your customer due to a lack of action or unwanted results

Follow the meetings

Users expect specific protocols when it comes to their digital interfaces. For example, the “Search” or magnifying glass or brand logo on the left side of the desktop can be clicked on the search bar.

Follow the design principles

Design principles are embedded in the techniques that help to create designs that are natural and easy to use. From designers to sociologists to psychologists, many professionals have come up with simple principles that you can follow to reduce confusion in your clients. The laws of the UX provide you with a comprehensive set of laws and principles that you must abide by, Or you can design a formula to suit your company and product.

Use effective copy

If you can not create something low-cost using visual design due to color limitations, software limitations, budget, etc., adding content with useful text will help keep your customers on track.

Sometimes creating this copy is in the hands of UX writers, but whoever wrote it, there are many practical ways to hone your skills in UX writing.

Introduce yourself to material design

Google’s Material Design is an Android-based design language that optimizes the user’s on-screen touch experience with intuitive yet innovative features. Material design uses the physical world and its textures, meaningful motion, and deliberate graphics to help you create high-quality, user-friendly interfaces.

Understand your customers

Do meaningful UX research and find out what your customers want to see when they interact with your product context.

Last thoughts

Affordance in Design|UX,UI

Effortlessness is an effective concept in UX design. Quality customer testing is the best way to find out if your designs have good potential. When your customers can complete their tasks quickly with minimal amounts of clutter and errors, you know you are moving in the right direction.

Using good spending can reduce the time your customers spend thinking and exploring so they can achieve their goals faster and easier. This is an important factor in universal and comprehensive design.

Leave a Comment