Affordance in Digital Interfaces

Jayy
UX Handbook
Published in
3 min readMar 6, 2020

Every day the digitization of services and products is happening on a rapid scale, daily we are interacting with multiple digital products in the way of mobile apps, websites, Digital Kiosk, etc. With the ever-increasing use of digital products, it becomes even more obvious to consider Affordances while designing these products.

There are different types of affordances when it comes to the digital world of products or services such as,

1.Explicit Affordance:

It can also be called as a perceivable affordance.

Home icon

Google Material Design Icon.

On a website or a mobile application would provide the user with the affordance to go back to the main home screen of the application or the website. Users can relate the design of the home icon based on its past experiences in day to day life and also its similar across all the websites with a minor tweak to the icon design.

2.Pattern Affordance

Pattern Affordance helps the user to recognize a similar pattern and understand the behavior of the interface based on similar experiences everywhere.

For Eg. All the websites have the user login or sign in option available in the top right corner, with the possibility to return to the home page by clicking on the logo of the website which is placed in the top right corner which is similar across all the websites.

Snip from Amazon.in

3.Hidden Affordances

As the name suggests affordance is present for the object but is not revealed to the user until and unless the user interacts with it.

For Eg. Drop Down Menu, here there is a lot of content to be shown or selected but is only revealed when the user clicks the small drop-down icon.

Snip from Amazon.in

4.False Affordances

These are to be avoided by the designer as much as possible, its the affordance that false and is unexpected by the end-user.

For Eg. Broken Links on the website or the back button functionality not working in the mobile app.

Picture Attribute: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=18046

5.Metamorphic Affordances.

Imitating the real-world object to communicate the functionality to the end-user.

For Eg: Icons used across websites usually mimic real-world objects like Home imitating the house, Search icon mimicking the magnifying Glass, Wallet imitating the wallets used every day by humans, save icon imitating the floppy disk.

Google Material Design.

Affordance plays a very important role in the design of the product and the appropriate use of this principle iterates whether the product would be successful or not.

--

--