Signifiers & Affordances in Digital Product Design: What they are & why you should know them
The concept of “signifiers & affordances” is not new, actually, they’ve existed in society for as long as humans have been on earth. You’ve interfaced with either, or both of them at one point or the other and you probably didn’t know.
TL/DR: I’ve tried to explain the concept of Signifiers & affordances in product design terms with relevant examples in this article. In the end, I make a case for affordances & signifiers to be equally prioritised in product design.
Signifiers
A “signifier” is some sort of indicator, some signal in the physical or social world that can be interpreted meaningfully. Signifiers indicate critical information, even if the signifier itself is an accidental byproduct of the world. Some social indicators simply are the unintended but informative result of the behaviour of others.Donald Norman. Signifiers, Not Affordances.
Signifiers are indicators, they give actors in an event instruction on how to perform an action. Imagine you come up to a door and you want to open the door. You see a sign that say’s ‘pull the door handle to open door’. You pull the handle and you go in. The sign that said “pull the door handle to open” is a signifier. It gave you detailed instructions on how to operate the door handle.
Without the text, you’d have probably pushed the handle instead of pulling it.
My earliest reference to Signifiers would be Edit Wear and Read Wear — by Hollan, J.D, and Hill, W. C. in which they first argued a clever way for designers to add signifiers to guide readers and authors of manual editors. — Donald Norman. Signifiers, Not Affordances.
A modern revised use & illustration of Holland & Hills’ work can be found in our current digital product design. A good example could be found in browsers. See image below for a comparison of (a) H&H’s patented design and (b) on a scroll in 1992, the signifier for page length on Heroshe’s website in the chrome browser, browser signifier’s are loosely based on H&H’s patented design in (a) 2020.
Affordance
One of our fundamental principles (Design principles) is that of perceived affordances: how we know what to do in novel situations. Donald Norman. Signifiers, Not Affordances.
Affordances are agents that make certain actions possible. Continuing our example of the door handle. The handlebar of door is an affordance. It affords a person who wants to open the door the know-how to open the door.
Search bars are modern affordances, that have become increasingly popular since the rise and in more recent years, the steady cruise of e-commerce globally. See below a search bar on Nairaworks, a “gift card aggregator and reseller platform”
Why designers should pay close attention to Signifiers & Affordances
When the correct use of signifiers & affordances are attended to in the design, structure and organisation of every element in a product, the result would be an amazing experience crafted for the users of said product. As designers, our job is to constantly strive to give affordances appropriate and well-placed signifiers. (d) Below show googles use of affordance & (e) good use of signifiers on the homepage.
A good portion of Google’s revenue is from its search engine so on the webpage has well-placed affordances and signifiers to help the user perform the primary action they intended for their visit, which was to search the internet.
People need some way of understanding the product or service — some sign of what it is for, what is happening, and what the alternative actions are. People search for clues, for any sign that might help them cope and understand. It is the sign that is important, anything that might signify meaningful information. — Donald Norman. Signifiers, Not Affordances.
Good affordance + Good Signifer = 😀 users
An affordance alone is often not enough as you’ll see in the image below. (f) below shows the uses of the search bar. What is immediately noticed when a user lands on the website is that the search bar is not immediately visible like in other eCommerce websites. With no signifiers to guide users in a case like this, affordances fall short.
Note: The search bar (an affordance) in itself could be enough in some instances where the context and/or positioning of the affordance on the page is absolutely spot on like it is on Google, and then they’re other times when the instance is right but the relative positioning of the well-intended affordance is not great. In the second instance, a signifier is needed to guide the users.
To always be on the safe side, designers should pay mind and always add affordances & signifiers to elements in their design, be it a search bar on an eCommerce site or a signifier on the “submit newsletter” input field.
Designers need to provide these clues. Forget affordances: What people need, and what design must provide, are signifiers. — Donald Norman. Signifiers, Not Affordances.
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
