Some people often mistakenly think that design is equivalent to creativity. In fact, design is not the only result of creativity that is often described. Good user experience designers are often good at interpreting people’s hearts. They can gain insight into how a user views a design and distinguish its pros and cons.
Editor’s note: This article is from WeChat public account “UXRen” (ID: cnUXRen) , author of the UXRen community.
Translation: Xiao Hei, Review: Sorry
Some people often mistake design for creativity. In fact, design is not the only result of creativity that is often described. Good user experience designers are often good at interpreting people’s hearts. They can gain insight into how a user views a design and distinguish its pros and cons.
Don Norman, head of the design lab at the University of California (San Diego), described this analogy in his book Design Psychology:
We must design in a way that people do (naturally) rather than what we want. See another chapter, “Don’t be too logical.” After all, half of the world’s people have not yet reached the average.
As a designer, understanding the pain points of users is crucial in order to propose solutions to user problems. This process involves understanding user behavior and creating empathy with them to create a platform that enhances user productivity.
To help you understand the user’s perception, we have extracted five important lessons from the principles of design psychology. Let’s get started!
1, pay attention to “less is more” and “more is less” in UX design
Imagine going to a restaurant and you need to choose from a menu with more than 100 dishes. Obviously, it takes longer to choose from more than 100 dishes than to choose from the 20 dishes. The same is true for design.
Most designers have a general view of user design, which is to provide users with the option of surprise. There is no doubt that people like to make choices, but too many options can confuse them. The amount of information that ordinary people can handle at one time is limited.
This is related to Hicks Law. If people are given more choices, they will spend more time making decisions. Regardless of whether people intentionally (or unintentionally) perceive, the decisions people make depend to a large extent on what they think is “worthy.” Not only do they weigh the costs, but they also consider the benefits of decision making, which is called a “cost-benefit analysis.”
Image source: https://lawsofux.com/
Syck’s law. The more you choose, the more complex it is, and the longer it takes to make decisions.
More options lead to longer thoughts and decisions;
Break down complex tasks into smaller steps and simplify the selection for users;
Improve the recommended options to prevent users from being at a loss.
So how do you apply Schick’s law to your product design?
There is a simple principle here. Designers should always keep in mind that users will only visit your site with specific goals and don’t bother with too many options. Eliminate all kinds of over-emphasis, unnecessary links, text, images, buttons, so that users can find what they need, and complete the task as quickly and as if without distraction. Another lesson is to break down complex processes into simple, controllable small tasks. Let your users navigate seamlessly by providing clear paths and inspire Aha at the earliest possible time!
2, keeping the most important information above the fold line
Image source: https://lawsofux.com/
Image text: The F-law of web reading.
The user’s line of sight is usually moved horizontally at the top of the content area. This constitutes the cross above F. Next, the user’s line of sight will go down and move to the second horizontal line, which is usually shorter than the previous horizontal line. This is the shorter horizontal line below F. Finally, the user’s line of sight navigates down the content vertically down the left side. In a slow and organized browsing, a real stripe appears on the eye movement map, and some spots appear during a quick tour. This is the last vertical of F.
The first line of text gets more attention than the last few lines on the same page.
The first few words on the left side of each line will get more line-of-sight stays than subsequent text in the same line.
According to eye movementsIn tracking related research, most users are accustomed to browsing web pages in a similar eye-gazing mode (eye-eye browsing). Studies have shown that most web page heat maps are a good example of the visitor’s concentrated gaze area and gaze duration.
The most common browsing mode usually forms an “F” type area that represents the span of the user’s short-term reading. The user first browses on a horizontal line at the top of the screen, then moves down some and reads in a small area horizontally.
According to a study conducted by the Nielsen Norman Group on a web page with 45,237 PVs (page visits), people tend to read only about 20% of the text on the page. To make matters worse, on a website with more content, for every 100 words added, people will only invest an extra 4 seconds.
So how do user experience designers take advantage of this rule in their user experience strategies? We should put key information on the most viewed gaze points and try to attract users’ attention with short but compelling headlines.
In a world where people don’t read verbatim, the Nielsen Norman team provides the following guidelines to make text easier to read.
List of bulleted
Each paragraph expresses 1 point of view
Inverted pyramid structure – starting with the conclusion
The number of words is half (or less) of traditional writing
3, use color cautiously in design
The beauty of color is that it helps people identify and distinguish similar objects. Psychologically, color is the driving force of human emotions. Humans perceive or create color through the visual system of the brain, which means that color is actually subjective rather than objective.
Designers often use color as an important factor in attracting users’ attention. It provides designers with a link to the product brand. The purchase time and purchase decisions of most users are highly dependent on color.
How does color psychology help designers create a better user experience design strategy?
According to Joe Hallock (Azure’s chief design manager), there are significant differences in color preferences between genders. The favorite color for men and women is blue, and the least favorite color is orange. In addition, bright colors are usually the first choice for men, and soft colors are the first choice for women.
These findings clearly explain why blue is the designer’s favorite color and why orange is used the least. However, we should not only use colors based on user preferences, but also consider user behavior and preferences.
Image text: Different genders have different preferences for color
Men prefer bright colors, and women prefer soft colors.
4, clearly express which parts are related and which are not
In the design process, it makes more sense for designers to express structure and connections by showing the relative and irrelevant elements. Correlation (similarity) or irrelevance (variance) can be manifested by using basic elements such as shape, color, and size.
For example, the (old) website of salon consists of two parts, which are grouped according to their relative sizes.
Here, the user can clearly see two separate groups, the headline news on the left and the top news on the right. Although the two groups do the same thing, such as displaying an article, the user is more concerned with it by making the headline section larger in size and emphasizing the author’s name in different colors.
This is related to the law of similarity, that is, the human eye tends to treat similar elements in a design as a complete picture, shape, or group, even if they are separate.
Image source: https://lawsofux.com/
Image text: The law of similarity. The human eye tends to treat similar elements in the design as a complete picture, shape, or group, even if the elements are separate.
Ensure that links, navigation, and plain text are visually distinct and consistent in style.
如如If the above example still can’t convince you, let’s see how the similarity law expresses “association” in the design.
Links and Navigation
Linking and navigation is the most common way to quickly provide full-site navigation to your users. Often, readers don’t read the entire page in order to find what they want, they will try multiple link jumps or use navigation to find relevant information.
The designer intentionally or unintentionally uses the similarity law as the daily routine of web design. The law of similarity can explain why so many designers like to use blue underlined text as a hyperlink style, or at least make all links look obvious and consistent.
The official website of the American Shipowners Association (Boatus) uses underscores and colors to express the relationship between navigation link groups. This enables the reader to be aware that similar navigation items are relevant or have similar locations in the data hierarchy of the website.
5. Simplify the visual hierarchy by combining similar content and distinguishing different content
Most of the customers who have worked with our app developers have said this: “We want the app to be simple and easy to understand, and impress users.”
Users don’t like disorganized designs. According to a survey organized by Hubspot, “Visitors value the ease of finding information, not a beautiful design or a fancy user experience.”
Designers should group similar elements, information, or content to simplify layout. Combining these elements correctly will enhance the user experience.
This is related to the “law of proximity”, which states that the relevant elements should be close to each other, and the unrelated elements should be separated from each other or directly separated.
Image source: https://lawsofux.com/
Image text: Close to the law. People tend to group adjacent or close objects together.
The Law of Proximity effectively allows users to automatically group different content at a glance.
There are two main ways for designers to use “close to the law” to improve usability:
1.Help your users to find what they are looking for: Have you ever happened to stumble upon websites that have cluttered categories spread here and there. For an instance (see image below), say your users are looking to see the If you want them to easily find the category, it’s wiser to group other related items in a part of the interface devoted to “Computers & Office” as compared to provide disorganized mess of categories Below (left side).
Help your users find what they are looking for:
Have you ever seen those classified messy websites. As shown below, assume that users are looking for different kinds of pcs and laptops on your website. If you want them to find this category very easily, it’s more sensible to group related categories into “computers and office supplies” (picture on the right) than to provide a messy (left-hand picture) classification.
Building the visuals of the elementsHierarchy to help people understand the structure of the page:
Building visual hierarchies such as font hierarchies, color hierarchies, etc. can help designers and even non-designers to design beautiful pages and attract the right attention.
Improve your UX design level
There is a proverb saying: “If everything is outstanding, then nothing is outstanding.” This also applies to user experience design. Designers should not fool users with things that look good. In fact, they must be designed with the user’s inner needs in mind. In this article, we explain five psychological principles that can help you improve your design.
What psychology do you like best in your design? Which one is what you think is the most difficult to control? Please let us know in the comments section.