Perceived affordances: Bridging innovation and usability

Can you describe the function of the object pictured below?

While viewers may differ on the specifics, they tend to arrive at roughly the same conclusion: it’s a structure that houses humans.

Now what about this one?

Giant scale? Portable stage? Simultaneous-play DDR dance pad for a 30-person troupe? It’s much more difficult to tell what this object is actually meant to do.

Both of these images depict highly fantastic, imagined objects conceived for science fiction literature over fifty years ago. Neither strongly resembles anything we use today. So why is it that one object (the older one, no less) communicates a clear function to viewers, whereas the other remains ambiguous? The answer tells us a lot about how to create designs that are both innovative yet usable.

 

Innovation vs. Usability
Designers are challenged to create products that are distinctive and visually appealing. Much of a product’s identity is communicated through how it looks, so there can be a lot of pressure to create elements that are new and different. But unique does not mean understandable, and we’ve all seen cases where the “new and different” solution left users confused.

If we wanted to play it safe, everyone would create products using universally agreed-upon standards, where buttons all looked the same and behaved the same way. Everything would be usable, but we would also miss out on critical things like delight and novelty.

So are innovative design and intuitive functionality mutually exclusive? Clearly not. But how do you effectively embrace both simultaneously?

Broadcasting Function
Let’s return to the two sci-fi images from the beginning of this post. The top image has visual cues that clearly broadcast its function to viewers. First, there is a man-sized door with a path leading up to it, which communicates that people are meant to traverse in and out. Second, the interior appears to be brightly lit, suggesting that people can see inside of it, which also suggests that people may be spending time there. There are other cues as well, such as the fact that the structure appears sturdy and well-sealed, and that there are windows for occupants to view the world outside. These cues all add up to conclusion that the sphere is intended to hold people and to keep them comfortable.

These types of cues are what’s lacking in the second image. Nothing about the machine in the image clearly broadcasts a manner in which it could be used. The large flat surface could be for walking, or it could be for laying objects upon. The towers in the corners could be transmitters, or they could be for decoration. The dais in the center appears to be some sort of control center, but it’s not clear what it would be controlling. Nothing about its appearance tells us how we should interact with it.

In the top image, the artist creates an understandable, functional object even though it’s very different from any existing object, while the second image leaves the viewer uncertain. This difference is largely due to the fact that one image uses cues that indicate how to interact with the object, whereas the other does not.

Perceived Affordances
Another name for these types of cue is “perceived affordances” (Mads Soegaard has a nice explanation of the difference between Don Norman’s “affordances” in HCI and psychologist James J. Gibson’s original meaning). A perceived affordance is the visual aspect of an object that communicates how you can interact with it, such as those cracked walls in Zelda games that indicate they can be bombed.

The reason the top image works is that it leaves necessary perceived affordances intact (door, ramp, lighting, windows), which frees the artist to manipulate other features (for instance, making straight walls curved and scattering small round windows over the surface).  The bottom image is novel, but it lacks perceived affordances that show how to use it.

So if you find yourself stuck in a design trying to balance innovation and usability, first consider what function you want each element to convey, and the intuitive cues associated with that function. Once that is set, the sky’s the limit as you flesh out the rest of the design.

—-

Public domain images obtained from zorger.com.