Tencent Designer: Help you fully grasp the key points of search design from 4 aspects

In a content-based APP, the search function can be said to be a standard feature. It is a huge traffic entrance and also carries the ability to operate the product. I happened to be optimizing the JOOX search page recently, so I took the opportunity to sort out a few key points about search design.

According to the actual usage behavior of users, we can divide the search operation into four parts according to the user behavior path nodes: discovery - entry - use - obtain.

• Discover search entry
• Enter the search interface
• Use the search function
• Get search results

Discover the entrance

There are generally several types of search box entrances: primary tab, search box, search icon, hidden search box. Regardless of the style, the most basic principles to follow are two points: quick discovery and easy identification.

1. Quick Discovery

Users' search needs will appear at two points in time. One is when the search purpose is clear and they need to use it when opening the App. The other point in time is when the search needs arise during the use of the App. It is difficult for us to determine what operations the user is performing for this demand, so we need to design it according to the page and product type.

What is certain is that both needs always require our products to allow users to quickly find and use the search function, so the location of the search function is very important. Currently, the search function of most apps is placed at the top of the page, in the form of a search box or a "magnifying glass". Users have developed a habit of looking for the top of the page first when they need to use the search function.

Most content-based products will have a permanent search box to facilitate users to find content at any time while browsing. Some products are designed to be integrated into an icon and fixed in a certain position to save space for the display of other content, such as the Dedao APP.

The search box of Baidu Cloud Disk will slide with the page when the page is swiped. From the author's usage habits, the search function is a very important function for Cloud Disk, so the experience here needs to be improved.

2. Easy to identify

Placing the search function in the user's subconscious mind also requires reducing the user's recognition cost, so that users can see at a glance that it is a search function without having to make a judgment. Currently, the most common styles are the search box or the "magnifying glass" icon style, and users can recognize that the function is a search function without having to make a judgment.

The search box styles generally include rectangular and rounded corners, and there are many combinations with the internal default text.

There are also some more special search styles. For example, the search page for premium courses in NetEase Youdao Translation has made a new attempt (actually entering the search page here), but the user acceptance cost is relatively high, so it is not recommended to try it easily.

The icon styles produced by designers of each company are different and they try to be as distinctive as possible, but from a product perspective, the fewer details the "magnifying glass" icon has, the more recognizable it is. Don't over-design it.

Enter search

Entering the search function mainly refers to the interaction and page after the user discovers and clicks the search function, although there are differences among various types of apps.

But it can be roughly divided into three types:

• Search on the current page;
• Enter a new page and pull up the keyboard;
• First go to a recommendation page, then go to the search page and pull up the keyboard.

1. Search the current page

Searching on the current page may be because the information is difficult to categorize or is relatively private, and data processing cannot be performed. It also shows that the search function has a weak demand for the current page and is not used frequently.

For example, the iPhone text message search function, although a new top bar pops up, is no different from searching on the current page, it is just designed visually.

2. Enter a new page and pull up the keyboard

Entering a new page is often because the search function is very important and there is too much information to display, so a separate page is needed to carry it. This is currently the most common way.

The new page can display hot search terms or related information that the operation needs to display, and can also display user search history, etc., to further reduce the cost of users using the search function.

3. Go to the recommendation page, then go to the search page and pull up the keyboard

The above two entry situations are accompanied by the keyboard pulling up action. Therefore, in order to better display the recommended content, some apps will choose to enter a recommendation flow page first, expose the preset content to the user, and pull up the keyboard to input when the user clicks the search box again.

For example, the search design of Douyin is like this, which is equivalent to expanding a new page to carry rich recommended content. But the disadvantage is that the user search path becomes longer, and there is a certain risk of loss.

In order to reduce the feeling of jumping out of a new page, we can optimize the transition effect. When clicking to enter the search page, the user feels that they are still on the current page.

In many apps, the search function is very obvious in the initial state of the page and occupies a certain proportion of the position, but when the user performs other operations, the view of the search function will change accordingly.

The search function of the MOO music discovery page is initially at the top, but when the user swipes up the page, the top search box is hidden and replaced by categories, and the interactive effect of the search box is restored when the user swipes down the page.

Because this page is mainly based on recommendations, when the user swipes up the page, the need for the search function is weakened, and hiding can increase the content displayed on the page. In order to allow users to quickly enter the search function, the search function will be restored as long as the page is slid down.

Use Search

From the moment you enter the search page, you need to view the page content, enter the search term, and click search. This is the complete process for users to use the search function.

1. Recommended content

The time from entering the search page to entering text in the input box is the time to recommend ***, which will provide a lot of content for those users who are not very targeted.

As mentioned above, there are three ways to enter the search page:

• Search on the current page;
• Enter a new page and pull up the keyboard;
• First go to a recommendation page, then go to the search page and pull up the keyboard.

The first type has no recommended content. The latter two types of pages can be divided into three parts from top to bottom: input box, hot search terms, and search history.

Input box

The text in the input box is generally "Please enter the search content". After entering the search page, the cursor is at the starting position of the search box and the keyboard is called. After entering the content, the search box will automatically update to the input content.

Another way is to replace "Please enter the search content" with preset keywords and update them regularly. Clicking search will directly search and display the search results. This process also serves as a guide, similar to hot search terms (such as Taobao).

Going a step further on this basis is to directly search and display the search results of the keywords in the input box after entering the search page. This method can display targeted operational content to users more quickly. The disadvantage is that entering the search page is the result display page, and there is no space to display hot search terms, search history and other content.

Hot search terms

Hot search words are keywords with the highest number of searches according to the algorithm. For users who enter the search page without a strong purpose, hot search words can reduce the cost of thinking and increase the number of product/content views. However, we should pay attention to the update algorithm of hot search words. Hot search words themselves have the function of attracting traffic. If we decide whether to be on the hot search based on the number of searches alone, the hot search word list will be very stable.

Historical Search

Historical search allows users to quickly find previously searched content without having to re-enter it, but it is important to protect user privacy and support the deletion of historical search records. In addition, there are usually two ways to host the search history page. For the third way to enter the search, we have two pages that can be used to host the search history.

Take TikTok as an example: the search history post-position appears when you click the search box again from the search recommendation page, that is, it appears with the keyboard. This is more in line with normal logic, because the purpose of users pulling up the keyboard is to input operations. The appearance of search history at this time can not only reduce the cost of repeated searches, but also give users a sense of memory continuity. After all, it reminds me what I searched for with this app last time and what I felt at that time.

However, there is another place to put it, that is, the recommended page that is pulled up for the first time. The specific choice depends on the specific content. JOOX chooses to put it on this page. The reason and benefit of doing so is that most of the users who enter the recommended page with real user data are clicking on the history record. Putting it on the first page will undoubtedly shorten the path of users' repeated searches and improve efficiency.

2. Search method

There are two ways to handle keyword matching when entering search content: one is matching during the input process; the other is matching after the input is completed.

Input Process Matching

When inputting, each character is matched and the page information is updated. The updated information can be information recommended for the input content or search results. This method can provide instant feedback on search results, is highly guiding and efficient, but the matching of the input process requires high computing power. You can consider whether this function is needed based on your product and actual situation. Otherwise, you need to wait for loading, which affects the experience.

Enter to complete the match

Only when the input is completed and the "Search" button is clicked, will the search and matching start and the search results be displayed directly. This method saves the process of real-time analysis and guidance during input and is suitable for situations where the search function is not required. Similar products such as the Product Manager App will not give feedback after entering keywords, and relevant content will only be displayed after performing a search.

Many products use a combination method to instantly match keywords and display them. Click the keyword or "Search" button to display the search content. Similar products can be viewed on e-commerce apps such as JD.com and Tmall. In addition to making associations with the input content, they will also display dimensions related to the keywords, automatically complete the keywords, and increase user choices.

3. Search/Cancel Button

The general way to cancel a search is to click the "Cancel" button or the "Back" button. If characters have already been entered in the input box and you need to re-enter a new search term, you often need to click the delete button on the keyboard to delete it. When the input content is long, the experience of this process is very poor, so many products now provide a delete function at the end of the input box to delete the entered characters with one click. This function can provide a good experience when a second search is required on the search page or when an input error occurs.

If you carefully study different apps, you will find that the search/cancel buttons can be roughly divided into two types: one is to keep the search button; the other is to cancel the search button on the page and use the search button on the keyboard instead.

The page retains the search button

The search button is usually placed on the right side of the search box, so the return icon must be kept on the left side, so that the jump path of the App can be implemented normally. Although this method is more regular and reduces the length of characters that can be displayed in the input box, the user recognition cost will be greatly reduced, and the return and search buttons are very clear.

The page does not retain the search button

There is no search button on the page, and the return button on the left is also cancelled. Clicking the "Cancel" button will return to the previous level page.

This method generally uses the real-time matching (process matching) search method. When searching is needed, the search operation is performed through the search button on the keyboard. The advantage is that the search button is in the lower right corner, which conforms to the operation habits of the hand and is in the comfortable operation area, so the search operation can be performed more quickly. However, the cancel button cannot clearly return the logic. When the user needs to exit the search and return to the previous level, he needs to try to click the "Cancel" button.

If you use the "Search" button on the page, you must retain the return function. Using the "Cancel" button will cancel the "Back" button, otherwise the function is redundant.

Get the result

After the search is completed, the result page will display the matching content according to the algorithm, and there are many ways to display the results. For complex content, it is necessary to classify it well. Generally speaking, each product has its own classification method, but it can be summarized into two categories: classification first and then search, and search first and then classification.

1. Categorize first, then search

An obvious feature of classifying before searching is that the search purpose is clear and the user already knows what kind of content they want to find.

For example, when users use the search function of Anjuke, they will know very clearly the information dimensions they want to search for, so classifying first and then searching can improve the search accuracy and reduce the cost of post-search screening for users.

2. Search first, then sort

Searching first and then classifying can reduce the cost of using the search function, but it will increase the difficulty of filtering the results. The general operation is that the system performs algorithm matching based on the search terms, displays all the results, and then provides classification and filtering functions.

This method will provide a better experience for users who search aimlessly, and is generally seen in e-commerce, knowledge and other information and clearly classified products.

For example: Zhihu's search logic is to first match the results according to the search terms, display all information, and provide category search switching such as users, topics, private lessons, and Live.

Other thoughts on search function

This article mainly discusses text-based search. In addition, there are other search methods, such as voice search, image search, code scanning search, photo search, photo translation search, etc. In recent years, with the continuous maturity of voice technology, voice search functions have been increasingly used in music apps, searching for music-related content by recognizing music. Some music apps have also made some optimizations on voice search for some occasions, such as identifying songs by listening to them and humming them, which improves the efficiency of users' content search.

Today, we see that search efficiency and experience design are constantly changing. With the application of AI technology, the accuracy and relevance of search answers will be greatly improved. Search interactivity and personalization will also be gradually improved.