The c-terminal
Customer (generally refers to users). Most of the software used on our mobile phones belongs to the C-terminal, which is the most extensive interface for users to contact.
The design of C-terminal focuses on simple use, simple process, and more on personal user experience. For example: Qianjiex.com, wechat, netease News, netease Cloud Music, Youdao Translator, netease Kaola and so on.
Side B
A product of a Business, usually a systematic software, tool or platform used by an enterprise or a Business for work or Business purposes. For example: enterprise internal ERP, OA system, etc.
The same
1. It’s all for human use
Whether you are an individual user or a one-page user, from the take-out, taxi-hailing, social networking software we use every day to the complex logic of the background permission system, it is essentially used by people and operated by people. It is just the type of product
2. Balance user experience and business
Since these are products for people to use, then we have to balance the user experience and also no need. Both side B and C, who are not willing to use a bad and miss the efficiency of the product, of course, there will be bad user experience, and users have to use the product, may have a monopoly, or are forced to use in some scenarios, the user itself is no other choice, generally the B side is in the majority; But that’s not to say that user experience isn’t important, it’s just that it’s a little harder for a complex, work-for-work B-side product
3. Stick to the core idea of product design
For every interaction designer and product manager, the phrase “how to solve what problems (5W1H) in what situations for what users (5W1H)” is all too familiar and often discussed or talked about. But in the face of work swarms, unexpected things, but often easy to ignore. It’s like when a person is so hungry, they just eat to fill their stomach and forget what they like to eat.
Given what we know in common, how do we optimize the user experience on the B-side?
The form optimization
In b-end products, business operations of enterprises often need to input a lot of information. How accurate and efficient input is our design of the heavy
1. The layout
When determining qianjia ·MIS specification, we tried many layouts, and finally we determined through eye movement track;
Top alignment: best for quick browsing.
3, left alignment: the longest operation time, suitable for the layout of complex forms.
An eye track is the path that the user’s eyes take as they enter a page. The length of eye movement trajectory means the speed of reading. Theoretically, the shorter the distance is, the better. However, when you choose the top alignment, you will find it is a waste of space, especially in the b-end design.
Because the background configuration and operation of the company need to be careful, we chose the way of left alignment when formulating specifications.
2. Prioritize
Order is the logical order of the fields in a form.
General logic is formed in daily life. Do not challenge it at will.
It is also necessary to classify the form information. If the form is too long, users will lose patience. Classifying the form information properly or step by step will reduce the anxiety of users
3. Automatic matching
When users at the B end enter forms, they may enter some complicated and difficult to remember information or too many options. For example: select bank card number, post, rank and so on;
A good point to improve user experience is that associative matching can be carried out when input, and relevant options can be given as far as possible for users to choose directly. It is common in many search engine websites, such as Baidu and Google
4. Do not input as much as possible
When the input content is only a fixed number of items, the selection can reduce the probability of error, but also can improve the speed; When there are few options and enough space, try to select radio instead of drop-down to reduce user operations.
5. Mark mandatory and non-mandatory fields
For b-end products, there is inevitably a large amount of form content. For the business itself, some form fields do not need to be filled in, so we need to mark whether they are required to be filled in or not. For example, when we register an account, your mobile phone number and nickname are mandatory, but your email address is not necessary. At this time, there needs to be a mark.
It is usually marked with a red asterisk
The above is the optimization method for the form in small details. No matter on the Web or mobile terminal, to better user experience is to reduce user operations and display the form on the interface as much as possible
Table optimization
1. Use lines or color blocks
You can use a stroke or a background fill to make your vision stand out. Generally adopt the way of color block division to emphasize the distinction and enhance the coherence of horizontal information;
2. Optimize data alignment
Normative alignment of data in the table is helpful for user visual unity; Find what you need faster
For general text information usually use left alignment, because the habit of human moon is from left to right, in line with normal logic; However, the data information is generally right-aligned, which more intuitively represents the size comparison of numbers;
3. Table operation
The operations for the table are classified into batch operations and single line operations. Batch operations are placed outside the table, and non-batch and zero operations are placed in the table. When there are too many buttons in the table, it can be folded and expanded. Of course, in b-end products, permissions are also very important. We can configure the display and hiding of buttons through permissions
Interface optimization
Understand the background of requirements and simplify operations
Product managers are not all-powerful. When they document and prototype, they think more about business logic and less about interactions, such as dense forms and unreasonable information grouping……
By understanding page logic you will know why each element is there and why it is there, and how they relate to each other. It’s much more natural to do interaction design with an understanding of the business logic, not just to paint a prototype
Add layers to the screen
In cases where adding graphic elements is not appropriate, consider adding layers of text and grouping information with cards; In a way, this is a bit of an abstract graphical concept (big font size, cards are a bit graphical);
According to the content of the priority of the reasonable division of text size, color level can be easy to understand the content level, but also play a role of grouping, at the same time the page will be more beautiful; But the level of text size and color are not easy to be too much, and to be unified, such as clickable, gray color global unity;
Determine the presentation format according to the scene
General C-end design is illustrated and colorful, it is easy to do the color, but also easy to find the same type of products for reference; But boring B-side pages will feel at a loss to start, especially after the design specifications, received the demand will not consider the form of presentation, the first reaction is the table, list; We should think about his display as much as possible, start from the structural layer, analyze according to 5W1H, and determine the display form;
conclusion
There may be some limitations in the aesthetically optimized part of the B-side interface, but we can do a good job in the interaction aspect. After all, efficiency and function are relatively important for the B-side interface.
In fact, interface design and interaction design are similar to cooking. It is impossible for us to make every dish look, smell and taste good, and different dishes with different tastes and goals are also different. B-side pages are like fitness meals, function first, taste second; We can’t put sauces and sauces in there for the sake of taste, it defeats the purpose; But we can make different combinations in the available ingredients to achieve rich flavor, layers and colors;
