Illustration by Nitzan Klamer

User experience design is a diverse profession that stretches beyond the limits of visual design. Some 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.
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

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.
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 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.
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.

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.
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.

The suggested pricing package has a unique blue CTA while the others are white thus directing the user to this option. Image credit Dropbox.
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.

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.
Shows similarities based on shape, size and color. Image credit Interaction-Design.org.
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.
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.
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.
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.
Shows two groups made up of the same circular shape. The brain perceived two groups due to the proximity. Image credit Smashing Magazine.
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.
The foreground shows  two profiles in one color. The background between them is another color and looks like a vase. Image credit Wikipedia.
  • 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.
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.