You Can Afford to Design with Affordances

There is a refrigerator at the office that has both a water dispenser and an ice dispenser. The first time that anyone new to the office attempts to dispense a cool, refreshing glass of water ends with that person being splashed with water.

Care to guess why?

The design of the water dispenser is unexpected. In fact, many people first attempt to push their cup against the curved metal plate in the back (which dispenses ice, not water). After realizing that they pushed the wrong plate, many people will push the flat metal plate at the top (which does in fact dispense water). Unfortunately for them, they usually push the water dispensing plate while keeping their cup adjacent to the ice dispensing plate. As you may have noticed from the picture, the water is dispensed from the tiny spout at the top of the dispensing nook.

The end result? Splash.

Why does this happen? Why don't new users immediately grasp how to use this dispenser? Quite frankly, because the designers of this dispenser didn't make proper use of affordances.

Affordances provide users with a hint as to how something is to be used. They take the infinite number of possible actions that might activate a feature and reduce those possibilities down to the proper actions. The critical quality of an affordance is that it must be obvious.

The designers of the water/ice dispenser made a mistake by having the water dispenser's plate be flat in shape. There isn't anything about a flat, vertically-oriented metal plate that says 'push a cup here'. In contrast, the ice dispenser's curved, vertically-oriented plate practically begs you to push a cup against it.

The ice dispenser's curved plate arguably makes things more confusing for the user than having a flat plate would in this instance. The ice dispenser's affordance attracts the user to keep their cup located in the wrong spot in order to successfully dispense water. Ideally both plates would be curved, or neither plate would be curved.

Folks, take care when designing your user interfaces. Make sure that you are creating affordances in the design that make things easier for your users. They will thank you for it.

Bonus Content:

The folks at Extra Credits have a great video on the use of affordances in game design.