{"id":321,"date":"2022-07-30T16:39:36","date_gmt":"2022-07-30T16:39:36","guid":{"rendered":"https:\/\/www.mirobin.com\/blog\/?p=321"},"modified":"2022-08-08T17:08:29","modified_gmt":"2022-08-08T17:08:29","slug":"how-to-make-an-effective-search-box","status":"publish","type":"post","link":"https:\/\/www.mirobin.com\/blog\/how-to-make-an-effective-search-box\/","title":{"rendered":"How to Make an Effective Search Box"},"content":{"rendered":"\n

This Blog is originally posted on WebAlive<\/strong><\/a>.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Search is the simplest way to find a piece of information from large scale sites. A basic search consists of an input box to type the query and a Button to submit. We may think, it doesn\u2019t need much of our attention, however, on a heavy content website a good search can serve as a human assistant. You ask for help by typing and you get what you looking for.<\/p>\n\n\n\n

Image source: Amazon.com.au<\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We often find a poorly working search-bar on websites. But it\u2019s not always the functionality or performance of this feature rather it also depends on the user\u2019s skills.<\/p>\n\n\n\n

According to Nielsen Norman Group<\/a>, users have poor search skills and don\u2019t know how search works. Therefore, to offer an effective search we have to consider different users from novices to experts.<\/p>\n\n\n\n

Why Search bar is important<\/strong><\/h2>\n\n\n\n

Day by day search gaining more popularity than before. We are now having voice assistants search technology like Apple\u2019s Siri or Amazon\u2019s Alexa. More and more ecommerce search now offering image searches. Even nowadays kids know how to search for cartoons on YouTube!<\/p>\n\n\n\n

Image source: freepik.com<\/a><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

First, we need to understand why user searches and what users search for. In a content-heavy website users often use the search box to look for particular information. Sometimes to avoid drill down to navigation, some users straightly jump to the search box to save time.<\/p>\n\n\n\n

Research from NN Group<\/a> showed 17 years of search success rates where overall success in 2000 was 64% and increased significantly in 2017 by 92%.<\/p>\n\n\n\n

This success rate inspires us to build more powerful search functionality. So that user gets more trust around the site and also get a positive experience. As a result, we will get more returning customers to our sites.<\/p>\n\n\n\n

Even for example, in the ecommerce site when users don\u2019t get particular information on the product details page, they go for a search, and if customers can\u2019t find it, then it doesn\u2019t exist.<\/p>\n\n\n\n

Bear in mind that if your site\u2019s information architecture is not that friendly your search box can be a 2nd lifeline to hold the user to your website.<\/p>\n\n\n\n

Which website need the search functionality<\/strong><\/h3>\n\n\n\n

To discover content on your website search is the second-best way after navigation. But if your site is simple one-pagers then the search will play almost no uses. But, there are many sectors where a simple search can play a vital role. For example a data-driven website, a Booking service website, or Job Portal website.<\/p>\n\n\n\n

When do users look for Search box<\/strong><\/h3>\n\n\n\n

People search when they are confident. When a user wants control their own way and want to walk independently to a website, they directly use the search box.<\/p>\n\n\n\n

Studies have shown<\/a> about 43% of website visitors go immediately to the search box and these searchers are 2-3 times more likely to convert.<\/p>\n\n\n\n

On the other hand, some users start with navigation, and then, if they are stuck in a point, they usually jump to the search box. If we shed light on this matter we should make a search bar available on every page.<\/p>\n\n\n\n

A basic searching steps<\/strong><\/h3>\n\n\n\n

When a user begins a search, they\u2019re really starting a journey. A journey that starts with finding the search box to getting a result.<\/p>\n\n\n\n

And if they get an expected search result, they can complete the task or purchase. But this all starts with a search.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Visibility of Search box<\/strong><\/h3>\n\n\n\n

The users always don\u2019t know where the search box is when they enter a website. Making it visible to every page is very important.<\/p>\n\n\n\n

To create a minimalist design, we often place just a search icon that almost disappears with Navigation. This actually increases the cost of interaction. Instead, use an open text field.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The best place for search feature can be the top bar, which consistently showing on every page. This way it can be seen easily and it will make faster a user\u2019s search process.<\/p>\n\n\n\n

A study by A Dawn Shaikh and Keisi Lenz. Where users look for the search icon.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Search Button or Just an Icon<\/strong><\/h3>\n\n\n\n

To make the overall site visibility clean and modern we often show an icon right beside the search box. Some users may not recognize it as a button rather than an identifier of the search only. A clear Search button tells the user how to execute the search.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Enough space to type the query<\/strong><\/h3>\n\n\n\n

The first step of the search query is typing and typing is pretty effortful. So our search should provide enough space to type a query of the user. According to NN\/g research on an ecommerce site, users typed 14.5 characters<\/a> on average. So they encouraged to use 27 characters<\/a> in the length of a search box.<\/p>\n\n\n\n

However, a standard search length may vary from site to site. The best option could be researched on the site\u2019s search log to check how long users\u2019 queries are.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Provide hints on what your user can search<\/strong><\/h3>\n\n\n\n

We can write something helpful to our users about what they can search for. Providing search example as placeholder can be a good approach here so the user can see the key search categories before they start typing.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"
Source: relocate.me<\/a><\/figcaption><\/figure>\n\n\n\n
\"\"
Source: Tmall<\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"
Source: etsy.com<\/a><\/figcaption><\/figure>\n\n\n\n

Keep it simple but useable<\/strong><\/h3>\n\n\n\n

When a user searches for something by default users expect that they can simply enter a term, any term, and get the meaningful search.<\/p>\n\n\n\n

So let\u2019s not confuse our user by offering too many options around the search like filler text or a big chunk of instructions. Keep it simple.<\/p>\n\n\n\n

The process should feel like a human experience that can quickly guide them.<\/p>\n\n\n\n

Provide advance search<\/strong><\/h3>\n\n\n\n

Advanced search helps to find something from a large data. It helps to narrows down the result.<\/p>\n\n\n\n

If we are offering an advance search option first thing to make sure it\u2019s not overlapping the simple search option. Because the most user will prefer the simple search.<\/p>\n\n\n\n

An ideal advance search can be using a distinct link that is less prominent than the basic search. We can place the link somewhere closer to the basic search box so a user can find it easily.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Keep the user\u2019s query on the result page<\/strong><\/h3>\n\n\n\n

While showing the search result it is important to show what they searched for. This helps them to refine the query if the result not showing exactly as they expected or even showing less or too much data.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Source: target.com<\/a><\/p>\n\n\n\n

There is a high risk that when a user performs a search, they\u2019re going to get no results. While keeping query in the search box help them to notice that instantly. Additionally, if there is no result found, always mention that the search item is not found, otherwise, the user thinks the system is broken.<\/p>\n\n\n\n

Conclusion<\/strong><\/h2>\n\n\n\n

If you reach the end of this blog, I hope you can pick some points that can help your site search experience. First thing, you can start by taking a deep look at your search log to understand your user behavior and get an idea of how they are using your site search box.<\/p>\n\n\n\n

Undoubtedly search is an important feature for any large website or application. Providing a better search experience can help to gain more trust from your customer as well as get more conversions.<\/p>\n\n\n\n

Next blog to read “Designing data table for mobile<\/a>“<\/p>\n","protected":false},"excerpt":{"rendered":"

This Blog is originally posted on WebAlive. Search is the simplest way to find a piece of information from large scale sites. A basic search consists of an input box to type the query and a Button to submit. We may think, it doesn\u2019t need much of our attention, however, on a heavy content website a …<\/p>\n

How to Make an Effective Search Box<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":325,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[11],"tags":[26,27,34,39,40,31,41,29],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/321"}],"collection":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":17,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/321\/revisions"}],"predecessor-version":[{"id":360,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/321\/revisions\/360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/media\/325"}],"wp:attachment":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/media?parent=321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/categories?post=321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/tags?post=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}