Design Psychology: 6 Concepts Every UX Designer Should Know

xd.adobe.com/ideas/principles/human-computer-interaction/6-concepts-every-ux-designer-should-know

Justin Morales Jul 28, 2020

User experience design is a diverse profession that stretches beyond the limits of visual design. Some Illustration by Nitzan Klamer
people think that design is purely an artistic job where the designer creates beautiful, elegant designs.
However, the ability to design an aesthetically pleasing interface is not going to guarantee its success. What makes or breaks the design is
how the user thinks and perceives it through each step through the experience. A successful designer can not only create aesthetically
pleasing designs, but they also understand the psychology behind the user that makes or breaks the user experience.

Understanding the psychology behind the users allows the designer to create an intuitive, streamlined experience where the user finds
heightened usability, efficiency, and pleasure when interacting with a product. If the designer focuses solely on making things “pretty”
and neglects the psychology portion, more than likely, their product will fail. Luckily for designers, there are numerous design
psychology principles available to help guide our decisions. Once we understand the psychology of design, we are empowered to create
beautiful experiences that adhere to the psychology behind the user’s experience.

Human-computer interaction design

The first and most fundamental design concept every designer should know is Human Computer Interaction design (HCI). HCI
integrates concepts and methodologies from three disciplines: computer science, design, and psychology. These concepts as a whole help
guide a designer’s decisions towards creating interfaces that are accessible, easy to use, and efficient. The goal of HCI is to make
computer actions more human, thus making the user experience natural.

HCI is made up of computer science, cognitive science, and design. Image credit Quora.

Emerging in the 1980’s, HCI practitioners began to observe the ways in which people interact with computers. HCI began to take into
account a user’s psychology and mental models. As the digital age progressed, we began seeing other forms of computers such as tablets,
laptops, cell phones, and wearables. This product evolution has also yielded the evolution of HCI to UX design. In many ways, HCI is the
precursor to UX design.

Today, HCI is a broad field which overlaps areas such as user centered design, user interface design, and user experience design. HCI
practitioners tend to be more academically focused while UX designers are more industry focused and are typically involved in building
products or services like mobile apps or websites. Iterative testing is another major principle in UX design that stemmed from HCI. At
the end of the day, in order to be a successful designer, you must understand the fundamentals of human computer interaction.

Interaction design

1/12
Interaction design is another psychological concept that every successful designer should know and understand. Interaction design (IxD)
is the design of the interaction between the human and products. There is a psychology behind how users interact with digital products
and services. Here are five things to consider when understanding the psychology behind interaction design.

1. Affordances and Signifiers – An affordance is a feature’s evident function (ie: a door tells us it can be opened) where the
signifiers are visual cues suggesting that feature’s affordance (ie: the door knob). Without signifiers, users often can not perceive
the affordance. In UI, the shape of a clickable button is an affordance while the text “Submit” is the signifier.
2. Learnability – The amount of time it takes for a user to figure out how to use your interface refers to learnability. If the learning
curve takes too long, users are more likely to abandon the experience. Consistency and predictability help a user learn how to use a
product quickly, thus creating a more pleasurable user experience.
3. Usability – The very foundation of IxD is usability: an interface must be usable by the user in order to be successful. You are able
to accomplish this by removing unnecessary steps, adjusting information architecture, changing visual hierarchy, etc.
4. Feedback (and Response Timing) – Without feedback, there is no interaction between the product and the user. From subtle
micro-interactions to a sound queue, feedback allows the user to understand how they are communicating with the product. When
dealing with feedback, you must consider the response time of that feedback. Ideally, within 0.1 seconds, the user must be signaled
to make them feel in control of the interface. An example of feedback is a swoosh sound when an email is sent or a beep to let you
know the upload is complete.
5. Goal driven design – Successful products have users accomplish goals. Understanding what your users want and their
preferences for getting there is the center of goal driven design. User research is very important here as it helps you identify your
pain points and the personas you are designing for. Once you understand your user, their goals, and their frustrations, you are able
to design a solution for them to accomplish their goals.

A Venn diagram showing how Interaction Design fits in with User Experience Design. Image credit Dan
Saffer.

Hick’s law
Hick’s law states that the time it takes to make a decision increases with the number and complexity of choices presented to the user. The
more the user is stimulated with options, the longer it takes them to decide. For example, have you ever been to a restaurant with a menu
that was long and overwhelming? Did it take you forever to choose with so many options? This is Hick’s Law in full effect.

In UX design, if you want your user to have a smooth experience with your product, try to reduce the number of options you present to
them at once. Limit the options to precisely what they need to accomplish their goal. Limiting their options to exactly what the user
needs will help them navigate in an efficient and streamlined manner throughout your app. Thorough user research is the best way to
pinpoint these key features to incorporate in your design.

One way to put Hick’s Law into effect into your design is to break up long or complex processes into screens with fewer options. A great
example of this is breaking up the checkout process to multiple screens such as “shopping cart > delivery details > payment information
> review and submit.” Another way to incorporate Hick’s Law is to highlight recommended options for your users in an effort to not

2/12
overwhelm them with options. Finally, progressive onboarding is a great way to minimize the cognitive load for new users.

A chart showing the correlation of the number of choices in regard to the time it takes to make a decision. The increased number of choices, the
longer it takes to make a decision. Image credit TechTarget.

Von-Restorff Effect
The Von-Restorff Effect, also known as the “isolation effect”, predicts that when users are presented with multiple homogeneous stimuli,
the one stimulus that differs from the rest will be remembered. In other words, the object that is different from the others will have a
higher chance of being remembered. Since the unique object stands out against the crowd of similar objects, it is remembered.

3/12
 Three are green while there is one red one. The red one stands out and is remembered as per the Von-Restorff Effect. Image credit SiteW.

UX designers use the Von-Restorff Effect to their advantage. A classic use case of this concept is designing big, beautiful buttons. You
want the call-to-action (CTA) to stand out, so you must design it in a way that it distinguishes itself from everything else. A visible CTA
can make or break conversions, so you want to make sure you draw attention to its presence. Pricing pages are also a common area where
UX designers leverage the Von-Restorff Effect.

4/12
 The suggested pricing package has a unique blue CTA while the others are white thus directing the user to this option. Image credit Dropbox.

Another common area that UX designers leverage this concept is on product pages. It is a great way to highlight best sellers or new
arrivals and incorporate Hick’s Law (limiting options) and the Von-Restorff Effect.

5/12
 The one option is labeled “Best Seller” thus isolating it from the rest while limiting the choices for the user. Image credit Revolve Clothing.

Gestalt principles of visual perception

Some of my favorite ux psychology principles are the Gestalt principles of visual perception. Gestalt’s psychology principles describe how
the human eye perceives visual elements. They aim to explain how the eyes perceive shapes as a single, unified form rather than separate
elements. It is a prime example of how psychology and design go hand-in-hand. It is definitely something every designer should know
when approaching a UI.

The main Gestalt principles of visual perception are:

Similarity: The human eye will build a relationship between similar elements in a design. Using basic elements such as shapes,
colors, and size is an effective way.

6/12
 Shows similarities based on shape, size and color. Image
credit Interaction-Design.org.

Continuation: The human eye tends to follow the paths, lines, and curves of a design. The user’s eyes prefer to see a continuous
flow of visual elements rather than separated objects.

Alt TShows similar shapes and lines with gaps. The mind fills in these gaps thus showcasing this Gestalt principle. Image credit UX Misfit.

Closure: The human eye prefers to see complete shapes and will fill in gaps. If the visual elements are not complete, the user can
perceive a complete shape by filling in missing information.

7/12
 Shows lines that when seen together look like an airplane. There is space between these
shapes that the mind automatically fills in and perceives. Image credit Eye Can Learn.

Proximity: Simple shapes arranged together can create a more complex image.

8/12
Shows two groups made up of the same circular shape. The brain perceived two groups due to the proximity. Image credit Smashing Magazine.

Figure/Ground: The human eye will isolate shapes from backgrounds.

The foreground shows  two profiles in one color. The background

between them is another color and looks like a vase. Image credit
Wikipedia.

9/12
 Symmetry and order: The design should be balanced and complete. The user’s brain will automatically spend time and effort
trying to perceive an overall picture.

Shows a balanced circle made up of half bicycle wheel and half sewage
lid. Image credit Canva.

Understanding UX design psychology empowers designers

Now that you understand the importance of psychology in design, you have gained the tools to put this into action. Understanding the
foundations of HCI can help guide you towards streamlined, efficient interactions. Understanding the levels of Interaction Design helps
designers tap into the psychology behind that interaction. Applying principles such as Hick’s Law, the Von-Restorff Effect, and Gestalt
principles empowers the designer to tap into the visual psychology behind the design. In the end, understanding the psychology
component in UX design is what makes or breaks successful designers.

Human Computer Interaction

Words by

Justin Morales
Justin Morales is a Senior UX designer currently working at Signify Health, a B2B Healthtech company, based in Los Angeles. He grew
up in Texas, matured in Colorado, and spent his late 20s living in Australia, New Zealand, and Asia. His favorite medium is
photography and he is a lover of UX because it means constantly helping people.

Related Content
→

10/12
11/12
12/12