Published on | Prototyping: From UX to Front End — Medium Ishan Manandhar

The concept of an affordance was first coined by the perceptual psychologist James J. Gibson in his seminal book The Ecological Approach to Visual Perception (1979). The concept was further consolidated to the HCI community by Donald Norman in his book The Psychology of Everyday Things (1988).

Gibson’s Affordance

Action possibilities in the environment in relation to the action capabilities of an actor
Independent of the actor’s experience, knowledge, culture, or ability to perceive.
Existence is binary — an affordance exists or it does not exist.

Normans’s Affordance

Perceived properties that may not actually exist
Suggestions or clues as to how to use the properties
Can be dependent on the experience, knowledge, or culture of the actor
Can make an action difficult or easy

Comparison between Gibson’s and Norman’s sense of affordances allows us to distinguish between the utility/usefulness and the usability of an object: We thus usually design for usefulness by creating affordances (the possibilities for action in the design) that match the goals of the user (the relativity of the affordance vis-à-vis the user)

Eg : Buttons with elevated shadows affords clicking ability.

What is Affordance?

A situation where an object’s sensory characteristics intuitively imply its functionality and use. — Crowdcube source??

A situation where an object’s sensory characteristics intuitively imply its functionality and use. An affordance is a desirable property of a user interface (UI) — software which naturally leads people to take the correct steps to accomplish their goals.The common psychological term for this is stimulus-response compatibility.

Affordance when used as a tool, makes the designs easier to use and encourage the users to undertake the intended actions. Effective affordance results in higher conversion, registration rates and desired outcomes.

Affordance In Physical World:

Let us take look at the physical world, where we can see objects having physical properties, like size, shape or weight that provide hints as to what you could do with them. A teacup; it’s small and has a handle, which affords holding. A toothbrush: it has a long-but-thin handle, which affords gripping, and so on.

The feeling that we get when we look at a switch, or a knob. A switch affords being flipped. A knob invites its rotation.

Physical objects has three affordance types:

Perceptible affordance: The basic definition of affordance, where an object’s characteristics imply an action.

Hidden affordance: When an object has affordances that are not so obvious; for instance, simply looking at a beer bottle we wouldn’t be able to tell that we can use it to open another beer bottle.

False affordance: There is a perceived affordance; but no results happen from the possible action. For example, pressing a button that doesn’t do anything, like using your TV remote to turn the TV on, but it doesn’t work for some reason. The affordance is still there we can press the button as much as we want but it does not result in anything.

Affordance In Digital World

Designing for digital interface is much tricky. We cannot provide you with physical clues as to what you can do. Instead, they all rely on visual clues or affordances. Using affordances is an everyday job for the UI designers.

If you understand how affordances work, you will be able to use them to your advantage. We will be able to create designs that are intuitive and easy to use.

Types Of Affordance:

Pattern Affordance: A pattern affordance is affordance set out by conventions. A great example would be a logo that’s at the top left corner of a webpage being clickable. It’s a pattern we see everywhere; so we expect it everywhere. Text that is different colour, sometimes maybe underlined or italic, among unchanged body text like a paragraph, is assumed to be a link.An flying paper aeroplane represents send, so it’s a pattern we face many times.

Explicit Affordance: All the actions which are pretty obvious because they communicate the exact desired action to the user. Eg: A button which states “click here” which desires an action. A form field which has the placeholder of Your name are the example of explicit affordance.

False Affordance: A false affordance usually seems to afford a particular capability but actually affords a different one or none at all.An element might appear pushable, given to its raised edges, but cannot.

A logo image might not redirect the user to the homepage.
An underlined sentence might appear to be a link but actually isn’t.
A green button might actually delete data.

Metaphorical Affordance: Imitations of real objects, to communicate in the design process. Icons are wonderful examples of this: map, shopping cart or basket, home, printer, video, microphone, phone, etc. Take the concept of email for example. Its roots are in the metaphor of a physical letter; its icon is usually an envelope. It’s a great example of metaphorical affordance all around.

Hidden Affordance: The action for the element is hidden until the user hovers into the element is Hidden Affordance. By default, the element’s affordance isn’t relevant until the user has taken some action to activate it. It is commonly used in complex interfaces which do not invite every single affordance immediately. It is basically, a clever way to de-emphasize less important actions for the users.

Negative Affordance: Negative affordance can be thought of as specifically indicating no affordance; it’s when you have an inactive button or a button that looks inactive. The most common instance of this is when a button or a link is greyed out. Now, the tricky part is: it’s not that you are specifically trying to tell a user you can’t use this button — although it could be — but that the button appears that you cannot use it, even if in fact we can.

Signifiers:

Signifiers act as signs to indicate affordances. This could be a call-to-action button within an email, descriptive images in a carousel that invite you to read a particular news story, or a coloured section of a page indicating where you should look. They could also be a particular icon — such as the Facebook “thumbs-up” showing when you too can “like” a piece of content. Or they could be social sharing buttons, encouraging the reader to spread the content more widely.

The signifier is an important communication device to the recipient, whether or not communication was intended. From the purpose of surviving in the world, it doesn’t matter to an individual whether the useful signal was deliberately placed there or whether it is incidental: to the recipient, there is no necessary distinction.

The “slide to unlock” text on the iPhone lock screen. Not only does it tell you what you need to do to operate the device, there is also an arrow indicating which direction you need to swipe in, and the text illuminates repeatedly letter by letter in that direction which is a good example of signifiers.For example, as Norman points out, a bookmark doesn’t just indicate where in a book to resume reading; it also indicates how far through the book you are.

Evolution and Future:

In the fast evolving technological era, the old affordances options adopted (tap and buttons) are being slowly replaced with human gestures and interactions and much more.

“2020 is shaping up to be a big year for us: the U.S. Census Bureau ????estimates that “more than half of the nation’s children are expected to be part of a minority race or ethnic group;”

LG plans to have tripled its solar panel production by then; there’ll be another Olympic Games; and, oh yeah, robots will apparently take over some five million jobs. It’s the latest in a series of figures economists have released projecting the impact that AI systems and machines will have on the human workforce, and this one, from the World Economic Forum, predicts a “Fourth Industrial Revolution,” characterised by unprecedented “developments in genetics, artificial intelligence, robotics, nanotechnology, 3D printing, and biotechnology.”

Source: digitaltrends.com

We have have created completely sophisticated new and smart technologies that can be handled in almost any way we choose. We are not limited to creating a simple tap gestures or buttons to action we want to choose.

Now, it’s time to face and start the interfaces without the old ways. The modern technology has now capability to trigger actions based on roughly on following situations:

Human gestures and recognition:

Gestures comes naturally to us and reflected in our physical actions. We double tap a photo instead of pressing it like a button; we can swipe to browse the gallery, swipe partially seen objects digitally; or pinch to zoom any content.

AI powered actions:

Recently Iphone X have revealed their AI integration for emoji for the chat.

Dragging elements to trigger actions:

Interaction Design By: Anadea Labs

Many products have been designed which trigger action with a drag feature Such as a checkout in an online store or drag refresh to get new mail. Drag-and-drop an item into the shopping cart, swipe to proceed to checkout, then confirm it with your fingerprint as easy than clicks.

Voice Interfaces:

Alexa by Amazon uses Voice interface. Moreover by using speech, we can move freely in the world of money transfers. Currently, Siri allows you to transfer money via PayPal to another person using only one quick request: “Siri, send $130 to XXX using PayPal.” Only confirmation and security check required is Touch ID.

Video Recognition:

Apple, Samsung, Xiaomi Corp etc have all installed FaceTech in their phones. This is only a small scale example, though. In future, it looks like consumers will be able to get into their cars, houses, and other secure physical locations simply by looking at them.

AR/VR:

We make gestures not only on touchscreen but also in AR and VR spaces where we can navigate with our body posture.

These are the evolving new trends of affordance. Now it’s us to implement and get move along to our times.

Affordance and Its Future In Designing Interfaces was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Affordance and Its Future In Designing Interfaces

Cool stuff, every week

More Articles