Summary of search function design, designers please take a look

In the previous articles, I mentioned that if designers want to improve themselves, they should understand products. But I rarely mentioned how designers can cross the "chasm" and learn to design from the perspective of products. It's not that I am arrogant and deliberately keep you in suspense, but I don't know much, so I dare not say anything. Recently, I received a request to add a search function to a back-end management system. In the process, I found that the search function can play a good guiding role in designers learning products.

What does the search function do?

The emergence of the search function can be traced back to the fact that a product now contains too much content, especially Alibaba's products.

The more content there is, the greater the learning cost for users. When users use your product, they hope it is as simple as possible and as easy to use as possible. The user's goal is to find the desired function or content quickly and accurately. So from this perspective, the emergence of search function is imperative.

So why do I suggest that designers create a search function for their products? Because creating a search function can help you understand what is in the product you are currently responsible for.

In fact, many designers have been working for a long time, but they may not fully understand the content and functions of their products. It is ridiculous to say that you need to understand the product, but you don’t even know what is in the product.

For example, if you search for "Michael Jackson" in WeChat, the search results will show group chats/friends with the name Michael Jackson, public accounts you follow, chat records, and favorite records. When you click on more, you will also see news about Michael Jackson, emoticons, music, and Moments. If you have just started using WeChat, you will have a general understanding of the services WeChat can provide through this search result. So establishing a search function can help you get a good understanding of a product.

The three stages of search functionality

Now that we know the necessity of the search function, let’s actually start the design phase of the search function.

In fact, when it comes to search function design, many people will think of search box design. The search box may be the most important form of search function. However, there is much more to the search function than a simple search box. A complete search function/process should consist of the following three aspects/stages:

• (Open) Search box
• Information entry
• Search results display

Search Box

I think there are three points we need to pay attention to when designing the search box.

***, different products have different ways of displaying the search box. Some products have the search box directly placed on the top of the interface, allowing users to directly enter information.

However, the search box for some products requires you to click the magnifying glass button to pop up.

The advantage of the former is that users can see the search box at any time, which is convenient to use. The advantage of the latter is that it takes up less space and is suitable for realizing the search function requirements during the product iteration period.

For example, at work, we often encounter leaders who have sudden ideas and say one day, "Why don't we add a search function to this interface?" However, this interface may not have room for a search box, so we can only put a search box entrance - a magnifying glass icon.

Second, the content that users need to find may belong to different categories. Taking UI China as an example, users may need to find a designer, an article or an illustration. In this case, we need to provide users with a drop-down list on the left side of the search box for them to select the desired content category.

Of course, it doesn’t necessarily have to be placed on the left side of the search box. The classification style of WeChat is also very good.

***One thing we need to pay attention to is that the design style of the search box should be consistent with other input boxes in the product. You can't have rounded corners in one input box and right angles in another. We should not make such a low-level mistake.

Information entry

The most common way of information entry is text entry, but now we are also beginning to see new ways of information entry: voice entry and picture entry.

The products we are most familiar with for voice input are some music player software and foreign language dictionaries, such as QQ Music or NetEase Cloud Music. If a user wants to listen to a song, he can directly enter the song name, but if he does not know the song name, he can complete the song information input through voice.

A typical example of using pictures to complete information entry is Taobao's Pailitao, where users can take pictures of their favorite products and the system will match you with similar products, which is very convenient. From this point of view, designers must always grasp the latest technological information, otherwise they will easily be eliminated.

We can see that the search function of many products provides users with two services: search history and popular searches. Some search history and popular searches are implemented in the style of drop-down lists. For example, Zhihu

However, Taobao and JD.com chose another layout method. This layout method can display more information. This caters to one of the goals of e-commerce products, but it cannot delete a single record, which in my opinion does not have a big impact.

In addition, in order to make it more convenient for users to operate, we can also give users automatic prompts during the user input stage. This can save users' operation time and avoid typos.

Search Results

The most difficult part of search results is how to display different types and levels of content. For example, if you search for bills in Alipay, the results include bill-related apps, lifestyle accounts, and information. To distinguish them, we will add an icon to display higher-level apps and lifestyle accounts.

Of course, users can also select the appropriate content category by switching tabs.

Sometimes there are too many search results and users don’t have time to read them one by one. We can introduce filters to help users find the desired content in a short time without spending time flipping pages or swiping to search.

What we just talked about is what to do when there are too many search results. We should also consider how to design a suitable empty page for users when there are zero search results.

Now some search results are displayed by loading a new page. If we don’t explain it clearly to users, users will mistakenly think that the page failed to load due to network problems instead of not being able to search for the product you want. Therefore, the empty page design must explain the reason to users.

Summarize

The above is my summary of the search function. I hope it can help you.