Norman Doors and Affordance Online

February 26, 2019 | by Dan Wu

The user is not like me. This sentence is engraved in my brain. When I was in my HCI (Human-Computer Interaction) program at graduate school, one of my professors required us to repeat this sentence loudly three times at both the beginning and the ending of each class. After studying, practicing and experiencing, I started to know the real meaning of this sentence.

A central goal of design is to convey information to users. A good design lets users successfully receive that information with a pleasant experience and minimal effort. Unlike designers, who bring a specific professional background and experience that puts them in a familiar space, end users have backgrounds and experiences that vary much more widely.

Due to the immense spectrum of people’s experience, expectations and assumptions can be a designer’s worst enemy. Even though we know we need to consider every possibility, it is still hard to avoid our bias. Thankfully, there is a method could help us: The Usability Test. In most cases, the results of the usability test are unexpected—always a case in point that proved my professor’s mantra, the user is not like me.


Picture 1: How users interpret (or misinterpret) an interface


Affordance in Interaction Design

During a recent meeting about a new website project for a client, the discussion reminded me of the word “Affordance,” another term that was often emphasized while I was in school.

The “Affordance” is one of the core principles of interaction design. It was defined by the perceptual psychologist James J. Gibson in his seminal book The Ecological Approach to Visual Perception. The concept was introduced to the HCI community by Donald Norman in his book The Psychology of Everyday Things from 1988.

The best way to think about affordance is as the utility your environment offers you that you can perceive through clues your senses interpret. Imagine you are being chased by a T. Rex, for example. In that moment, scanning your environment, you might be able to climb a tree, enter a building or run for some distance to escape.



Design builds on this concept. The most notable example in design, might be the famous Norman Door, as defined by Donald Norman. Here, the idea is that clues sent to you through the design of the door should successfully tell you how to successfully enter the room beyond the door—i.e. do you push, pull, etc.


Picture 3: Example of Affordance


This concept has been widely used in web design. Through the interpretation of a clients’ feedback from usability test results, we can keep improving our digital affordance to provide better user experience and higher usability.

For example, a Call-to-Action button with gray appearance (see picture 2, left) brings the affordance that the button is disabled or un-clickable. The green CTA button (see picture 2, right) conveys the signal that this button is where you should click next. When users do not carefully read the text on the CTA button, they probably hit the green one at first glance.

Picture 2: CTA Button with Different Affordance


This is how affordance can be a double-edged sword. Affordance isn’t inherently good or bad, it’s simply the signal that is sent. At the same time, the goal of our web work is always to create an environment that delivers positive affordance. It’s the functional side of what we mean when we say “design beyond your wildest dreams.” It’s true across any medium we work in, but in our UX work in particular, beautiful design is not enough. Here we need a perfect storm of beauty and affordance.

Now that you’ve gotten a crash course in affordance and human-computer interaction, do you have any experiences that you can think of where affordance in the design of everyday things has lead to a particularly good (or particularly bad) user experience? If so, sound off in the comments.

No Comments Yet.

Leave a comment