A User Experience You Can “Afford”

Image for A User Experience You Can “Afford”

How do you know that a door opens—and that it opens inward or outward? How did you first come to understand that you can call an elevator by pushing a button? Any opportunity like this to interact with an object is an affordance, and these interactions can be difficult to represent in a two-dimensional digital interface.

Originally defined by James Gibson in his 1979 book, “The Ecological Approach to Visual Perception,” affordance refers the ability to interact with an object. Affordances exist whether we are aware of them or not. For example, a trap door in a floor has the affordance of opening even though you may not realize it’s there. Additionally, an object can have more than one affordance, as in Gibson’s example of a rock possibly being thrown as a weapon or used as a paperweight or hammer. Furthermore, affordance is directly related to an individual’s capabilities: a bar stool offers the affordance of sitting to an adult but not to an infant.

Don Norman, in his seminal book “The Design of Everyday Things,” shifted the definition (unintentionally) to focus on perceived affordance(s), or signifiers, of an object. An object’s perceived attributes, along with the goals and existing knowledge a user possesses, help form the understanding of how the user should interact with the object. For example, the shape of a handle hints at grasping, and the raised contour of a button attracts pushing. When the perceived affordance matches an object’s intended purpose, a successful interaction typically results. When they don’t match, a failure often occurs—ever pull on a building’s exterior door handle only to find out the door opens inward?

Affordance and signifier truly have different meanings, but affordance is often used when the latter is intended. Because we are in the business of designing usable digital interfaces, and in hope of reducing future confusion, the rest of this article will utilize the more appropriate term: signifier. After all, an interface that contains desired functionality that is unperceivable to the user defeats the purpose—the user’s perception of the affordance is of utmost importance.

When it comes to recognizing signifiers, people interacting with three-dimensional objects have the advantage of many years of exposure and experience to draw from. In a two-dimensional digital world, however, things become particularly tricky. When graphical user interfaces (GUI) were introduced, designers were challenged with creating elements the system user would understand given the novelty and relative lack of physical attributes. Skeuomorphic designs, modeled on real-world objects, helped introduce many people to the world of personal computing: contacts were accessed by selecting an icon of a Rolodex; files were accessed by clicking an icon of a manila folder; virtual bookshelves housed digital books.

Although this approach certainly aided early adoption and usability and has given millions of people experience to draw from going forward, skeuomorphism’s limitations—increased usage of screen real estate, regional/cultural differences in object design/usage, and inconsistent appearances between sites and applications, to name a few—hindered its long-term feasibility. Therefore, designers have spent years iterating on more abstract, but meaningful, designs to connote intended interactions. This evolution has allowed users to accurately interpret signifiers with more judicious use of screen space.

At times, however, designers are required to push the envelope a bit, utilizing novel iconography or interaction patterns. Displays have moved from large external monitors to tablets, to smartphones, and, now, to very small smart-watch screens. At the same time, digital capabilities continue to increase, making for a complex puzzle to solve: how to deliver increasing functionality in decreasing space? Some solutions involve temporary signifiers to introduce an interaction, such as a short onboarding walk-through or one-time callouts (e.g., “Swipe left to delete an entry”). Once introduced to a new, possibly unexpected signifier, the user is likely to not need the coaching going forward, freeing up space and reducing visual complexity.

It’s a never-ending challenge to accommodate new digital capabilities. New affordances lead to new signifiers, and shifts in the physical world affect their digital counterparts. Designers will continue to adapt to these changes so that their digital signifiers denote the intended affordances. Some of their creations have important, but short-lived, lifespans. Others far outlive their original inspiration, such as the handheld receiver (Call) and envelope (Email) icons.

As you use new (or old) digital interfaces, think about the various visual characteristics that signify how you should interact. If it’s a good, easy experience, hopefully you can appreciate the effort that likely went into insuring you knew what to do. If it’s a difficult, frustrating experience, maybe you can think of a more appropriate signifier and create the next floppy disk icon (Save)!

Illustration by Ashley Pulli

The author

Image of Steve Jones

Steve Jones

Senior UX Researcher