Make it Obvious: Affordance as a Design Tool

The real world makes things easy. We understand how to navigate interfaces naturally, due in large part to physical properties of objects. Shadows, textures and shape give us immediate clues as to how we should interact with different objects, providing a natural and obvious experience with most everyday things. Take, for example, a door handle – its design affords our reach and grasp, communicating to us that we need to grab and pull to use the object.

But what about the web? In a two-dimensional world, where everything is limited to pixels on a screen, what role do these affordances play in allowing users to understand how to navigate an interface? How does the design of a button, with its beveled edge and slight shadow, help users to understand and interact with interface elements with the same ease and subconscious thought that we interact with physical objects? Intentional design of these moments – where the virtual needs to accommodate our ingrained understanding of the physical world – can make or break an interface.

Even in the real, physical, world, affordances break down. A door handle appears to communicate “pull”, when the action needs to be pushing. A faucet knob appears to communicate “push”, when the action needs to be turning. Online, the opportunities for affordances to fail and miscommunicate are magnified by the removal of physical cues. In this venue, designers need to carefully construct these affordances from scratch, keeping psychology of the real world in mind at all times.

Simply put, affordances make life easier. By communicating the use of an object before the user interacts with it, affordances assure that people are able to navigate interfaces with ease. Bringing these concepts from the physical world into the virtual one is a critical step in building intuitive interfaces.