What is affordance ?
Affordances are properties of objects, elements which shows actions for users who interact to complete actions. Affordances are defined what actions possible to take without additional instructions.
Psychologist James Gibson coined “affordance” in 1977, stated as All Action possibilities with an object based on users’ physical capabilities
“When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.” — Don Norman said,
Desired actions cannot be carried out if the object does not afford it, and afforded actions might not be carried out if the user does not perceive they are possible.
“ Affordance is a relationship between the properties of an object and the capabilities of the person that determines how possibly the object to be used
Affordances represent the possibilities in the world for how the person can interact with something
For example water bottle a physical product will have different affordance for 3 years old child and 18 years old boy.
18 years old boy easily can hold and use, but 3 years old child may not hold comfortably
Possibility varies based on person capability
The presence of an affordance is jointly determined by the qualities of the object and the abilities of the agent that is interacting – Don Norman said
Digital Products
Person who familiar in websites, perceive underlined text. And blue color text as a hyperlink But who are not familiar with websites they may perceive as just decorations.
it’s important to consider how obvious your interface is to use without instruction, spelled out directions. Your design needs to be usable and intuitive without holding your user’s hand at every step.
Types of Affordance
1) perceptible affordance is characteristics of the object itself indicate what action possibilities are available and desired . A raised button that says ‘Click me’ is a great example of both language and physical cues. Water bottle handle conveys user to take and hold
3) Hidden affordance
the actual affordance isn’t available until an action has been taken to reveal it.
For instance, hovering over a button to see whether its active or not.
you don’t see the drop down menu unless you hover or click on the parent list item.
Hidden affordances are used to simplify and reduce visual complexity of a design.
4) False affordance
User perceive underline text as hyperlink if user find its broken link then it’s a false affordance. Colors have specific associations with them. example, green is success while red is fail . When you change this color pattern , user might be confused who already familiar with standard one
5) Negative affordance
Negative – You block users from proceeding towards a goal when they must provide more data – e.g., a disabled “register” button remains until users fill all mandatory inputs.
