In the usual design process, you may have such doubts, why in most apps, when a single button and multiple buttons exist at the same time, the most important button is usually placed on the right side of the page? What's the problem if the most important button is on the left? What is the reason for the button on the right? What theoretical basis does it have? With these questions, let’s start with what we are going to introduce today: Gutenberg Principles of Interactive Psychology
Relevant video tutorial materials are organized at the end of the article.
The origin of the Gutenberg principle
The Gutenberg principle was put forward by John Gutenberg, the inventor of Western movable type printing in the 14th century. As early as the 1950s, when he was designing newspapers, he put forward a principle that people should read Following a certain habit is like reading a book, from left to right, top to bottom. What information does this contain? After research, I finally came to a conclusion that is well-known to posterity: Gutenberg Principle, and attached a picture called "Gutenberg Diagram". The Gutenberg diagram divides the content presented on the screen into four quadrants:
1. The first visual area (POA): the upper left, where the user first noticed
2. Strong rest area (SFA): upper right, less noticed
3. Weak rest area (WFA): bottom left, least noticed
4. Terminal visual area (TA): bottom right, the end of visual flow
Gutenberg diagram
It can be seen from the figure that the user's line of sight will naturally start from the first visual area and gradually move to the terminal rest area. Throughout the reading process, the line of sight will start to scan from left to right along a direction axis. Users will be more likely to pay attention to the beginning and end areas of the page, while the middle paragraphs are rarely paid attention to. Gutenberg revealed a practical law of visual trajectory: reading gravity is from top to bottom, from left to right.
Following the Gutenberg principle, placing key information in the upper left, middle and lower right corners can better reflect the importance of the elements. For example: the page pop-ups, various supporting documents and contract documents that we usually see.
Gutenberg diagram guides the trajectory of the eye by reconciling the weight of the design elements with the element layout and composition. Allow users to quickly obtain valuable information, and the user's familiarity with the information is also one of the factors that affect the trajectory of the eye.
With the rise of the Internet, Gutenberg principles have gradually been applied to APP design and web design. Next, let's take a look at his practical application in the interface.
Application in design
According to the Gutenberg principle, when a user browses an unfamiliar interface, browsing is the user's first behavior. Their visual focus will go from the upper left corner to the lower right corner. And stay at the end of the action point, which is the terminal rest area mentioned earlier. The next step is how to place the buttons, which is also a crucial step. If the user needs to operate after reading, the best position for the button should be at the bottom of the page. This can ensure that the user has read the content.
1. Analysis of bottom buttons
1.1 Single button at the bottom
This form is most common in pages that guide users to operate. In order to ensure that users can read the content, the buttons are placed at the bottom of the page and the content at the top. This placement conforms to the user's top-to-bottom reading habits. It has reached the expected goal of the product.
1.2 Vertical double buttons at the bottom
We mentioned the idea of placing a single button above, let’s take a look at the idea of placing a vertical double button. If there are two buttons with different priorities on an interface at the same time, and the product wants users to have enough attention to each button, then vertical placement is the best choice. Although the vertical double buttons are distinguished in style, Users will also stay for a while to compare and think about the contents of the buttons.
Then, according to Gutenberg's principle, important buttons should be placed at the bottom of the page. In principle, it should look like this:
Carefully observe the above picture, have you found that the light-colored buttons are easy to be ignored, which violates the original intention of the product to ensure that each button has enough attention, so we must violate the Gutenberg principle to meet business needs, as The WeChat authorization page we see is the same,
In order to ensure that the two independent buttons of "Agree" and "Reject" can be valued enough by users, and any one of the buttons will not be easily ignored, the color of the "Agree" button is emphasized and placed on "Reject". Above the button, the original vertical downward movement of the eyes will change back.
summary
Principles are the basis of design. They are not static. We must reasonably weigh the relationship between design principles and product goals.
2. Analysis of the top button
Due to the limited space on the top navigation bar, the buttons are relatively small and inconvenient to click. Therefore, this type of top button is suitable for editing content editing pages to avoid accidental touches and allow users to focus on the content itself. As for the key button at the top, it can also shorten the movement path of the user's eyes, making it easier for the user to notice the state of change.
summary
The top button focuses more on the editable content area, not a button. The bottom button focuses more on the button itself. Not content.
3. Horizontal button analysis
In addition to the top and bottom buttons mentioned above, there are also horizontally placed buttons, such as the "Add to Cart" and "Buy Now" buttons on the Taobao detail page, Jingdong detail page, and NetEase's carefully selected detail page, and the " "Buy now" buttons are all placed in the lower right corner, combined with the Gutenberg principle of visual endpoint description, the lower right corner is the visual terminal area, that is, the final position of the vision, so they will all be the "Buy Now" button that is closely related to the conversion rate Placed in the lower right corner of the interface, making it easier for users to follow.
Another example is the more common "Cancel" and "Confirm" pop-up window styles, which usually appear when the user needs to confirm a certain operation behavior, such as submitting a form, authorizing an agreement, obtaining user information, etc., in order to prevent users from misoperation , This is also a small detail to enhance the product experience.
In the pop-up window we usually see, the recommendation button is on the right. What happens if the recommendation button is placed on the left? As shown below:
It is not difficult to see that after the recommendation button is placed on the right side, the vision reflows on the horizontal axis.
The purpose of the pop-up window is to allow the user to click the "Confirm" button. If "Confirm" is placed on the left, according to Gutenberg's principle, the user's sight will involuntarily move to the right, which is the position of the "Cancel" button. To return to the "confirm" button position on the left, you need to move the line of sight, and the trajectory of the eye will reciprocate back and forth on the horizontal axis, which virtually increases the user's selection time. If you put "Confirm" on the right and "Cancel" on the left, you can improve the operating efficiency for users.
Application cases in actual products:
summary
When the product wants the user to perform a certain operation, the main button is placed on the right
to sum up
1. Gutenberg diagram first visual area, strong rest area, weak rest area, terminal visual area
2. Principles are the basis of design, not static, and the relationship between design principles and product goals must be reasonably weighed
3. The top button pays more attention to the editable content area, not a button. The bottom button focuses more on the button itself. Not content
4. When the product wants the user to perform a certain operation, the main button is placed on the right
A must-read article for a new starting point for designer design cognition https://pan.baidu.com/s/1ntWb8VkIj8yKs5rLWD_aNQ mention
20 days to learn UI design (PS+AI) introductory tutorial (end) https://pan.baidu.com/s/1wV35EyapKdgweO10P5xx0A Extraction code: 5i
1 hour to learn LOGO design tutorial (essential version) https://pan.baidu.com/s/1Z454utAyehurWlJBm-PXVw Extraction code: fc4
The sorted out is basically complete, you are welcome to come for free , extract the code and leave it in the article, friends who are learning UI design, can leave a message or send a private message to me.