Search is like a conversation between a user and an app or website: the user expresses a need for information by asking questions, and the app or website responds by displaying results. Users expect a smooth search experience, and based on the quality of search results, users often form a quick judgment on the value of an app.
There are many points to consider when we design the search interface, but for the convenience of reading, I will divide this article into two parts: the design of the search bar and the design of the result display page. While some of the specific advice in this article will be subjective to your design needs and goals, there are some general design points that work well and can apply to different apps and websites. Before we start the whole article, let's think about a question - when do you need to use search?
2. In what scenarios should / should not use search
Small sites are best not to have a search function. When a website has limited content, there is no need for a search function.
The search function is only particularly important when the size and complexity of the website reaches a certain level. Since users usually need to find a specific product, e-commerce sites are probably the most common use case for search. On some large e-commerce sites, the search bar is even independent of the header and takes the visual focus of the UI interface. Up to 30% of users will use the search tool on the website, and this behavior will greatly help merchants figure out what users need.
The search function is also especially important for sites like booking airline tickets or providing information services.
3. How to design a good search box
The search box is a combination of an input area and a submit button. Some people may think that the search box needs no design at all, after all, it only has two elements. However, since the search box is the most commonly used design element in websites with massive information content, its ease of use is self-evident. The following will be divided into 8 parts to explain how to design the search box:
Visually highlight the search box
The search box works with the magnifying glass icon
Place the search box where the user expects it
Provide a search button
Tell users what they can search for
Every page should have a search box
Use smart recommendation/matching mechanism
1. Visually highlight the search box
The most important principle of search b2b data box design is to make it stand out. If search is an important function in your website or app, it should be placed in the most prominent position, because it is the fastest path for users to find content.
Activating a hidden search box by clicking a separate icon or button has the following disadvantages:
The search function is not easily noticed by users. Icons take up less space than open text input boxes, so visually isolated icons and buttons are harder for users to notice.
Increase interaction costs. In other words, one more step has to be added before the user can use the search box.
2. Use the search box with the magnifying glass icon
Icon is understood from its meaning as a visual symbol of something, behavior or idea. There are very few recognizable icons that can be used everywhere, and the magnifying glass is one of them. Users don’t even need extra copy labels to know that the magnifying glass represents “search”.
Tip: Use the simplest magnifying glass icon, because less visual details can reduce the cognitive burden of users and improve cognitive efficiency.
3. Place the search box where the user expects it
The debate on the best place to put a search box on a web page continues unanimously. But many famous sites like YouTube, Amazon, IMDB, BEST BUY put the search box in the top center or the top right side. A. Dawn Shaikh and Keisi Lenz conducted a survey of 142 people, and based on the results of the survey, they concluded a graph of users' expected positions of search boxes. This study found that the upper left or upper right corner of the page is the most noticeable place for users, and users will find the search box easily using this F-shaped visual browsing form. Putting it in other places where users don't expect it means that users need to pay extra to find the search box.
Users will first look for the search box in the upper right corner of the page, and if they don't find it, they will start browsing the top content of the page.
Tip: Using an eye-tracking heatmap or other eye-tracking tool to study user browsing behavior can help you find areas of the page that users focus on, so you know where to put the search box.
4. Provide a search button
Although hitting the enter key on the keyboard can trigger a search, some users still prefer to use the traditional "(search) submit" button. Having a button also makes the user realize that there was an extra step required to trigger the search action, even if that step is to press the Enter key.
Tip: (1) Make sure the size of the submit button is appropriate, so that the user does not need a particularly precise operation when using the mouse or finger to click. A large enough clickable area makes it easier for users to both discover and click the button. (2) The search trigger logic in two forms of pressing the Enter key and the button is reserved for the user. Many users are still used to clicking physical buttons to submit search requests.
5. Tell users what they can search for
The example of placing a search query in the search box is a very good design (search guide) to tell the user what kind of content can be searched. If there are many types of content that users can search, then the search input prompt is more important. However, the search input prompt must limit the number of words, otherwise it will increase the cognitive load of the user.
Placeholder copy prompts users what they can search for.
However, according to Mike Madaio recently, there are situations where placeholder copy can create usability problems: if the placeholder copy uses a lighter color than normal copy, that can create contrast problems — it doesn't follow widely accepted web usability guidelines . In addition, according to some views in the W3C, placeholder text may not be widely used in some assistive technologies (this should refer to light-colored guide text that may not display sufficient contrast for users to recognize on different hardware devices), This would make such users unaware of what to search for with the search box.
6. Every page must have a search box
In another UX Booth article, Tucker FizGerald emphasizes the importance of users being able to use the search box on every page. The search box is especially needed when users can't find what they're looking for, especially on pages like 404s.
7. The right size
Designing the input box too small is a common problem for designers nowadays. It is true that even with a short input box, users can still enter long search texts, but this will result in only a part of the long text being visible, so that the user cannot scan or edit the entire text very well. This experience is not good. OK And in most cases, if the search box is too short, users are more inclined to enter short and inaccurate search texts due to the poor readability of long texts. If the size of the input box can be defined according to the user's expected input text, it will be better in terms of readability and presentation experience. As a rule of thumb, an input box in a search bar is best able to display 27 letters.
Tip: (1) Use em (a unit for measuring the width of printed matter, equal to the height of the type size being used) to set the width, not just pixels or points. The width and height of 1em is equal to an m letter (regardless of the font of the m letter) (2) If you have to save space on the page and want the search box to be prominent, you can choose to use a variable-width search box that expands to its full width after the user clicks. This form of design can provide enough visual cues for users to quickly find and search on the basis of saving space.