Summary: What are Affordances and Signifiers in UX? They are essential for any design to be sensible to a user. They invite action and guide interactions to reduce guesswork and make designs more intuitive.

Affordances and Signifiers in UX Design

In UX and Interaction Design, the concepts of affordances and signifiers play a pivotal role in creating interfaces that are not only visually appealing but also highly intuitive.

Affordances: What Can I Do Now?

Affordances describe how users interpret their interaction with a design element, like a button. In UX, they signify what actions a user can perform. Think of it as an object “affording” an action. For instance, when you see a door handle, it affords grabbing to open it. On the contrary, a wall does not afford opening because it lacks a perceivable mechanism for such an action. A push plate, however, affords a push action. Human-Centered Design grandfather Don Norman identified these elements in the Design of Everyday Things, later known as a “Norman Door“.

An affordance asks, “What can a person do with an object?”; “What do people need to do in order to make this work?”;  “What actions can be performed?”.

None of this is deeply thought out, just as you don’t think when you open a door. Intuitive designs are about making your design “non-thinking,” or the principle captured in the title of Krug’s Don’t Make Me Think. The focus is on supporting the need for users not to stop and understand.  In the image below, the button is the affordance. The arrow “signifies” the direction of “take me down to a lower floor”.

Tips for designing great affordances

• Make the “interface” jump out at the user. Exaggerate if necessary. Think “big buy button” to highlight your task’s call to action.
• Make the “control” multi-sensory if possible, e.g. you should be able to feel a button or door handle, not have to give it 100% of your visual attention.
• Drop the interpretation and investigation required in your “UI”. Assume your users have other things on their mind (their goals, needs, values) and also speak other languages (multi-cultural).

Bad affordance example:

The WordPress “Guttenberg” editor offers abstract and confusing icon sets that jump around the editor canvas. They make editing simple content a complex task that requires focusing on their UI, not your work. The icons change and dance around. To effectively use them, you need to memorize the entire abstract character set or click and play to see if the icon is what you want.

Compare the above to their “classic editor” below, where things feel familiar and stable.

Where affordances pave the way for an intuitive understanding of the actions available, signifiers reinforce the action to amplify intuitiveness.

Signifiers: How Do I Do?

Signifiers complement affordances by amplifying perceivable cues about them. They guide users in discovering and understanding affordances. Imagine a colorful circle around a door handle or a label for the volume knob on a sound system – these are signifiers. They help users recognize what actions they can perform with an object.

Conversely, signifiers can modify the meaning of an affordance – for instance, when a button is grayed out, it indicates that it is typically pressable, but the signifier of the color communicates that it cannot be pressed at the moment.

In a nutshell, a signifier answers the question, “How does a person discover the affordance?”

One of my favorite wireless speakers, the Logitech UE Boom, offers a good example of signifiers. The large plus and minus mean volume is up or down. The UX team that created that was originally criticized by colleagues for such “silly, large” buttons. This was incorrect; users loved the large icons (signifiers). However, when you use the UE Boom over time, you find that pushing these buttons is a bit awkward. The affordance provides no feedback; the tactical feel is unpleasant and feels like work. It is also unclear how loud or soft you are going since clicking gives little feedback. So here, the signifier is good, but the affordance does not behave completely effectively.

This illustrates how affordances and signifiers need to be tightly coupled and need a good interaction flow. It’s not just about seeing buttons and knowing what to do.

Affordances and signifiers are the bedrock of creating intuitive and user-friendly interfaces. When properly designed, they empower users to understand your product’s functionality and how they can harness it to solve their problems. Conversely, if they are missing or poorly executed, users will struggle to grasp the purpose and utility of your product. Or, as the above case illustrates, how to comfortably use the product over time.

Tips for designing great signifiers

• Follow the design of the affordance- make sure the affordance is intuitive. Don’t throw a shiny signifier on a poor affordance.
• Amplify actions subtly (see the small arrow example below) or in a big way; think big pulsating button. For another example, note this site’s pulsating “back to top” or pulsating “take action” menu.

In the example below, “Sign up” is called out with a simple arrow signifier. This alleviates the confusion of Sign In/ Sign Up that plagues many sites.

Signifiers as Design Nudges

UX is all about helping users achieve your business and their user goals. A great example of a signifier-as-nudge can be found in the Uber driver-side app. When there’s a nearby opportunity for drivers to earn, the app emits a bell-like casino sound. Additionally, it displays a message like “Unlock $32.00.” This combination is a powerful signifier that informs drivers of the opportunity and encourages them to seize it. It’s akin to a gamified experience – a brilliant way to enhance sociability: a user needs a ride fast, and a driver seeks a new fare.

AI is an area that will require better signifier nudging. Adding AI onto a tool as a feature will not work. In the “Edit with AI” example, the interface raises too many questions: For what benefit? How? What happens next? (Surprisingly, it goes to a website, leaving the tool altogether).

Conclusion

When designing your affordances and signifiers, remember users have no obligation to think their way through the actions you require. Good affordance-signifier pairing can ensure a smoother and more enjoyable user experience.