Principles of Design Psychology

“What is design?” Design is essentially another form of human communication, meaning a designer must have a strong understanding of the audience you are trying to reach.

That understanding is no less important in web design. In fact, it’s so important that they have coined the term “user-centered web design.” User-centered web design focuses on the audience, identifying their unique needs and characteristics while applying basic psychological principles to communicate a message, solve a problem, or create an experience.

If you saw our Braindrop on Psychological Design Principles, then great! You’ve got a little head start on our topic. If not, no problem. In this article we’ll be taking a deeper dive into eight psychological design principles and how you can apply them to achieve a user-centered web design.

Principle 1 - The Gestalt Theory

The term Gestalt means “unified whole.” The theory essentially describes people’s tendencies to unify visual elements into groups. Using the six Gestalt principles will make any design seem more unified and complete. Specifically in web design, these principles not only improve the overall design, but also enhance the user experience and usability of your site.

6 Gestalt Principles

  • Similarity
  • Continuation
  • Closure
  • Proximity 
  • Figure/Ground
  • Symmetry and Order

There are many ways you can apply these principle to improve your overall web design. In our example below, we illustrate the result of having similarly sized images on the page.

Before applying the Gestalt Principle of Similarity, the product images are all different sizes. Making them all a consistent size, creates unity and allows to user to easily scan the page for relevant information.

Principle 2 - Von Restorff Effect 

This describes the human behavior of noticing and remembering an element that stands apart from its surroundings. In web design, catching the user’s eye is key for calls-to-action or conversions. Or you may want to highlight important information or promotions.

Before applying the Von Restorff Effect, a sale the store is trying to promote is lost amongst the other page content. Using a callout block page element, the sale now catches the users' attention, which will result in more conversions.

Principle 3 - Mental Models

This describes the users’ thought process for how something should or might work. As a designer, you must understand and anticipate those assumptions and design to fit. This is a key psychological principle in user-centered design. We must create websites that anyone will be able to visit, interact with, and navigate—hopefully with ease and intended outcomes.

Using an online shopping cart is a mental model we carry over from a physical shopping experience to a virtual one.

Principle 4 - Visceral Reactions

This is exactly like it sounds—gut reactions—and pretty straightforward. It’s all about creating a visually appealing experience. The best and simplest way to achieve this in web design is through your imagery choices. Use images of smiling people, beautiful photography, etc. You get the idea. This principle works because the users will like the design because it makes them feel good.

We could improve our initial page designs in our clothing store example by applying this principle. If we insert an image of a fun, smiling woman wearing the product, with more product images below, we may see an increase in conversions simply based on the fact that the image evokes an emotional response.

Using positive images in your web designs will create positive emotional responses for your users.

Principle 5 - Psychology of Color

There has been a lot of research done on the effect colors have on our subconscious. Up to 90% of decisions are made based solely on color1. People’s perceptions of color vary based on gender, age, and cultural background. One study found that blue is the most popular color for both men and women, while women also favor pink equally as much as blue.2

The graphic to the right shows a quick rundown of various color associations. It’s important to note that this is a general example, and is not a good replacement for truly understanding your audience and their unique interpretations of color.

Principle 6 - Psychology of Shapes

Just like color, our human minds have subconscious reactions to different shapes as well. This basically means that people designate different attributes to certain shapes. Here are some examples:

  • Circles, ovals and ellipses - relay a positive message, often related to community or relationships
  • Squares and triangles - relay a strong message, often related to strength and stability
  • Vertical lines - often represents intensity, strength, or aggression
  • Horizontal lines - often represents calm, equality, or tranquility

Principle 7 - Dual-Coding Theory

The dual-coding theory explains that humans require both visual and verbal information to process information the fastest. So even though we process visual information 60,000 times faster than text2, to be most effective we shouldn’t throw verbal communication out the door. When designing your website, try to capitalize on opportunities to illustrate your information whenever possible. Your users will fully understand your intended message if you both say it and show it.

We include an image icons for product categories to help users quickly navigate to the products they are searching for.

Principle 8 - Cost-Benefit Analysis

We may not even realize it, but our subconscious brains are processing every decision we make through a cost-benefit analysis. A cost-benefit analysis is simply weighing the cost of any given action with the resulting benefit or outcome. You should consider this anytime you ask your users for information on such things like form submissions or email sign-ups. If they feel the cost of a lengthy or intrusive form isn’t worth the benefit you aim to provide, they simply won’t act.

Form submissions should be kept short and ask for only essential information.

At Click Rain, we handcraft your site to capitalize on all eight design psychology principles. Whether you want to update your existing site design or start a new site from scratch, we can help! If you’d like to learn more about the principles we covered today, as well as the other five, check out the link to our blog post.

1 -
2 -
3 - https://www.business2community...