Editor's introduction: The existence of the consistency principle is conducive to the harmony and consistency of the internal and external products. However, when designing products, the business team needs to view the consistency principle dialectically and understand the consistency principle from the aspects of positioning and user perception. Adopted for detailed consideration. The author of this article expressed his opinions based on B-end product design. Let’s take a look.
"Consistency" is one of Nielsen's top ten usability principles. It is emphasized that product design should follow the conventions of the platform, that is, be consistent in terminology, functions, operations, etc. The main goal is to ensure that the product maintains internal and external consistency, reduces users' learning costs, and thereby improves user experience.
The purpose of today's discussion is not to deny consistency, but to look at consistency dialectically.
1. The value of consistency
During the work process, when product or development asks about some design details, designers can easily answer "Just keep it consistent with XX functions." This should be more common in work and easier to understand. Using the previous design form saves time and worry, so why not?
In addition, the design side actively establishes product design specifications, largely to control the design and ensure the consistency of output, so the value of consistency is unquestionable.
Of course, in addition to improving product experience, "consistency" is also helpful for product design and development.
1. Reduce design costs and improve development efficiency
Whether it is design or development, reusing existing component resources and maintaining interface consistency can effectively reduce design investment and avoid unnecessary design disagreements.
In the development stage, it can avoid reinventing the wheel, improve development efficiency, ensure implementation effects, and reduce the workload of design review and testing before going online.
2. Form a consistent design style
According to the atomic design theory, through the consistency of atomic components, a unified interface framework and layout can be constructed to form a unified style and user interaction cognition, thereby better ensuring the quality of user experience.
2. Dimensions of consistency thinking
However, "consistency" is not a mandatory standard, but should be applied flexibly with the goal of improving user experience. During actual implementation, the design plan must be determined based on product positioning, user scenarios, and business functions. It cannot be consistent for the sake of consistency.
When we encounter consistency problems, we still need to think deeply from the following three aspects to make accurate and reasonable design decisions.
1. In line with product positioning
Traditional B-side products are localized and privately deployed, and their functions are only for internal users of the enterprise and actual business scenarios. The business attributes are stronger, so the structural form of the page is relatively more unified.
However, with the rise of SaaS products, B-side products have richer functions and more diverse scenarios and services. For example,
is a tool product for individual users and team collaboration. Product positioning must first satisfy the needs of individual users and obtain sufficient user traffic. Therefore, most of them are open for registration and provide free basic services. On this basis, commercial realization can be obtained through differentiated value-added services, such as member privilege services, team services, etc. Therefore, the page structure of
must not only meet the needs of business functions, but also consider the display of operational promotion information. Simply pursuing consistency cannot satisfy product positioning.
, such as and Tencent Document , first meet users' daily online document editing and collaboration needs, using the management-side layout.
The "template library" is a value-added service and adopts a card-style design. The same is true for
in Yuque. The personal "workbench" interface adopts a 3-column layout structure and automatically scales and adapts according to the screen width. The "Square" channel adopts a center-to-width design, while the "Space" channel becomes a traffic entrance. After clicking, a new page is opened through a browser tab, and the interaction logic is also different.
So when we are doing product design, we must first start from the product function positioning and business model, combined with user needs, and cannot be consistent for the sake of consistency.
2. In line with user perceptions
When we are designing products or formulating design specifications, we must not only consider the consistency of our own products, but also maintain a certain consistency with products in the industry.
First look at the two pictures below. Both are invitation interfaces for PC video conferences.
I don’t know how you feel. When I first received the meeting invitation pictured on the left on my PC, I subconsciously wanted to click the red “Decline” button and needed to think for a moment before making a decision. Perhaps the designer would say that the design has followed industry standards and used red and green to distinguish the functional attributes of buttons.
However, whether it is a PC or mobile product, the buttons in the pop-up window generally adopt the form of "right primary + left secondary", which has become the understanding of most users. The video conferencing product on the left uses the opposite design, which goes against the user’s perception. Although color can reduce users’ misjudgments to a certain extent, it is difficult to change users’ cognitive habits.
In addition, the button on the PC is designed to imitate the "answer call" design. I have not had much contact with it, and I have not yet established the awareness of green for answering and red for rejecting, so there are certain difficulties.
When designing for an interface, consistency must not only comply with the internal design specifications of the product, but also consider the impact of industry products on user cognition to avoid conflicts between the design and users' general cognition.
3. In line with user operating habits
is still an example of buttons.
The positions and combinations of buttons in our common form pages and buttons in pop-up windows are not consistent.
Pop-up windows usually use the form of "right primary + left secondary", and most form pages use the "left primary + right secondary" format . Why does this difference occur? The following is my personal understanding.
1) Positional difference analysis
According to the "cognitive load visual load action load" theory, on the page we first need to allow the user to find the button and then complete the operation. Compared with the pop-up window,
has a larger page space and a weaker sense of boundary. The user's visual focus is more likely to stay in the left form content area. So the button should be right next to the form, making it easier for users to find the button quickly. If the button is placed in the lower right corner of the page, or at the bottom of the page, the user's visual load will be higher. As shown in the figure below:
In the scenario where the form content is closely followed, the design gives priority to the principle of the user's "F-type" browsing habits, and places the main button on the left to put more emphasis on the main button's information.
The space in the pop-up window is smaller and the content is relatively compact, which is more suitable for the "Gutenberg principle". The user's visual end point will stay in the lower right corner. The user's mouse often stays on the right side of the screen, so the main button is placed on the right side to make it easier for users to operate.
2) Analysis of differences in alignment
Expand the thinking on alignment. Why are the buttons in the form not aligned with the labels, but aligned with the input boxes?
① Metaphorical cognition
button, as an operation item of the form, can be considered to be consistent with the nature of the input box and needs to interact with the user. The label on the left side of the form is the information area, which mainly carries user information browsing. Therefore, the button belongs to the interactive area and needs to be aligned with the input box.
② Visual requirements
tags have three layout forms, top-aligned, left-aligned, and right-aligned. In the
top alignment scenario, labels, content areas and buttons are aligned without any problems. In the
left-aligned scenario, the label needs to reserve a certain amount of information space to meet the scenario of long text labels. If the button is aligned to the left, it will cause obvious content blank on the right side, making the visual center of gravity of the entire content area unstable. In the
right-aligned scenario, in addition to the unstable visual center of gravity, it will also cause overall visual confusion. As shown in the figure below:
Therefore, the button is aligned with the input box, making the whole visually more coordinated.
3. Summary
A brief summary:
- "Consistency" is very important as a basic principle of design, and is very helpful to design, development and product experience improvement;
- The consistency principle is not a mandatory principle and needs to be Apply flexibly according to product positioning; the value of
- consistency lies in improving user experience and needs to conform to user cognition and habits.
#Columnist#
Mr. Zimu. Public account: Zimu UXD (HelloDesign), everyone is a product manager columnist. Product experience designer. 8 years of experience in the Internet industry, good at experience design thinking, design methodology, and interaction design research.
This article was originally published on Everyone is a Product Manager. Reprinting without permission is prohibited. The
title picture comes from Unsplash and is based on the CC0 license.
