×

Login

Enter Your mobile here *

Enter the OTP send to

Register

A password will be sent to your email address.

Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our privacy policy.

What are Affordances ?

What-are-affordances

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.

affordances-doors

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

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.

Affodances in ux buttonAnimations

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.

animation of affordances in ux

Notifications

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.

Notification affordances in UX

Input fields

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.

Input-Field of affordances in ux

Icons

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.

icon of affordances in ux

Photos

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.

swiggy of Affordances in ux

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

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

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

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

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.

METAPHORICAL AFFORDANCE

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

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.

Conclusion

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.

ImaginXP is leading the HigherEd revolution offering some of the best future skills certification courses and full time degree programs in Business, design and Technology. We are pioneering the higher educational space with top-notch faculties and industry-led curriculum.

Leave A Reply

Your email address will not be published. Required fields are marked *

PHP Code Snippets Powered By : XYZScripts.com

Future-proof your career with us!



    By submitting this form I agree to the DNC/NDNC contact clause
    I authorize ImaginXP and its representatives to Call, SMS, Email or WhatsApp me about its products and offers. This consent overrides any registration for DNC / NDNC.
    We use cookies to improve and personalize your experience with ImaginXP. By continuing to use our website, you consent to the use of these cookies. We recommend you to go through our Privacy Policy.
    Uploaded Successfully
    Uploading Please wait