How To Use The Search Bar In PitchBook

How To Use The Search Bar In PitchBook?

The search bar, or a search box, comprises two essential elements: an input box and a button. The content is entered in the input box through the mouse or keyboard and is the most basic form of field packaging.

The button is used to start an instant operation. Its application scenarios include marking an operation command, responding to user clicks, and triggering corresponding business logic.

To sum up, we can give the search box a basic definition: a component that triggers the search behavior by entering content.

However, this only explains a search box at the User Interface (UI) level. From the experience level, a good user experience should be reflected in the search-box process, which can be divided into three steps: "Before," "Doing," and "After."

Before: Before use, the search box should have a striking visual position so that users can quickly find it.
Doing: In the use process, the search box should be able to provide feedback based on the user's input and interact with the user.
After: After use, give the user the desired result.

To be more specific, the design of a good search box requires consideration of three core issues:

1. What are the real needs of users?

The query words entered by the user are straightforward. The average length of the query is 2.7 words. Therefore, judging and obtaining users' actual needs from short query words is more important.

2. What information is relevant to user needs?

The essence of the search engine is a matching process, that is, matching the user's demand content from massive data, judging the relevance of content, and user query keywords to let the computer genuinely understand the meaning of information.

3. What information can users trust?

There needs to be a clear criterion to judge whether the content published on the Internet is credible. The search results of the same query may have contradictory answers.

At this time, the credibility of information is critical. Link analysis is also regarded as a judgment on the credibility of information.

Generate Key Takeaways

Generating ...

Products with complex functions will have search boxes with high priority.
No matter how many categories of search content there are, there is only one search box; that is, the entry of the search function is unique.
You can enter any content in the search box and try to keep the user's input open.
Providing recommendations based on user input is necessary for interactive feedback for the search box.
The categories of search results should be divided to facilitate users to make quick judgments.
It is better to inform users of the number of search results. This way, users can expect rich and varied results after searching.
When the search is empty, try telling the user how to avoid making mistakes again.
No matter at which stage of the search, content recommendation always has a "machine" to take advantage of.

History of Search Bar Development

The origin of the search bar can be divided into four generations with changes in the technologies adopted:

The Generation Of Catalog

This era has become the "navigation era," and Yahoo! represents this era. Through manual collection and sorting, high-quality websites belonging to various categories are classified, and users can find high-quality websites through classified directories.

This purely manual method does not take any sophisticated technical means. It adopts the classified directory method.

The quality of the websites is generally high, but this method could be more robust in scalability, and most websites cannot be included.

The Generation Of Text Retrieval

The age of text retrieval uses classical information retrieval models, such as the Boolean model, to calculate the correlation between user query keywords and web text content. Many early search engines, such as AltaVista and Excite, adopted this mode.

Compared with the classified directory, this method can include most web pages and sort them according to the degree of matching between the web page content and user queries.

However, due to the rich links between web pages, which are not used by this generation of search engines, the search quality could be better.

The Generation Of Link Analysis

Search engines with search bars improve search quality by combining page popularity with the similarity of content. The link relationship between web pages is fully utilized.

Generally speaking, web page links represent a recommendation relationship so that we can find essential web pages from massive content through link analysis. The pages that have been recommended many times represent their popularity.

Google was founded in 1998. It took the lead in proposing and using PageRank link analysis technology to significantly improve search quality.

However, many websites put forward many link cheating schemes for link analysis algorithms to obtain higher search rankings, which leads to poor quality search results.

The Generation Of User-Friendly

This generation enables a deep understanding of users' needs. Even though different users enter the same query word, their purposes may differ.

For example, if you also enter "Apple" as the search term, there will be a massive difference between the purposes of a fashionable youth seeking an iPhone and a fruit grower.

Even if a user enters the same query word, the demand will change due to differences in time and occasion.

Currently, most search boxes are committed to solving the problem of understanding the real needs behind a short query word sent by users.

For instance, historical information, such as time and geographical location, is used to understand users' real needs.

Suggestions on Designing a Search Bar

The design of the search bar seems insignificant, but it affects users' first impressions. The designers don't want users to give up using the website because of a poorly accessible search bar.

After all, the design will impact the user experience. The feedback on app design inspired me to write this article, which discusses how to design a search box that is both functional and accessible. This topic is significant.

Before acknowledging their ideas, the designers must carefully consider their decisions. These ideas will affect the user experience we create. It is easier to identify images and icons than text; sometimes, they are more expressive than text.

The search icon in front of the input box can serve as an indicator, and the search results will be displayed below the search bar. The search icon behind the input box can indicate and act as a button.

The search results will be displayed only when the button is clicked. Some search columns have the characteristics of both. Users decide whether to set a search button in the search column.

Next, we will discuss some suggestions on how to design your search bar well. These suggestions will be mainly based on three points: the search icon, the search box, and the filter.

Smart Placing Of The Search Icon

We suggest adding a search icon to let users focus on the search bar on the website or app. As a visual element, it can make the search box more visible and accessible.

Nowadays, driven by visual perception, web design frequently uses icons and images. Compared with text, icons, and images can be noticed by the human eye faster and convey more content on the premise of taking up less space.

1. In front of the input box

This type of search icon is often used to indicate the location of the search box. We do not need to click any button to display the results; the search results will be automatically displayed below the search box after entering them.

If the search bar of an app or website is hidden, the icon must be clickable. After clicking the icon, the search bar will be displayed on the screen. A cancel button should also be provided if necessary to hide the search box again.

2. Behind the input box

This type of search icon not only indicates the location of the search box but also acts as a button. Once you click the button, the search results will be displayed. In most cases, the icon is a separate button.

In some search boxes, the icon looks like a search button. However, it cannot be clicked because it is an image that indicates only the location of the input box.

That is not a good case for search box design because it may mislead users. If the icon is only indicative, it should be placed in front of the input box.

3. Contain both characteristics above

Some search columns have the characteristics of both. After entering, the user will automatically provide preparatory options for searching and can also click the search button to view more results. This kind of search bar is more popular.

The keypad contains buttons that can replace the search buttons in the search box. However, some users need to get used to keyboard buttons, so deciding whether to set the search button according to the user's situation is necessary.

Increase The Availability Of The Search Box

There are many ways to design and develop more accessible search boxes for mobile devices and users. The mobile device has a small screen, which makes it difficult for us to click.

Especially when the search box is small, we click other buttons by mistake, which is a very common problem.

It can have a variety of sizes that all websites and apps should follow, but they should certainly be as conspicuous and easy to access as possible. After all, these small details will affect the user experience.

On many websites, the search box is not hidden, allowing users to find it quickly. However, some designers choose to hide the search box behind the icon to save space, which can be used to show more critical things.

In fact, there are better ideas than hiding the search bar on a mobile device because it is difficult for a single icon to attract users' attention. It should always be displayed on the screen if the user needs to search repeatedly.

If the search operation is secondary and users can complete the main procedure without searching, we can hide the search box somewhere to guide users to focus on more important things.

Some web pages focus search functions on a single page. This method is more common, especially when the web page has many parts as necessary as a search. These functions are generally displayed in the bottom navigation bar.

The bottom navigation bar has at most five web page functions, making navigation more convenient. A separation function like this can reduce the interference on the screen so only one activity is focused at a time.

Filter Design

A filter is a function that limits search results to what users want to see. Filters ensure that users can easily find what they want and eliminate the possibility of being overwhelmed by many choices.

Of course, you can also further reduce the number of search results by selecting brand names, preferred colors, etc.

There are two suggestions for using filter functions:

1. Limit the number of filter design options appropriately

Although the filter function is beneficial, the number of filters visible to users should be limited. Otherwise, they will be at a loss. About 7-8 filters are displayed at a time, and then it provides the option to expand the filter list when the user has more needs.

In addition to increasing the overall user experience, this approach will ensure that the web page looks clear and manageable.

2. Prioritize filtering options

Based on what the site provides, it is essential to list filter options according to the user's search intent. Most users choose the Price filter because it is usually the determining factor when purchasing.

Therefore, it only makes sense to place it at the top. Again, you can prioritize gender, brand name, color, and other aspects to achieve faster and more specific search results.

Tips to Give the Search Bar a Nice Look

The design elements of the search bar are: the search box, icon, and search text.

1. Search box style

The height of the search box can be customized, usually between 30pt and 40pt, which is convenient for users to click and identify. The size of the search bar shall conform to the touch area of the fingers at the moving end.

The search box's fill color is generally 100% white or light grey. On color pages, plain white is usually used as the fill color to enhance the highlight.

In white pages, light gray is generally used as the fill color. No fill color is more common in brand operations and can have better integration and visual effect.

Borders are often used for white or clean pages and are also related to the overall design style of the app.

The product positioning and overall design style shall be considered when designing the filet size. The size of the round corner of the search box can be divided into a right angle, rounded corner, and capsule.

2. Icon Style

The magnifying glass icon is searched in the user's mind, and the word "search" is omitted from the icon display.

The size of the search icon should be between 12pt and 18pt, the left margin between 8pt and 10pt, and the right margin should be 6pt from the text.

The search icon should keep the lines simple to avoid being too complex, and the lines should be moderately thick and easy to identify.

Other function icons include

Camera icon: Usually, the camera icon is used as the function entry and placed on the right side of the search bar. This function is commonly used in e-commerce app applications.
Scan icon: The code scanning function is also one of the standard functions, which should be easy for users to find.
Transparent icon: After the search box is entered, a transparent icon appears to facilitate the user's deletion of the input content.
Voice input icon: Many users prefer to use the voice input function rather than typing because it is more convenient and efficient, which is why you should consider adding a voice input icon to your design.

3. Search Text Style

The size of the search text is suggested to be 14pt, and the left spacing is recommended to be 6pt.

The limit number of characters that can be entered should be considered. The font alignment on the left is more consistent with the visual reading order. Centering is easier to find and read.