Search" is a very necessary functional module in the product. Search is like providing a convenient green channel for users to quickly retrieve content.
The search action is done by the search phone number list box in the app. A user-friendly search box largely determines the search experience of the product; most search boxes have similarities, but a really good search box will bring users in the details. Differentiated feedback brings a very warm and intimate feeling.
1. Analysis of the search box structure
From the experience level, a good user experience needs to have a complete process. The process of using the search box can be simply phone number list divided into:
Before use - find the search box entry;
In use - click to enter content;
After - show search results.
The use will involve two different states of jump and input, which I will expand and analyze in the following article.
2. Common types of search boxes
Recalling the search boxes of commonly used apps, it seems that their styles do not look very different, but in fact, the details of each search box are carefully designed. The following summarizes several common search box types.
1. Search icon
Only a magnifying glass icon is provided on the page, and users usually need to click the icon to jump to the search page. For example, Xiaohongshu places the search icon in the upper right corner of the page.
2. Basic search box
The basic search box consists of a magnifying glass icon, a text prompt, and an input box. The search box on the WeChat homepage adopts this basic form, and the text prompt is search, which is concise and clear.
3. Text prompt search box
The only difference from the basic search box is that the text prompt part of this type of search box is no longer a search for two words, but supports preset multiple sets of text prompts according to product requirements and displays them cyclically in the search box.
In the top search box of Dianping, the text prompt section displays three different sets of content circularly, guiding users to quickly retrieve delicious and fun things.
4. Functional search box
The reason why it is called a functional search box is that on the basis of the text prompt search box, common functional icons are added according to the needs of product functions, such as scan code icon, photo icon, voice icon, etc., giving the search box more features. functional properties.
△ Students who often use Douban to read book reviews may notice that there is a scan code icon in the search box on the Douban homepage. After clicking, you can quickly scan the barcode or QR code of the book to quickly identify the content of the book and save the trouble of searching.
The composition of the Taobao search box is more complicated. In addition to supporting code scanning, there is also a camera icon, which is convenient for users to take pictures and identify products.
3. Analysis of the design status of the search box
The process of using the search box to search can be divided into four parts: before searching, clicking on the search box, typing, and after searching. In the design and analysis process, the overall search process should be clarified first, and then the interaction details and feedback corresponding to each state should be considered, so as to keep the logic clear.
1. Before search - default state
Location:
Most of the search boxes appear at the top of the page, as a large touch target is more in line with the user's cognitive habits, and is easier for users to discover and use.
In Apple's own map application, the search box is placed in the lower part of the middle of the page. Compared with the search box at the top, this location distribution is more convenient for users to operate with one hand.
style:
The state before search In addition to the several common search box styles mentioned above, some products will directly add a "Search" button in the search box.
Ali-based products including Taobao, Alipay, Xianyu and other homepage search boxes have additionally added a "Search" button. Compared with clicking the search box and then clicking the keyboard to search for content recommendations, clicking the button directly simplifies the search process.
2. After click - get focus
search bar:
After clicking the search box, the magnifying glass icon in the box will disappear, a blinking cursor will appear to guide the user to enter, and the "Cancel" button will appear on the right side of the search box.
After clicking the search box of Dianping, three options will appear on the search page. Click each option, and the text prompts in the search box will change, which effectively helps users improve search accuracy. Although it is a small point, it is done very carefully.
keyboard:
After clicking the search box, the keyboard will pop up. Without inputting content, click the "Search" button that comes with the keyboard to query the content recommended in the search box.
Search page:
The content of the search page usually includes sections such as historical search, search discovery, popular recommendation, etc., which records the user's search behavior, recommends target products or services, and improves the conversion rate.
Douban displays the most popular content on the search page, including real-time updated popular book and video lists, popular groups, and popular topics, providing users with effective guidance.
Regarding historical search, we can continue to analyze in depth, think about how to sort these records, and display a few records at most...