1. Visually highlight the search box
The most important principle of the search box design is to make it very eye-catching. If search is a very important feature in your website or app, it should be placed in the most visible position because it is the quickest way for users to find content.


2. The search box works with the magnifying glass icon
Icon is understood from its meaning as a visual symbol of something, behavior, or idea. There are very few identifiable icons that are universally recognizable, but the magnifier is one of them. Even without extra copy tag , users can know that the magnifier represents “search”.

3. Place the search box at the user’s expected location
The most appropriate debate about where to place the search box on a web page is consistent. But many well-known websites such as YouTube, Amazon, IMDB, BEST BUY place the search box at the top center or at the top of the right side. A. Dawn Shaikh and Keisi Lenz made a survey of 142 people and based on the results of the survey, they summarized the user’s chart of the expected location of the search box. The study found that the upper left or upper right corner of the page is the easiest place for users to notice. Using this type of F-type visual browsing, users can easily find the search box. Placing it in a location that is not within the user’s expectations means that the user needs to pay extra attention to find the search box.

The user will first find the search box in the upper right corner of the page. If they don’t found the box, they will start browsing the top of the page.

4. Provide search button
Although clicking the keyboard enter key can trigger the search, some users are still willing to use the traditional “(search) submit” button. Having a button will also make the user aware that the original triggering search action still requires an additional step, even if this step is to press Enter.


5. Tell users what they can search for
The description of placing a search query within the search box is a very good design. This tells the user what kind of content can be searched for. If the user can search for many types of content, the search input prompt is more important. However, search input prompts must limit the number of words, otherwise it will increase the user’s cognitive burden.
The placeholder copy prompts users for what they can search for.


6. Each page must have a search box
Tucker FizGerald emphasizes the importance of the user being able to use the search box on every page. The search box is especially needed when the user cannot find what they want, especially when there are 404 pages.

7. The right size
It is a common problem for ui designers today to design input boxes too small. It is true that even a short input box users can still input long search copy, but this will cause only a part of the long copy to be visible, so that the user can not review or edit the entire copy well. This user experience is not humanize. And in most cases, if the search box is too short, users will tend to enter short and inaccurate search copy files due to the poor readability of long text files. If the size of the input box can be defined according to the user’s expected input copy, then it will be better in terms of readability and display experience. According to experience, the input box of a search bar is best able to display 27 letters.

8. Use smart recommendation
Smart matching can save users’ input costs. Designers often think that the smart matching mechanism aims to increase the speed of user input, but it is actually more effective in helping users organize search languages. Ordinary users are not very good at organizing search languages: in this case, if they do not express clearly in the first step, then it is difficult to find suitable search results successfully. When smart matching works, it helps users express clear search questions.