Digital Affordances and Its Types | Interaction Design

What is Affordance? (In Interaction Design)

Interaction design is all about how users interact with the products. Digital affordance plays a crucial role in designing products that interact well. 

Affordance can be understood as the relationship between a user and any product (here, digital). It is the probability of action that depends upon the past experiences and capabilities of the users, characteristics of the product.

In simpler language, affordance is what a user can do with a product.

Let's take an example from our surroundings. When we see a door handle, what is the first thing that comes to our mind? That we can use it to open or close the door. There are possibilities of action because of our capabilities, past experiences (we all have opened many doors before, right?), and the characteristics of the handle. Thus, this is affordance.

But wait, can an infant open a door? No, right? Because he does not have those capabilities or any past experiences. Thus, he cannot afford to open a door or use a door handle.

In the digital world, we need clues or affordances to understand the working of an app or website or any other digital product. Creating good user interfaces is possible if we keep affordance in our minds. 

When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.

- Don Norman, UX Researcher

Types of Affordance 

Let's get some more clarity by understanding the 3 different types of affordance that impact the users' experience.

1. Perceptible Affordance
2. Hidden Affordance
3. False Affordance 

1. Perceptible Affordance

Perceptible affordance is exactly how affordance should be. It gives the obvious clues, where the user doesn't get confused while operating and navigating through the product and he understands the interface without any effort.

Let's try to understand Perceptible Affordance with the help of some examples.

Example 1: Below is the image of app icons present in our mobile phones. By looking at the icons, we can easily understand about the apps.

Example 2: This example is from a music player app, which has play/pause, next/previous buttons. The functions of these buttons are pretty obvious.

Example 3: This image shows the buttons to minimize, maximize and close the app.

Example 4: Below is the example of Publish button from the website blogger.com, which is used to publish the blog posts.

Example 5: The google search bar and the placeholder clearly indicate that it is used for browsing or searching the web.

2. Hidden Affordance

Hidden affordance, as the name suggests, is hidden. The user has to depend upon his past digital experiences and has to experiment to understand the interface.

Hidden affordance can be used to group similar things or minimize the complex structure of the interface. The most basic example would be drop-down lists present on the websites and mobile applications.

Let's try to understand Hidden Affordance with the help of some examples.

Example 1: This image shows that on clicking this button, the google apps open. It is used to reduce the visual complexity. It is just a form of a drop-down list.

Example 2: This is the example of the Spotify website where we have to hover over to see that there is an option to play the song.

Example 3: This is the notification bar on Facebook, on which we have to click to see the notifications.

Example 4: It is the drop-down list that contains account information on the Spotify website.

Example 5: This is an example of a hidden drop-down menu for opened tabs in Google Chrome.

3. False Affordance

False affordance is when the outcome of the user's action is wrong or unpredicted.  Any misleading information such as a broken link or inactive button can be counted as a false affordance.

Let's try to understand False Affordance with the help of some examples.

Example 1: Below is the image of myupes website which requires manually entering the enrollment number, even after saving it in google. Otherwise, it gives the error as shown in the second image.

Example 2: The signup button is inactive, which means no action will be performed when it is clicked by the user.

Example 3: The broken links that cannot be accessed or found by the user lead to false affordance.

Example 4: The imagery used in the blog post is not suitable which might confuse the users.

Example 5: The image below shows that the link redirected to an invalid address.

Conclusion

Thus, we now understand the importance of affordance for designing better interfaces for users. Lack of affordance may lead to bad user experiences.