Psychology of Web Design Vol. 1: Affordance

Hello, I'm Tamochi.
I work as an engineer and a psychology writer.

In this note, I mainly provide articles about IT based on a psychological perspective. This article is the second in my 100-day consecutive posting project.

Now, here is the main content.

The Psychology Hidden in Web Design

The designs of the websites and applications we see every day are filled with various intentions, such as wanting users to click, make a purchase, or proceed to the next page.

To ensure that users can operate without confusion and to ensure that the operator's intentions are understood, there are various techniques to naturally encourage action.
The core concept behind this is what is known in the worlds of psychology and design as "affordance".

What is Affordance?

The term "affordance" might not be familiar to you. This is a concept proposed by psychologist James Gibson, which means "the possibilities for action that the environment provides to an animal." Simply put, it is the characteristic that "you can tell what can be done just by looking at it".
For example, the round shape of a doorknob naturally suggests the action of "turning," a flat plate suggests "pushing," and a vertical handle suggests "pulling." The steps of a staircase make the action of "climbing up or down" possible, and the height and shape of a chair's seat encourage the action of "sitting."

Affordance is usually used to encourage specific actions, but it is also useful for inhibiting them.
For example, a lever on a building window that must be pushed or pulled before it can be turned prevents children from playing with it or opening it accidentally by introducing an unnatural movement.
Also, the fact that many armrests are installed on benches in public spaces is a design aspect intended to prevent people from lying down to sleep.

As we can see from these real-world examples, by utilizing affordance, we can control the promotion or inhibition of user behavior.

Affordance in Web Design

There are also various examples of affordance in website design that reflect real-world elements.

A representative example is the button. A button that looks three-dimensional with a shadow reminds us of a "pressable button" in the real world. Its shape and texture naturally suggest the possibility of the action "this can be pressed (clicked)."

On the other hand, in the digital world, new affordances can be born through cultural learning.
The three-line icon (≡) known as the hamburger menu is a prime example. When it first appeared, almost no one understood that "pressing this opens the menu" just by looking at the icon. This is because the shape itself lacked clues for the action.

However, as it became widely adopted in smartphones and web apps, people learned the association of "three lines = menu," and now it can be operated intuitively. In other words, the hamburger menu is an affordance whose meaning was formed through social learning.

The Concept of Signifiers

Here, let's also grasp the concept of "signifiers," which is deeply related to affordance.

Designer Don Norman called the clues that make affordance perceivable "signifiers". While affordance refers to "the possibilities for action inherent in the shape or properties of an object," signifiers mean "the visual or dynamic clues used to explicitly communicate that."

For example, the blue color or underline of link text is a signifier that communicates "this can be clicked," regardless of the shape of the text itself.

The blinking cursor in an input form, the change in cursor shape when hovering over a draggable element, and the movement of a button that looks like it's being pressed when clicked—these are all examples of signifiers that inform the user of "what can be done now" and "what the state is."
The hamburger menu mentioned earlier has also come to function as a signifier that indicates "tapping opens the menu" through cultural learning.

In excellent web design, by combining affordance and signifiers in this way, by matching appearance with function, a user experience is realized where users can operate without getting lost.

Challenges of Flat Design

By the way, as a recent design trend, flat design has become popular. This is a simple design method that eliminates shadows, three-dimensionality, and decorations. While it gives a beautiful and sophisticated impression, it also created problems from the perspective of affordance.

As a result of eliminating shadows and three-dimensionality, it became difficult to understand what is a button and what is just text, and where you can click and where you cannot. Especially when iOS 7 was first released, it is said that many users were confused by the interface operation.

Reflecting on this, a method sometimes called "Flat Design 2.0" is spreading, which aims to balance beauty and usability by leaving subtle shadows, color changes, and slight three-dimensionality instead of being completely flat.

Many current websites and apps adopt designs that are conscious of these balances.

The Principle of Least Astonishment

As a guideline for excellent design that appropriately connects the intentions of users and designers through affordance, as we have seen so far, there is something called the "Principle of Least Astonishment."

The Principle of Least Astonishment is a design guideline that states, "it should not betray user expectations and should behave as predicted". By appropriately designing affordance and matching appearance with function, users will be able to operate without confusion and without stress.

For example, the experience of an element that looks like a button but cannot be clicked, or something that looks like a link but is just text, causes confusion and stress for the user.Excellent design is something that users can intuitively understand and that behaves as expected.

Summary

Websites that we look at casually every day also hide such psychological considerations and various ingenuity. You might find new discoveries if you look at them from the perspective of affordance, which I covered this time.

I will continue to delve into the psychological elements hidden in various technical applications in the future, so please look forward to it.

Thank you for staying with me until the end! This was the second installment of the Tamochi consecutive posting project, "Psychology of Web Design Vol. 1: Affordance."