Affordances

- I'm Jill Butler, and this is Universal Principles of Design. In this movie, Affordances, or Mastering the Push and Pull of Interaction Design. We begin with security footage of an attempted bank robbery in London England in 1992. Our perpetrator enters the bank and proceeds to deliver a threatening demand note to the bank teller. And you'll see here in a minute the teller activates the security system which immediately shoots up a protective shield over the teller windows. The robber startled, he makes a run for it, only to be thwarted by the front door. After several failed attempts at pushing the door open, flustered and confused, the robber walks around in circles considering his predicament. And then perhaps mercifully, another customer wanders into the bank, highlighting that it's a pull door and not a push door. And the unsuccessful robber makes his escape. Well it's easy to laugh at this bungle of a crime, and to simply write the criminal off as dimwitted, think for a minute. How many times have you approached a door tried to open it and made the same type of error? All of us have. We pushed when we should have pulled or pulled when we should have pushed. And then, we usually realize our mistake, feel silly for our error and try again another way. So why does this happen? Well in the case of our bank robber, the form of the door handle which was the same on both sides looked and operated like a big push plate on entry. So how it looked and how it worked were the same. No problem. But on exit, the same door handle still looked like a push plate. But, it needed to be pulled. How it looked and how it worked were not the same. And this incongruence between form and perceived function is what tripped up our robber. This all too common type of door configuration is increasingly referred to as a Norman door, after Don Norman, the design expert who first called our attention to this design problem. Norman doors have become symbolic of a class of design defects that lead people to use a thing incorrectly and then adding insult to injury, lead them to blame themselves, versus the designer for the error. Norman doors and similar design defects result when the forms of objects do not align with how they're supposed to be used. Or when they have what are called bad affordances. So, what is an affordance? An affordance refers to the physical characteristics of a thing that influence its function and use. When the affordance of an object aligns with how that object should be used, then we say the affordance is good. The object will perform efficiently and be easy to use. When the affordance of an object does not align with how that object should be used, then we say the affordance is bad. The object will perform inefficiently and be hard to use. A key aspect of affordances is that they operate beneath our conscious awareness. For example, it's common for people to try to fix Norman doors with signs, like putting a push sign near a pull handle on a push door. But this does not work. Because we perceive and act on a pull affordance of a handle without even thinking about it. It's only when pulling fails to open the door, that we consciously attend to the sign, but at this point, the error has already been made. All the sign accomplishes is making the user feel stupid. So, the solution is to fix the affordance. Not to try to patch the defect with things like signage, training, documentation, and so on. So here are a few examples to drive home this concept. Push plates on doors afford pushing. While handles on doors afford pulling. Buttons afford pressing and pushing, while switches afford flipping. Circular controls afford turning, while linear controls afford sliding. Smooth rods afford bird perching while spiky rods negatively afford bird perching. Now you may have noticed in this last example that you can have positive and negative affordances. Both of which can be effective at influencing behavior. Generally, when you want to increase particular behaviors, you make things easy, using positive affordances. And when you want to decrease particular behaviors, you make things difficult using negative affordances. A favorite example of mine in this regard, is the bane of big cities and rail road cars, graffiti. Big flat outdoor surfaces afford being drawn and painted on. They are basically blank canvases begging to be painted. And what do cities and building owners typically do when a surface gets tagged? They paint it over with a solid, neutral color, which just resets the affordance to a blank canvas, which again attracts graffiti and the cycle never ends. If you want to deter graffiti, you have to remove this affordance. So how to do this? Painting the blank surface with your own mural is one way. This removes the blank aspect of the canvas and has been shown to dramatically reduce graffiti. Now this would be a great strategy for rail road cars although I've never seen it done. But when it comes to walls of various types, the strategy that removes graffiti affordance better than all others is plants. Specifically, wall crawling vines. Vandals cannot easily paint on them, they can't easily see what they do paint, and any leaves that they paint soon die and then fall off, thwarting their artistic vision. Plants are perfect anti-graffiti devices. Strictly speaking, affordances can only exist with physical objects, but a variant of the concept known as perceived affordances does exist in software. And a perceived affordance refers to the visual characteristics of a thing that imply its function and use. For example, a flat square on an interface has no perceived affordance. But give the flat square some dimensionality and a drop shadow, to indicate that it can go up and down, and it starts to look like a button. It now affords pushing or clicking. This is where where fad toward flat design runs counter to usability. By making interfaces flat and minimal, we remove many of the perceived affordances that make them intuitive to use. Affordances are one of the most basic and yet most violated of the universal principles of design. As the ubiquity of Norman doors and flat interfaces demonstrate. As you consider affordances in your designs, here's a simple litmus test for their correct use. When affordances are correctly applied, whether positive or negative, it will seem inconceivable that a thing can function or be used otherwise. So whether you use affordances to make your products more intuitive to use, to increase or decrease particular types of behavior, or to unwittingly foil bank robberies, remember good designers master the push and pull of interaction design.