Affordance and Signifiers


Affordances determine what actions are possible.

Signifiers communicate where the action should take place.

In the physical world, the most common example of affordance is a door. According to this image, Affordances represent the possibility to open the door with the handle. Here gives a clue/sign of what is to be acted upon or in which direction the door should open to “push” or “pull”. That represents the term Signifier.

When the user sees a well-designed(Affordance) door with good perceivable signifiers, the user knows immediately whether need to push or to pull the door, whiteout even having to touch it.

FIGURE 1.1 - Bad signifier or without signifier can mislead or not qualify to communicate where or how the action(push or pull) should take place.

Design with bad affordance, you will notice it immediately and, in some cases, you might get frustrated. Good Affordance with a bad signifier can mislead or not qualify to communicate where or how the action should take place.

FIGURE 1.2 — Mapping between holes and fingers

Two holes are clearly there to put fingers into. Two holes create a background for an affordance. It makes sense for fingers to be inserted and then the designer gives a clue of possible operations/actions(Big hole suggests several fingers and Small hole, only one). So signifiers that indicate by hole size where the fingers are to go.

Signifier refers to any mark or sound (physical or digital). Signifiers signal things, in particular, what actions are possible and how they should be done. Although some affordance can be visible, others are not but Signifiers must be visible, else they fail to function. If you use the wrong fingers, the scissors still work, although not as comfortable and they fail to function.

So Affordance and Signifiers are fundamentally important principles of good design.

Thank you for reading. ;)




UI/UX Designer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How we Used a Remote Design Sprint to Kick off Product Development for a Healthtech Startup

Abstract illustration of two figures holding pencils and sticky notes on a yellow background.

GOSH Community Member Profile of Thomas Hervé Mboa Nkoudou: “It’s important to contextualise the…

The Greatest Automobile Designer You’ve Never Heard Of

Giovanni Michelotti Designer

Case Study: Bringing P2P international delivery into the 21st century

How to Stay Positive (and Proactive!) As You Look for Your First UX Role.

Use This Japanese Technique to Improve Your Presentations

What I learned from a 3-day Design Sprint

Weaving Pathways — Connecting Artisanal Communities

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Haamid Nalim

Haamid Nalim

UI/UX Designer

More from Medium

Alive and Living

Do something, I may be not the same before but it feels so free giving myself a new life!

NaVi Upsets Gambit in BLAST Premier World Final


#EuyeoTalks: The K-POP Multiverse

Setbacks — Race Day 4 of the Solar Challenge Morocco 2021