Psychology and Design | Their equation

Prathyusha Rao
6 min readJul 14, 2021
Picture of some of my explorations using elements of design.
Image Source — Self-Made

Hot summers always used to push me to the terrace in order to have a good sleep and this developed a habit in me unknowingly. An old habit of connecting the stars in the sky, perceiving the shapes of the clouds, and trying to make sense out of it.

All these aside, have you ever noticed the moon and tried perceiving the shapes inside the circular figure of the moon which look like layer blurs with added drop shadows in it if I have to use the design language. I have perceived an old woman, an infant, and a branch of a tree inside the moon, and many more in all these years.

Wait…

Are these true?… Are these illusions with varying perspectives?

While illusion is the misinterpretation of an unreal vision, perspective is a point of view or an attitude towards a thing that will vary depending on many factors like person-to-person, time, context, situation, angle, etc…

Now, where do we get to see perspectives… in everything/every design(both physical and digital) around us!

How come everybody has different perspectives regarding the same design or objects?

Here comes the play of Psychology!!!

Yes, it all depends on our state of mind, past experiences(memories). As a designer of any product, one needs to always understand the user which means analyze the psychology or mindset of the user to provide him with the best user experience which in turn obviously leads to growth in business.

Example:

Image of the Moon, with marking of the illusions or shapes on it…To help reader help perceive the possible illusions one can have when looked at the Moon.
Image Source — Wikipedia

The same snap of the Moon is shown multiple times in this picture. But the second column shows us the different illusions or pareidolia one can possibly see/observe.

At very first sight, I can only see the “Face of a Man” on the moon’s surface. One next to me can see a rabbit in it. In spite of knowing the fact that, it's the same Moon, we are still able to perceive different shapes on the Moon’s surface, which is purely Psychology or must say Gestalt’s Psychology. Adding to it…

Design is an intermediary between information and understanding — Hans Hofmann

The snap of a Moon shown to me and my friend is one and the same, which means, the information provided is the same here. But still, we have different illusions, perspectives, and designs visible, which means different understanding.

This is how psychology and design shake hands to produce the best User Experience(UX)!

Let me take you deep into it with the help of some of my explorations.

To begin with…

What is Gestalt Psychology?

It states that…Humans tend to perceive objects ignoring the gaps(if any) present in them and try to make the sense out of them with the influence of our past experiences.

Gestalt Psychology has 7 principles that will help us understand here on.

Gestalt’s 7 Principles of Psychology:

Closure:

States that when we see any complex structure of visual elements, our brain looks for a single recognizable pattern with the help of memories.

Example:

This design here is a combination of elements/rectangles.
Image Source — Self-Made

This design here is a combination of elements/rectangles.

Take a moment, what do you perceive from this image?

I can perceive this design as the “Alphabet W”(white area). This is because my brain is trying to relate it to my memories and make the sense out of them.

Proximity:

States that things that are close appear to be more related than the things that are at a distance from each other.

Example:

This design is a combination of square braces arranged in a certain pattern which looks like the crowded place.
Image Source — Self-Made

This design is a combination of square braces arranged in a certain pattern.

I can clearly see this design as the shapes(square braces) are arranged in three groups purely because of the distance between them. A minute change in the distance makes the shapes appear as a group on the whole as they are not in a uniform pattern.

Similarity:

States that objects that share visual properties (like size, shape, color) appear to be similar.

Example:

This design here is a combination of shapes or elements like circles, rectangles and squares.
Image Source — Self-Made

This design here is a combination of shapes or elements like circles, rectangles, and squares.

I can easily group the elements which are looking similar in shape though they are of different sizes and colors. I can recognize and form groups of circles, rectangles, and squares during viewing this design.

Figure-Ground:

States the harmonious relation between the background and the foreground of a design. The human eye always tends to separate the shapes from the design’s background.

Example:

This design is the combination of elements which together look like a baby’s hand.
Image Source — Self-Made

This design is a combination of elements that together look like a baby’s hand.

The baby’s hand-design seems to look like the foreground design and the white space as the background of this image.

Common Fate:

States that we, humans group elements that move in the same direction rather than the ones that move in different directions. This principle is mostly used to attract the user and take him to a particular point.

Example:

This design is a combination of curves or sine waves.
Image Source — Self-Made

This design is a combination of curves or sine waves.

I can see the sine waves here moving in the same direction, bottom left to top right. I can perceive these directions because of my past experience of watching sine waves moving from left to right.

Focal Point:

States that, we tend to see a different looking or an odd element in a group. This principle is mostly used to create user interest.

Example:

This design is a combination of different elements.
Image Source — Self-Made

This design is a combination of different elements.

In spite of knowing that a lot is happening in this design, part of this design looking like Alphabet “C”(the white space inside Alphabet “B”) catches my attention the most.

Continuity:

States that elements arranged in a line or a curve look more related than the scattered ones as we always tend to perceive the patterns.

Example:

This design is a combination of circles(elements) arranged in a pattern which makes it look like a Swastik symbol.
Image Source — Self-Made

This design is a combination of circles(elements) arranged in a pattern that makes it look like a Swastik symbol.

The circles are arranged in straight lines because of which these circles look more related and help us to make a closure of the Swastik symbol.

All these principles are purely based on the psychology of a human, applying which a designer can design a product accordingly and enhance user experience(UX).

Stop scrolling…Have you observed that each of these designs states multiple principles?

Scroll up! Go back and re-observe the designs.

The best thinking is rethinking — Shane Parrish

I have explored 100 such combinations using different elements of design to pursue the “Gestalt Psychology in Design”.

My Experience and Explorations…

Image Source — Self-Made

It all started off like this, yes, with designs that did not completely follow the principles.

Image Source — Self-Made
Image Source — Self-Made

Practice made me better in each exploration…

Image Source — Self-Made

Finally…

Image Source — Self-Made

Take Away Learnings:

All these explorations state one or more Gestalt Principles which conclude that these principles are present in every piece of design or art and it totally depends on how we perceive it.

Are you perceiving something different other than mine?

Nothing to bother at all! Because both of our perceptions are right. After all, it's a perception and not a theory to have hence proved right to it.

You can find more such combinations and perceptions here!

--

--

Prathyusha Rao

Passionate UX/UI Designer and a Mechanical Engineer by degree currently creating experiences at Motion Education Pvt Ltd.