How to design mobile search? The answer lies in these four parts I summarized

Epik Xiaoliu : Currently, the search function is an indispensable part of every application product, and it is also a function that users often visit. A good search design can increase conversion rate and improve user experience. Let's take a look at some routines of search design.

Table of contents:

• Search portal design style
• Search method
• Search accessibility features
• How search results are displayed

1. Design style of search portal

The design of the search entrance needs to be based on the position of the search function in the product. Different application scenarios use different search entrance styles. Next, I will introduce four common search entrance styles to you.

1. Bottom tab bar entry (Tab Bar)

Using the search function as a functional module entrance in the bottom tab bar is suitable for apps that use search as an important traffic entrance. It can also be combined with other Tab Bar entrances. For example, "Buka Comics" combines search with similar discovery function entrances. However, the search entrance of the bottom tab bar itself does not have a search function, so it is usually used in combination with the search box style. (For example: App Store, Buka Comics)

As shown in the figure:

2. Search box navigation entrance

One of the common display forms is to place the search entrance in the form of an input box in the navigation bar or below the navigation bar. In some applications, the search bar will be displayed on the top even when the interface is slid up, so that users can operate it at any time (whether it is displayed on the top depends on the weight of the search function in the application).

In addition to the required input box, the search box navigation entrance also needs a search icon to give users a prompt. Currently, many applications also use the area in the search box to preset copywriting, which can be used to prompt users with keywords or as an entry point for operations. (For example: Huaban, Jike)

As shown in the figure:

3. Search icon entry

This is also a common search method. A common form is to place a magnifying glass icon on the right side of the navigation bar. Compared with the search box mentioned above, it is slightly inferior in visual guidance, but it saves space in the navigation bar. In this way, the navigation bar can provide users with more functions and is suitable for applications that do not have a high search weight.

Of course, there are also special search icons, such as Ziroom. The same search icon style becomes more prominent due to different positions and levels. (For example: Ziroom, TIM)

As shown in the figure:

4. Hidden search entry

In order to allow users to make more use of the quick entry provided by the desktop, the search function is hidden in the initial interface and will only appear when the interface is slid. For example: after unlocking an iPhone, there are entrances to various applications. When you slide to the right, the hidden search entrance will appear.

As shown in the figure:

2. Search Method

Search methods refer to the methods we usually use to search for what we are looking for. Here are three of the search methods we commonly use.

1. Enter text to search

The main and commonly used search method is to enter the text you want to search in the input box for precise search. At the same time, when you click the input box, the input keyboard is activated.

As shown in the figure:

2. Voice Search

Voice search not only improves the convenience of search, but also solves the problem of the elderly being troubled by keyboard input and people who don’t know pinyin. In addition, the voice function has been better used in music apps. Whether in street malls, bars, etc., when we hear the songs we love, we can use the voice function to identify the songs and find the names of our favorite songs at any time. And when driving, we can use the voice search function to query the route. (For example: QQ Music, Amap)

As shown in the figure:

3. Image Search

With the help of image recognition technology, image search has also been widely used. For example, we can search for information about an image or similar images by taking a photo of it. In e-commerce applications, for products that cannot be accurately described, we can use image search to find the item. For example, in Mogujie, you can find the desired item by taking a photo of a real object. (For example: Mogujie, Baidu)

As shown in the figure:

3. Search Accessibility

Based on different user search scenarios, different search assistance needs to be provided. A good search assistance will make users fall in love with your application. Here are five commonly used search assistance functions.

1. Popular searches

Currently, the search volume is relatively large or the operations are what we want us to search for, while giving more choices to those users without a purpose.

As shown in the figure:

2. Search History

Users can see the records of each search, which is convenient for users to check again.

As shown in the figure:

3. You may also like

Provide users with relevant content based on the collected user records, reduce the user's thinking time, and also give you a caring feeling. (For example: Tmall, Toutiao)

As shown in the figure:

4. Incremental search

By clicking on the auxiliary fields provided by the system, the search scope can be gradually narrowed down. It also provides good hints for users who have ambiguous search results, so that they can find the search target more quickly. (For example: Taobao)

As shown in the figure:

5. Category Search

When there are many similar search contents involved in the application, you can add a category search function. Select the category first and then search, which can help you search for relevant content faster and more accurately. (For example: 36Kr, Douban)

As shown in the figure:

4. Search results display format

Judging from the search results, there are still many display forms, such as text, pictures, categories, videos, etc. After understanding the different styles, we can choose the appropriate display form of the search structure according to different application types.

1. Text

Mainly display search results with text descriptions, mostly used in music applications, because I search for the name of the song itself, and pictures are not very meaningful to us. (such as 36Kr, QQ Music)

As shown in the figure:

2. Pictures

It mainly displays pictures. Users will click to view pictures they are interested in, so it is often used in shopping, information, movies, etc. (such as Daily Fresh and Xiaohongshu)

As shown in the figure:

3. Module Class

It is mainly used for applications with multiple categories. For example, when we search on Get, we enter a "Brief History of Humankind" and find that there are two categories, one is e-books and the other is audio. Therefore, for applications with multiple categories, we should expand the search scope and display them by category, so that users can find the information they want more accurately through classification. (such as Get, Maoyan)

As shown in the figure:

4. Video

The following is a bit special, usually only appearing in video applications, because video users usually have a clear search purpose, and the search results are not diverse, so putting more operation buttons in this interface makes it easier for users to choose to watch. (such as Tudou, Youku video)

As shown in the figure:

Conclusion

From the above analysis of the search function, we can know that the style of a search function, no matter at which stage, must be analyzed in multiple dimensions such as the applicable population, type, weight, etc. of the application itself, in order to design a more reasonable search. Therefore, there is no good or bad search style itself. As long as the most appropriate form is selected in different scenarios, the search experience will be improved, allowing users to search faster and more accurately.