It’s not you, it’s the UX

More specifically, it’s the Affordance/Signifier relationship

In my struggle to resolve a user interface design problem, I recently returned to the bible of user experience for a little clarity: The Design of Everyday Things by Don Norman.

I discovered that I was guilty of confusing affordance and signifier as Norman predicted. But when I put the terms in the context of designing a mobile interface, the distinction became clear and meaningful.

What is an affordance?

An affordance is what an object can do. Yet what an object can do is only revealed by a user. Therefore an affordance is what an object can do based on a user interaction. An affordance can be obvious or hidden.

Example:

A chair reveals its affordance by design, its shape mirrors the body and communicates its intent: to be sat on.

However, a chair has an additional affordance not communicated by its design. A chair can be used to change a lightbulb or reach a book, a hidden affordance.

Clearly an object’s affordance is not determined solely by design but by the way a user interacts with it. An object’s affordance is determined by user interaction.

What is a signifier?

A signifier clarifies an affordance, it illustrates or describes what an object can do. A signifier can be blatantly obvious or very subtle.

Examples:

Some chairs have seats that are concave, shaped like a pair of butt cheeks. This design detail is subtle but acts as a signifier of the object’s purpose. Regardless of that signifier, the chair’s affordance is the same, it can be sat on or stood on — the signifier encourages its preferred use.

A door may have a slot. The slot is an affordance — objects may be placed through the hole. However the slot may be accompanied by the text “Mail” which is a signifier that indicates the purpose of the affordance by offering instructions on what objects should be placed through the hole.

Signifiers can be as obvious as a hand written sign taped to a door or as subtle as a texture or an audio cue.

Of course the F and E signify Full and Empty on a gas gauge. But my favorite subtle signifier is the arrow to the left of the gas pump icon that instructs the driver which side the gas tank is on. This is exceedingly helpful in rental cars when it’s time to refuel.

Affordance in Mobile Interface Design

An affordance in mobile interface design isn’t as obvious as a chair or a slot in a door. When we talk about affordance in the context of a mobile interface, we’re referring to any object with utility — any object that offers interaction affords use.

Affordance in interface design relies heavily on signifiers and is often determined by a user’s previous experience and appetite for discovery.

From experience with touch screen interfaces we’re accustomed to certain universal affordance which are consistent across devices and platforms.

Remember, affordances are what an object can do based on a user interaction.

The relationship between an object and it’s purpose becomes even more complex when you consider 3D touch where pressure and persistence offer new ways for users to interact with objects and can introduce a broader range of hidden affordances.

With so much potential at our fingertips it’s not always clear which affordance applies to a specific object.

Signifiers in Mobile Interface Design

In a mobile interface users rely on signifiers to reveal an object’s affordance.

Labels: Text signifies an object’s purpose but is limited due to character count and may not articulate the entirety of an object’s potential.

Color: Color is used to signify that an object has a purpose — to distinguish an object with an affordance from an object without. Color can signify a pattern of utility through a consistent application. But color alone can’t reveal how or what an object affords.

Common Signifiers: iOS and Android have introduced a language of signifiers that can be deployed to communicate specific affordances across platforms.

Basic Affordance/Signifier Relationship
Complex Affordance/Signifier Relationship
Hidden Affordance/Signifier Relationship

Conclusion

As interfaces become more complex an object’s potential affordance will grow. As affordance increases the need for clear and universal signifiers will expand.

Designers will have to develop and deploy signifiers with care in order to evolve and enhance functionality.

Above all else, users and designers will have to collaborate and continue to embrace exploration and discovery in order to develop a common language of affordance and signifiers.

Next time you discover a hidden affordance or feel frustrated by an interface, don’t blame yourself, blame the affordance/signifier relationship.

Leave a Reply

Your email address will not be published. Required fields are marked *