When you scroll down on your Instagram feed, you may have habitually tapped on the heart symbol when you like something. And whereas you see a hamburger icon on the top left corner of your screen, you know it is the menu. Have you ever wondered how we perceive these cues?
These visible cues and indicators are known as affordances. And we see them in our everyday life. When you see a handle on the door, you know it is used to open the door. When you see an empty box, you know it is used to put things into it.
In this blog, we will get to know the different types of affordances in UX design. And how important it is for optimal user experience.
What are affordances?
According to Don Norman, UX professor and author of “The Design of Everyday Things.” he quotes:
“An affordance is a relationship between the properties of the object and the capabilities of the agent that determines just how the object could possibly be used.”
Affordances are everywhere. In UX design, we perceive a lot of them daily. We know we click on texts and icons designed as buttons. And an empty field is used to input data.
Norman adds: “When affordances are taken advantage of the user knows what to do just by looking: no picture, label, or instruction needed.”
Difference between affordances and signifiers
Affordances emphasize the relationship between the user and the object. However, we must not confuse them with signifiers.
A signifier is a perceived cue where it indicates an affordance exists. It can be a label, sound, or anything. The purpose of a signifier is to guide the user about affordance and how to interact with it.
For instance, you see a bar on the door. You know the purpose is to open the door; hence it is an affordance. But there is a label displayed saying PUSH. That PUSH label is known as a signifier, and it guides you to push the door.
Types of affordances in UX design
To understand better about affordances in UX design, let us go through some of the types with relevant examples:
- Explicit Affordances
These are affordances that give obvious hints to the user. It is well defined and clearly explained to the user with its text, colour, and symbol.
When you see a SIGNUP button on your app, this is an explicit affordance. You know it is a button designed for clicking, and it is explained in text what the action is. Explicit affordances make your interface easy to navigate and use.
- Implicit (Hidden) Affordances
Implicit or hidden affordances are not that obvious to the users. They are dormant initially and revealed when the user initiates some action in the interface, like hovering their cursor over an element.
You may have seen in some websites when you move your mouse on a specific element, then it will show a drop-down menu listing all the information.
Hidden affordances are helpful for designers to include all the information in a limited space but should always be supported using some indicators to assist the user.
- Pattern Affordances
They are known as conventions and most widely seen affordances in design. Users know all about them after getting used to seeing them everywhere.
For instance, you see a blue-coloured text, underlined, you will perceive it as a hyperlink and probably click on it. And whereas you are navigating through a website, you will click on the website logo on the top left corner as you know it will take you back to the home page.
- Metaphorical Affordances
They rely on real-life graphical representations to indicate the affordances. These affordances are quick for the users to grasp and understand what the function of the element is.
When you see an envelope icon on your phone, you know it is to access your e-mail. When you see a phone receiver icon, you know it is used to make a call. All these icons make it easy for users to accomplish things quicker.
- Animated Affordances
Here animations are applied to the design to convey affordance. It is similar to real-world actions such as pulling, pushing and swiping.
An example is the switch icon on your phone when browsing through apps. When it animates in bright green, it is on. And when it displays a dull grey colour, you know it is off.
Another example would be when you are shopping through an e-commerce website. When adding items to your cart, they illuminate an animation next to the shopping cart icon, indicating the number of items currently in your cart.
- Negative Affordances
Negative affordances don’t mean they bring a negative experience to the user. It is simply an affordance that shows an inactive status till you take the right action to initiate its function.
For instance, you may have come across it when filling a form. When you don’t fill out all the necessary input required, the submit button will stay inactive. Once you have filled in all the fields, then the submit button works.
- False Affordances
These affordances are the ones designers must avoid at any cost. It gives an unprofessional outlook to your interface and won’t please your users. They indicate a perceived affordance but turn out either inactive or perform a completely different function.
If you probably come across a share button that won’t work, it would, without a doubt, annoy you. Designers must minimize false affordances as much as possible in their UX design.
Few tips to consider when designing affordances
Whether you are designing icons, fields, buttons, etc., it is always best to do sufficient user research first. Understand what conventions or pattern affordances people are used to and implement the same in your design.
Utilize signifiers in your UX design to direct the users in using those affordances efficiently. Use various design principles to make your interface simple to use for the user. And design the affordance in a way it stands out and grabs the user’s attention.
Guide the user throughout your marvellous interface….
We design affordances to save people’s time and achieve their goals using our app or website. Just like real-life examples of having a chair to sit on or a knob to turn, it is time to bring those visual cues into the digital world.
Design the best affordances to remove obstacles for the users. Ensure they can navigate through your interface freely and enjoy the experience.