Digital Affordance.
let me first define what the term affordance is.
Do you know J.J Gibson ? He Coined the word Affordance.
From his theory of affordance, he defined affordance as
Clues about how an object should be used, typically provided by the object itself or its context.
The handle of a mug is shaped for easy grasping, so a mug affords to be picked up.
Affordance can also be explained as an Object’s sensory characteristics intuitively implying its functionality and use. i.e. The possibility of an action with an object without thinking too much or reading a user manual.
The possibility of pushing a button is its affordance.
Well, Over the past few decades, We tend to interact more with the objects around us even more than our fellow species.
We interact with a whole lotta of objects. Doors, Kitchen untensils(Gas Cookers), Quick Edge Knife Sharpener, Serverspoon, Pizza Cutter, Pots, Mugs.
These objects were invented to serve some particular purposes, however due to their properties(Shapes and features) they afford to be multipurpose based.
An object’s affordance is limited also to how much an individual can think in relation to his or her environment.
affordance refers to all action possibilities with an object depending on users’ physical capabilities.
-Psychologist James Gibson-
According to Don Norman in his book The design of everyday things he defined affordance as
The percievable action possibilities, that user’s consider possible based on object’s features.
Take a coffee mug for example.
A coffee mug also afford to be holding writing untensils, perhaps growing small plant.
It affords as a laddle for serving punch.
Or a shovel for building castles made with sands.
Properties of object can afford other usage in which the inventor’s never intended.
We will be shortsighted or underinformed about the concept of affordance if we limit it to physical objects alone.
Affordance can also be defined as the relationship between an environment and its actors.
Affordance are clues in an environment that indicate possibilities for action are percieved in a direct, Immediate way with no sensory processing.
Perception of our environment inevitably leads to some course of action.
Well, affordance extends beyond behavioural and cognitive psycology and into the designs of digital interfaces.
Affordance in UI/UX.
Affordances are everywhere in the digital realm.
1. We think click when we see buttons.
2. We relate with web icons based on the accepted usage like an envelope-like icon means inbox message, or a bell icon depicts notifications.
3. We think of typing when we see a keyboard, or inputing data when we see a text box in a website.
4. We think of search when we see a magnifier lens look-like icon.
In the digital realm
good designs makes affordance explicit.
Steve krug in his book Don’t make me think , relating designs and usability explained that
Usability means making sure something works well, and that a person of average ability or experience can use it for its intended purpose without getting hopelessly frustrated.
he also explained that a web application should be self explanatory
As far as humanly possible, when I look at a web page it should be self-evident. Obvious. Self-explanatory.
Types of affordance
- Explicit affordance
explicit affordance is the hints given off by language or physical appearance of a website’s element e.g a button element that says ‘click me’.
2. Pattern Affordance
Patterns are great for communicating mental shortcuts for affordance. Affordance set out by conventions. A great example would be a logo that is at the top left corner of a webpage being clickable. It’s a pattern we see everywhere; so we expect it everywhere.
- Like having a logo , a search input, and some naviagtion options at the header of a website
- followed by carousel and some tagline text.
Well.. The more designers follow a particular pattern in their design, the stronger the pattern becomes.
Patterns has to do with accepted conventions.
However reliance on conventions has it detrimental effects on creativity.
- Total reliance on conventions can stiffle and constrain creativity.
- Designer starts having conflicts with balancing between aesthetics or doing the essentials.
3. Metaphor
In web design metaphor might come in the forms of words or imagery that used to communicate something than it’s literal meaning.
If designing something and you are not sure of how to convey it , it’s always good to go back to its physical world characteristics , for inspiration or a starting point.
Well, metaphorical affordance relies greatly on the study of iconography.
Metaphorical affordance includes Icons, maps, shopping cart.
Words like ‘Tweet’ used by Twitter
or imagery that indicates send
sometimes metaphorical affordance can conflict with pattern affordance, but with great attention to details by the UXer, He can explicitly resolve the conflict of the metaphor based on the context of design or feature where it’s been used.
I will write more on digital affordance and how you can use it to your advantage as a designer to improve your customer experience in my next write-up.
#Enjoy
#UX #UI #Affordance.
