How to Optimize your Website Search Form to Level up Customer Satisfaction
1. How a search form on your website can help increase your customer satisfaction
2. How the search button can increase your business metrics
3. Website search bar design tips
4. Search patterns and search results
5. Additional search bar tips
Useful tools:
1. Newoldstamp - Email signature marketing
2. Mailchimp - Email builder and sender
3. Hubspot Email Marketing - Marketing automation platform
4. MailerLite - Landing page builder
5. Canva - Online tool for making designs
6. Zyro’s AI Logo Maker- a free website logo maker
Not every website needs a search box. If a small site has a limited amount of content, probably this feature doesn't cost your time and efforts, because no one will use it. However, if you have a pretty large website with a tendency to grow over time, then a properly designed search box is a must.
How a search form on your website can help increase your customer satisfaction
According to eConsultancy, only 15% of companies have worked to optimize the e-commerce site search experience, while 42% completely ignored it. If the site search usability isn't optimized or optimized incorrectly, your visitors (potential buyers) will quickly switch to a competitor website, where it’s easier to find what they want. Why would you want that?
How the search button can increase your business metrics
Let's look at some statistics from eConsultancy again. They found out that about 30% of visitors will use the internal site search field to look for products. The report mentioned above also describes the benefits of optimized search functionality. They are increased website usage, higher conversions, improved customer loyalty, and increased sales.
Website search bar design tips
The following six tips will help you drill down into what really works.
Tip #1 Use the proper size and the white field
Make sure your search box is long enough to contain the typical query against your content. What irritates me a lot is when the box is too small, and I can’t see what I type. “But I am short on space!” - you might say. In such case, you can set up interaction to expand the field when users click into it.
Look at this example from Adidas. The homepage layout is mostly dark, but they made the search box white to achieve contrast and higher visibility. They also placed it in the top right corner for users to notice it immediately. Moreover, the bar expands once you click on it.
Tip #2 Add a magnifying glass to the search bar
By adding the magnifying glass icon, you will make it easier for website visitors to find your search bar since this icon is recognizable among users.
Tip #3 Add a search button to the field
A lot of website owners believe that users are smart enough to start the search by hitting “Enter.” Perhaps there is some truth in that, but some users might still have the habit of clicking on a more traditional “Submit” button.
Tip #4 Locate your search form in the expected place
Don't hide your box in the bottom of the page or the navigation menu. People should easily find it. According to studies conducted by Nielsen Norman Group, the ideal placement for the search box is the top of the page, usually in the right-hand corner. However, the left top corner works almost as well. NEXT UK placed their search bar on the left, closer to the center, and it's still easy-to-find because of its color, the magnifying glass icon, the “search” text, and the proper size.
Tip #5 Use the input text to show users what they can search
It might be useful for users if you add a small hint to your search bar - a text to guide people about what they can look for on your website. For example, “Find movies, TV shows, celebrities, and more.” By the way, you can check your most commonly used queries in your Google Analytics report and add them as suggestions in your search field.
Tip #6 Choose pages where to add a search form
If it's an e-commerce website, add this option to all pages. If you are dealing with services like “Newoldstamp,” consider adding the search box only to blog, support and help pages. On the example below, you can see our blog page with an option to search in our blog.
Search patterns and search results
Create smarter results by adding the most necessary features that convert.
Must-have feature #1: Autosuggest and smart predictions
Make the search more comfortable for your visitors by including autocomplete options in your search field. Autocomplete will recommend specific products and keywords to users as soon as they begin typing. This is particularly handy for hard-to-spell queries.
Must-have feature #2: Show search results anyway
When a person misspells a word in a search query, the search feature must recognize it so that the user find what they are looking for anyway.
Must-have feature #3: Always show the result page
This feature is in some way related to the previous one. To avoid user frustration, always show the result page. Showcase best sellers, similar products, use your sense of humor, offer something that is relevant to the user. Why is it so important? If the user sees “nothing is found”, what will they do? Most likely they'll leave your site and seek for the right thing from your competitors. But if you offer them something that might satisfy their needs, then chances are they will buy what you offer instead of leaving your website empty-handed.
Must-have feature #4: Search form for your mobile version or app
Life without smartphones is hard to imagine. For many of us, they are the first thing we see when we get out of bed each morning. Because people use mobile devices mostly for finding stuff, a mobile-friendly search will help them find what they want quickly and easily. Ideally, your app or mobile website version should feature an easily identifiable search field in the top of the screen and shouldn’t require extra actions from users. Also, it’s highly recommended to integrate autosuggestions to reduce mistakes and data entry; store all recent user searches to provide this data to them the next time they conduct a new search; offer the option to sort or filter search results; suggest relevant alternatives when there are no matching items found.
Additional search bar tips
If you want to go even further and bring the user experience to a higher level, consider implementing the following functionality.
Tip #1 Show search progress
Add a progress indicator to let users know how long they need to wait. It is very convenient and makes visitors feel valued because you showed you cared about their time.
Tip #2 Show the number of results
When I was looking for a pendant on the Pandora website, they let me know that there were 181 items available that matched my search query so I could decide on how long I wanted to spend looking through results.
Tip #3 Add search filters
Allowing users to filter and customize their search results to find exactly what they want, will make their lives so much easier. For example, let them filter search results by maximum/minimum price, brand, size, color, etc.
Tip #4 Add synonyms to your search pattern
To increase the chances visitors find what they need, suggest synonyms. For instance, purse -> handbag -> bag, etc. See the example from Bershka below.
Tip #5 Show related results
Visitors being shown “No results” pages after a failed search usually get frustrated. Even if you have no product that matches their search, provide them with other recommendations such as similar categories or similar items. Imagine that you tried varenyky, a famous Ukrainian dish made of boiled dough with different fillings when you were visiting Kiev. Now you want to see if you can find varenyky on Amazon. Although you can’t buy them there, Amazon suggests you a special instrument to make varenyky yourself. By the way, have you ever tried varenyky?
Conclusion
If you want to save your site visitors time and efforts by helping them to quickly find what they are looking for, then you should add a search bar to your website. This is extremely important for content-heavy resources.
The effective search box:
- is noticeable;
- placed on the top of the page;
- doesn’t require extra efforts to start using it;
- has the input text to show users what they can look for;
- has a clearly defined “submit/go/etc.” button;
- is properly sized;
- offers autosuggest and smart predictions;
- shows the number of results;
- shows related results;
- is quick;
- and never leads users to “nothing found” pages.
