Master these 10 design theories to help you make experience designs that are easier to pass

A good design should not only solve the right problem, but also create positive emotions for users. In the past, physical products could create emotional experiences through the five senses of human beings, but for today's digital products, this seems difficult to achieve because they only interact with the screen to get services.

Therefore, digital product designers need a deeper understanding of each type of emotion and the psychological principles that create them.

According to Don Norman, there are three levels of emotion people have towards an object: instinctive, behavioral, and reflective.

• Visceral level: “What does the user want to feel?”
• Behavioral layer: “What does the user want to do?”
• Reflective layer: “What kind of person does the user want to be?”

At the first level, users will generate emotions through visual and interactive design with the product. Therefore, this is where UI designers excel. In addition to aesthetics and basic graphic design principles, here are the psychology principles that I often apply to design in my work.

Gestalt Principles

1. Law of Similarity

The human eye tends to connect similar elements into a group, and the brain interprets these elements as having the same purpose.

Therefore, you should maintain consistency when designing interface elements with the same function and content.

Application scenarios: navigation, controls, cards, banners, content, paging

2. Law of Continuity

The human eye perceives consecutive elements as a group. This law is closely related to symmetry and similarity. By designing similar and repeated elements in a sequence, we can guide the user's eyes in the direction we want, which makes reading information more coherent and clear.

A little bit of cutting is to hint to users that there is more content waiting for you to view.

Application scenarios: menu, list, sorting, carousel, service progress

3. Closure Law

When presented with an incomplete image, the brain relies on previous experience to fill it in.

This is a commonly used rule in graphic and logo design, but in product design, we also often use it in icon and loading design.

Application: Icons, loading, data visualization

4. Law of Proximity

This is a basic rule in UI design because the human eye perceives any adjacent elements as a group.

When designing, I pay a lot of attention to using spacing to group elements together. I usually use large spaces to separate large content groups, and then use small spaces to separate small content groups within the large content group.

Application scenarios: navigation, controls, cards, banners, content, paging

5. Symmetry Law

Our brains love to see things that are symmetrical and balanced. It is the most frequently used and safest rule in all areas of design. It helps us create a sense of stability and order.

I often use symmetry when designing products that require simple and harmonious visualization. It also makes users feel more comfortable when they need to focus on important things. The downside is that if overused, the product can become boring and monotonous. Usually, I use titles or CTA buttons to better emphasize and call for action, breaking the monotony of the picture. (Note: CTA is the abbreviation of call to action, which is usually translated into Chinese as action call. It can be understood that any action that guides users to click is considered a call to action)

Application scenarios: controls, banners, emphasized content, product displays, lists, navigation.

6. Background Segmentation

This law is about the human eye's tendency to focus on things that are separated from their context or composition.

I use this rule to guide the user's eyes to the important information. It is usually a card design with a light shadow layered over the background. Also, structuring the whole is also a way to apply this rule.

Application scenarios: cards, content, lists, services, summaries

7. The Law of Common Destiny

Elements moving in the same direction are considered more related than stationary elements or elements moving in another direction. This rule application helps us establish relationships between groups and states.

I often use this rule more explicitly when animating. However, we can still apply it to many different factors.

Application scenarios: navigation/dropdown menus, collapses, accordions, tooltips, product sliders, parallax scrolling and indicators.

Focus Principle

When we look at something, our eyes tend to focus on the most prominent element first. Understanding this behavior will help us create an “anchor point” in our design that pushes the user to look at what’s behind our scene.

Application scenarios: content, landing page, price, product page, banner

Restorff effect

(Author's note: Wikipedia explains that it refers to the phenomenon that individuals tend to remember the most specific parts of learning materials or information they have seen or heard. For example, some reference books mark important information with different colors or special fonts, which is to use the Restorf effect to deepen the reader's impression.)

This is also known as the isolation effect, which states that people tend to notice and remember parts that are different from other parts. This rule can be easily confused with the law of focus. The difference is that the elements to which this rule is applied are usually independent and have no additional function to navigate more information for users.

Application scenarios: pricing table, promotional banner, introduction of different members

Instinctive reaction

Visual experiences built on the real world. For example, when we watch a video and there is a voiceover to laugh along with us at every climax joke, we are more likely to laugh. Users will like our design if it makes them feel good and comfortable.

(Caiyun Note: This theory means that users should be immersed as much as possible and the product should be used in a real environment. For example, the mobile phone prototypes that everyone uses daily, and the designed interface can be put into these prototypes to give people an intuitive feeling of the effect after application, which is also the application of this theory).

Application scenarios: product illustrations, illustrations, photography

Color Psychology

There are many studies that show that colors have a special effect on our subconscious mind. The perception of color also varies by gender, religion and culture. This colorful psychology poster is enough (Caiyun Note: Those who are interested can translate and study it by themselves).

Also, let’s not forget the colors that have been widely used from the early days to the present day, and the use of these colors is more in line with user habits:

• Red: Error
• Green: Success
• Blue: In progress
• Yellow: Warning

Psychology of Shapes

Just like colors, the human subconscious mind also responds differently to different shapes. For example:

• Circles, Ovals: Convey positive messages, often related to community or relationships.
• Squares and triangles: carry a strong message and are often associated with strength and stability.
• Vertical lines: represent strength, power, or aggression.
• Horizontal line: indicates calm, equality, and quiet.

Dual Code Theory

This theory explains that humans need both visual and verbal information to process information as quickly as possible. In addition, humans are visual animals and our brains process images 60,000 times faster than text. To maximize the effectiveness of the design, we should not remove explanatory text.

(Caiyun Note: According to this theory, when making a portfolio, you should use visual language as much as possible, with text as an aid. For visual designers, try to reduce the proportion of text if you can express it with pictures.)

An obvious example is the navigation bar. Most new apps or apps with complex features have both an icon and a text label designed for them.

Concurrent Design

The human eye tends to see parallel factors as more relevant than other factors. I often use this principle to categorize two different sets of content within the same screen. The easiest example to see is probably the Facebook messenger interface, where messages are parallel when posts are arranged side by side.

Common Area

This principle is similar to the Gestalt principle of the Law of Similarity, but it is not exactly similar. The Principle of Common Area is created by the way we use dividers, shapes, or colors.

If an interface requires users to scroll more to see the content, we should have some way to demarcate it more clearly than just using spacing.

Application scenarios: list, information flow

Scanning Graphics

According to various studies by groups such as NNGroup UXPin, the two most commonly used scanning patterns are "F" and "Z".

• F is the most widely used, especially for websites with large amounts of content.
• Z is used for sites that are less text-heavy, usually emphasizing the call to action at the end.

Once we understand how to use these patterns, we can choose layouts and arrange elements effectively to achieve our design goals.

Summarize

The first impression is the most memorable, and a positive experience can create a lasting relationship between the user and the product. If users like our design from the beginning, we can create a good advantage for our product.

(Author's note: These are all very basic theories, but the thickness of the foundation determines the height of later development. I am now increasingly able to appreciate this point, and I hope that everyone can pay attention to and strengthen the study of the foundation.)