How do experts analyze it? Take a look at these 5 detailed thoughts on B-side design

This article summarizes 5 B-side design considerations, and you can see how experts analyze problems encountered in their work.

From trash can to "multiple entrances", let's talk about B-side design thinking

Recently, during a general cleaning, I accidentally broke the trash can in the kitchen, so I wanted to buy a suitable trash can online. Looking back on my experience of purchasing the trash can, perhaps it is a good example for everyone to understand the design thinking of multiple entrances.

First of all, what kind of trash can does the kitchen need? I was confused because I didn’t quite understand it myself, so I saw many different types of trash cans on Taobao.

Summarizing them, they can basically be divided into two categories: straight-tube type and pedal type

Straight-barrel style: With an open top structure, users can throw trash directly into the bin. If that's not interesting enough, you can also use the bin as a "basket" to shoot basketballs.

The straight-cylinder open-top structure does bring a lot of convenience to our garbage disposal, but it also exposes some problems, namely mosquitoes. Because there will be a lot of kitchen waste in the kitchen trash can, it will breed a lot of mosquitoes, especially on some leftover fruit cores, which will leave a lot of mosquitoes.

Pedal type: There is a cover on the top. When you need to throw away garbage, the user needs to step on the cover and lift it up. This method can prevent mosquitoes from breeding in kitchen waste.

But the problem is that when cooking, we usually throw away garbage very frequently, and it is obviously inefficient to need to step on it every time. Is it possible to step on it and throw it away at the same time?

Faced with this problem, I found a new type of trash can:

It is designed for users with two different modes in mind, thus cleverly integrating two entrances. Through the switch on the top panel, the trash can can be set to open or closed, allowing the trash can to remain open when you want, thus meeting the need to frequently throw away trash in a short period of time. At the same time, it can also provide a pedal to completely lift the trash can lid, so that the trash can can be stepped on or thrown directly.

When we design B-side products, there will also be "multiple entrances".

For example, in the design of Funshare, there are two different entrances for creating new customers:

Entrance 1: Homepage – Customer and Opportunity Management – ​​Customer – New

This is the most common entrance for creating new customers, which is similar to the straight cylinder of a trash can. Through the creation of the form page operation, users can fill in the form and then add new customers.

Entrance 2: Homepage – New – Customer

This is a special design of Funshine Sales. It sets up a global new creation entrance in the navigation menu. Users can create new ones on any page of the system.

You can think about it with me. If we are a salesperson, we will often create new customers and follow up records in our work. Then, a global new entry can help us operate faster. This is the second new entry of Funshare Sales.

Let me give you another simple example. In Funshine Sales, there are also two different entrances for filtering in the table: general filtering and header filtering.

• General filtering: It is usually placed side by side with many operations in the table and is considered a relatively basic entry
• Header filter: After clicking, you will also enter the filter pop-up window, but the difference is that after clicking the header filter, the value of the table will be brought into the filter to achieve a two-step operation of filtering + selecting values.

Why are there two different entrances? Let's think about it. Just like the trash can I mentioned at the beginning of the article, the two different entrances are actually for my convenience in using in a certain scenario (such as the continuous throwing of garbage and opening and closing of the trash can lid; the regular new creation and quick new creation in the new creation operation of Funshine Sales). And it is precisely because users design different forms under different scenario requirements.

In B-side products, demands for different scenarios often exist, but why are they not exposed? In fact, it is because users are in a disadvantaged group in B-side products. They all obey the arrangements of their superiors, and designers do not know how to analyze and will choose the most mediocre way to deal with the demands.

Small trends in mobile design for B-end products

We have talked a lot about interactive design on the desktop. Recently, I discovered a small trend that I observed when using the App. I would like to write about it and discuss it with you~

I wonder if you have ever encountered such a situation when dealing with mobile navigation. The company's mobile design is "elegant degradation", that is, first satisfy the desktop end to get the product design, and then gradually consider how to adapt to the mobile end. This leads to unexpected problems in the mobile page. The most common problem is that the navigation menu of the bottom navigation bar is not enough.

Why is it not enough? Let me take DingTalk desktop as an example:

DingTalk's desktop version includes five important modules: My Team, Messages, Documents, Workstation, and Contacts. In the lower left corner, there are also application functions such as Calendar, To-Do, DING, Mailbox, Meeting, Live, Favorites, and More. After planning these functions on the desktop, how would you design the mobile navigation? Give us 5 seconds to think about it.

Let's first think about what "formulas" can be used for mobile navigation. Bottom navigation, top navigation, desktop navigation, and rudder navigation are the most common formula models in mobile navigation design. The maximum number of navigations it carries will not exceed five, so it is obviously not very satisfying to use.

The problems faced by DingTalk are similar to those encountered in my actual work. There may be 10+ navigations at the bottom. What should I do?

After understanding the problem, I will analyze it with you:

• First of all, when we encounter a large amount of content in design, the first thing we think of should be information layering, whether it is splitting more than 10 navigations, which is obviously what DingTalk does.
• Next, you will find that there is an unusual interaction in the latest updated version of DingTalk.

By swiping up the bottom navigation menu, it is like a bottom drawer, and the remaining modules are placed under the drawer. In this way, the complete navigation form can be displayed to users in a mobile way.

Let’s talk about the advantages of this design:

• It can indeed ensure reasonable adaptation to the mobile terminal without changing the product structure of the desktop terminal. Because it is difficult to meet the current problems under the traditional interaction framework
• The navigation experience on mobile and desktop is basically the same, satisfying users’ understanding of the entire product architecture.

Let’s talk about the disadvantages:

• The entrance is too deep: Because the interactive entrance requires swiping up, it takes some time to educate users so that they are familiar with this method.
• Redundancy: Currently, DingTalk has too much content, which makes the entire product feel bloated. After adding this interaction, the content that needs to be learned and understood is too numerous. To be honest, as a DingTalk user, if I want to write a project document for work, should I choose: go to collaboration? Go to the workbench? Go to the project? Go to the recent use? How to choose between documents, Shimo documents, and Teambition?

Although we know that DingTalk has a strong ISV ecosystem, the functions of many ISVs currently overlap with DingTalk's own product functions and there is too much intersection.

Of course, this type of interaction is not an innovative design of DingTalk itself. I first discovered it on the two products Teambition and Feishu (these two products are slightly different from DingTalk’s approach). With DingTalk’s follow-up, I believe this type of interaction will soon become a new solution for mobile terminals.

Finally, let’s talk about the details of this interaction between Lark and Teambition.

First of all, in Feishu, the configuration of the bottom navigation mainly comes from two aspects:

Feishu Management Backend: Provided to administrators, so that company managers can make a unified configuration of the default navigation

User: Users can customize the bottom navigation according to their specific needs.

Secondly, Feishu will not have the problem of DingTalk’s entrance being too deep. When users click more, the drawer will be expanded, which is easier for users to understand.

Teambition is similar, but it is not expanded. This is a small trend in mobile design. You can use it in your actual work.

Finding ways to improve form efficiency from document products

As an important scenario for B-side design, I have always wondered how to efficiently input information. Today, we will "borrow" some methods to improve form efficiency from document products~

First of all, in the input scenario, I would think of writing document software:

I am a heavy user of document software. I have used Bear, Evernote, Notion, Ulysses, Lark, Graphite, Yuque, etc. If you are also an article author, you should have tried a quick way to enter information: Markdown.

1. Markdown

Markdown is a lightweight markup language that is often used in article typesetting. This markup language allows you to immerse yourself in writing instead of repeatedly worrying about typesetting, which would interrupt your train of thought.

For example, I want to set a "first level title"

Without using Markdown, the operation path is

• Enter the text content first
• Use the mouse to select the text you want
• Click the first level heading button to complete the entry form

Using Markdown, I only need to

Enter: #+space+text content to quickly complete the above three steps

I can use Markdown to improve my efficiency in information entry, and I don't have to move the mouse, which reduces a series of problems caused by switching control devices. In my opinion, this is a way to improve text entry efficiency, but how can we implement the idea of ​​Markdown in our B-side form scenario?

I didn't have any ideas at first, but I recently found that its input is very interesting when I use TickTick. When I create a new to-do item:

After entering the "!" symbol, you can set the priority of the to-do item. Similarly, after entering the "～" symbol, you can set the affiliation of the to-do item.

Is it a little bit similar to the specific rules of Markdown?

By setting special rules like this, I can quickly prioritize my to-do list, put it in a box, etc…

Not only in TickTick, but also in Notion, WeChat, and Yuque, there are similar interactions. I call this type of interaction "specific rule entry"

"Specific rule entry": using specific entry rules to quickly enter the information that users need to use

• Advantages: Enables users to quickly enter information without using a mouse.
• Disadvantages: In situations where you really need to use this symbol in daily life, the drop-down menu will cause interference in use.

For example, in WeChat, if we need to use @ in a chat, we will not use the symbol, but will change @ to "At".

Finally, in our actual B-side project, we also made corresponding optimizations when sales filled in follow-up records:

• We can use @+space to add specific sales personnel
• Type #+space to add a tag for the follow-up record
• Enter !+space to add a contract associated with the follow-up record
• (Due to the confidentiality agreement, I will not go into details here, but I will give you some ideas)

However, this revision has indeed greatly improved the user experience in the follow-up record module. Of course, there are still some minor issues, such as when entering "!+space", many sales staff still report that this has a big impact, and hope that it can be adjusted.

I will consider migrating this shortcut to other letters later, hoping to solve this problem.

Expand the input area

In my daily writing, I will create a new mind map.

On the one hand, mind maps can help me sort out my thinking structure and organize some scattered knowledge points in my head. On the other hand, I can also use mind maps to help me quickly dispatch knowledge.

But in Feishu documents, due to the width limitation, it is not very friendly to edit the mind map, and I can't edit my mind map normally. At this time, I can double-click the mind map to enter the full-screen editing state, which brings a lot of convenience to the editing of large-capacity content.

Of course, this only applies to document scenarios. In fact, we will face the same problem in our daily form entry process.

Usually, forms are presented in the form of pop-up windows, but when too much information is entered, you need to consider whether it is possible to support expanding the pop-up window to the entire page so that the form can be entered more quickly.

For example, in Gmail, when you need to create a new email, there are two different states:

• One is always located in the lower right corner and displayed through a small window
• One is to click the full screen button to expand the entire page and allow people to enter data in full screen.

This form of interaction is also included in our own products. As a configurable form of an aPaaS, we cannot determine the amount of content provided by the user. Therefore, while we use pop-up windows, we also add large pop-up window entrances for users to cope with various flexible and changeable scenarios of users.

Of course, these are just some scenarios of the form, and you can discuss them in the comments section.

Solution to the "floating" problem of drop-down menu

Do you remember the topic I left in the article on selection and input?

Why is it that in many online products (Mingdao Cloud, Jiandao Cloud, ONES...) after calling out the drop-down menu under the window, the scrolling form does not follow the input box? As shown in the figure below, today we will talk about the reasons.

Let’s first take a look at how everyone is discussing in the comment section~

Seeing everyone's answers, some are very close, but the actual situation is still a little different. Let me lead everyone to discuss together~

First of all, at the design level, the result we want most is that in the pop-up window, the drop-down menu and the input box follow each other in real time, which is similar to the following figure:

However, at the development level, you will come to the conclusion that the cost is too high. This is because there is an attribute called Position in CSS that affects the above result. The drop-down menu also uses Position to determine the position, thereby achieving the state where the drop-down menu follows the input box.

I won’t talk about the codes here, as I believe most designers can’t understand them. I will simply explain the problem from a designer’s perspective. You can think of the pop-up window itself as a drawing board, and the input box and drop-down menu as a layer within it.

If real-time positioning is required for calculation (that is, the effect presented by AntDesign above), they need to be placed in one drawing board.

At this time, everyone should forget an important conditional factor: pop-up window

When we use pop-ups, the entire artboard will inevitably be reduced, so the layers inside will also be limited by the artboard and cannot be fully displayed. In actual development, the drop-down menu will block the display.

Of course, when we encounter this kind of problem, we need to find a solution, which is the approach of other products we talked about at the beginning:

• Treat the entire drop-down menu as a separate drawing board. Although it will not follow the selection input box in real time, from the overall perspective, this method obviously has less impact on the user experience. After weighing the pros and cons, the second option will be adopted.
• In fact, as designers, we need to do more than just improve the experience of the process on the page. We also need to pay attention to the many problems encountered when implementing our page. Problem Solver is the norm for designers.

I believe that you will encounter many conflicts with your development colleagues during the design process. Why not post them and see if everyone can help you solve them!

I am a CE youth, a 2B designer in the 2B industry~