In fact, the search box is Website production The role played by the search box can not be underestimated. A high availability search box can often effectively save the time for users to obtain information and content, and greatly improve the browsing experience of users. As one of the most common UI controls in web pages, the composition of the search box is very simple: input box+touch button, so many webmasters have not paid enough attention to it. Especially in content oriented websites, when users face complex content, they will search for a search box at the first time and enter keywords to obtain the desired content. A powerful search box can promote the occurrence of user interaction. So when designing a website, we should spend more time thinking about how to design a search box. If you don't have a clue, don't worry. Let's look at the key points of the search box design together with Baiwei Network, a website construction company in Guangzhou!
1. Use the magnifying glass icon
Now, when users see the magnifying glass icon, they will naturally think of the search function. This connection is gradually formed in the process of long-term use and is widely accepted by everyone. Therefore, when designing a search box on a website, we can use the magnifying glass icon more often. After all, it is the most commonly used and easily recognizable icon (even if there is no text label, users can easily recognize it). Of course, it should also be noted that the magnifying glass icon should be simple and intuitive, try to reduce some unnecessary details, and improve the visibility of the icon.
2. Make the search box conspicuous enough
An important rule of search box design is to make the search box conspicuous enough, and the clear and visible search box can enable users to quickly find and use it. The following figure is a good proof of this. There are two different search box designs on the left and right. The left search box is hidden behind the icon. This hidden search box is too inconspicuous for users to find and use. In contrast, the search box on the right can help users in a timely manner.
3. Provide search button
Buttons are set in the search box so that users can understand the touch mode of search. The search box with buttons is easier to attract users to click to search. However, when designing the search button, we should pay attention to controlling its size and selecting the appropriate area so that users can move the cursor or click it manually. In addition, it is also necessary to set the Enter key to submit the search function, because many users still keep the habit of clicking the Enter key to touch the button.
4. Keep the search input box on each page
It is better to have a search box on every page of the website. In this way, when users can't find the content they want on a specific page, they can immediately get the content through the search box. This setting is fast and convenient, and can significantly improve users' liking for the website.
5. Make the search box as simple as possible
Another principle of search box design is simple and easy to use. Research shows that a search box without advanced options looks more friendly and usable. Therefore, in general, it is better not to provide complex search options when providing users with a search box.
6. Use automatic search recommendation mechanism
What is automatic search recommendation mechanism? Take Google as an example. When we enter "Apple Watch 2" in the search box, it will automatically display relevant terms for recommended search, which is the manifestation of the automatic search recommendation mechanism. Google has an absolute say in this regard. Since 2008, it has started to count users' search history and organize word recommendations to help users save time and create a better user experience. The automatic search recommendation mechanism can dynamically predict the user's search direction and help users complete the search faster. However, we should also pay attention to the following points when using this mechanism:
Ensure that the recommended content automatically searched is valuable. If an inappropriate or useless search recommendation appears in the input box, it will not facilitate the user's search, but will easily confuse and distract the user's attention. The recommended content of automatic search must be determined based on the user's search history data;
When the user enters keywords in the input box, give the user recommendation information as soon as possible. For example, after the third character, provide the user with immediate and valuable suggestions to reduce the difficulty and workload of user input;
Try to provide users with less than 10 search results to avoid information overload.
Highlight the difference between the input information and the recommended content;
7. Let users understand what can be searched
Let users know what content can be searched in the website, which is also a way to improve users' liking for the website. This can be done by adding placeholder text in the input box. The following figure shows the IMDB website. It adds some placeholders in the search box to prompt users to search the contents that can be searched in the search box, so as to attract users to search. With the continuous development of HTML5 website building technology, this form of placeholder addition is not easy to design. However, it is suggested that the content of placeholders should not be too much to avoid bringing cognitive burden to users.
8. Reasonable input box size
The most common design error of the search box is that the size of the input box is too small. The input boxes of many websites are too small. Although they can accommodate longer content, some content is invisible. The usability of this design is poor. Due to the limitation of visual scope, users may subconsciously think that they can only use short and imprecise query methods when entering content, or they may encounter trouble when modifying long keywords. Therefore, Xiaofei suggests using an input box that can be lengthened according to the length of the input keywords. This can not only save screen space, but also give users sufficient visual prompts.
9. Keep the search box in the desired position
When users want to use the search box, but need to spend a lot of energy to find it, the user experience has been greatly reduced. The search box on the website should be easy to detect and put in the expected position of users. Where is the expected position of users? The following chart is the result of a study by A. Dawn Shaikh and Keisi Lenz, who sampled 142 users to understand their preference for the location of the website search box. From the chart, we can see that most users will look for the search box in the upper left and right corners of the website. This is mainly because users use the F-scan method when browsing the website, and the upper right corner of the website is the preferred area for most users. Therefore, when designing the search box, we'd better place it on the top right or in the top center.
Tips:
Ideally, the design of the search box should be consistent with the design style of the entire website. However, it should be slightly prominent visually, so that users can easily find its existence;
The more content the website has, the more obvious the search box should be. Make sure that the input box and button can be distinguished from the background area.
In general, although the search box looks simple, it contains a lot of design knowledge. Since a little change will have a great impact on the user experience of the entire website, we must be careful when changing the search box. If the current conversion rate of your website is good, don't make any major changes to the search box; But if the conversion rate of your website is very low, and no problems are found in other block designs, remember to check whether the design of the search box is defective.
