4 Search Box Optimization Tips For Your Website

Joel Varty
Joel Varty
Aug 25, 2017

Giving your website visitors a search bar to find content is important so everyone can easily find what they're looking for. Dropping in a search feature is a good start, but customizing the functionality and placement is important, too.

Let's take a look at why search bars are necessary along with some search bar best practices so you can give your visitors the best experience.

Why Your Website Visitors Want a Search Bar

The biggest reason to include a search bar is to improve user experience. Most new visitors to your site will arrive there from elsewhere on the web: a Google search, a social media update, or a link from another site. Most of these visitors will follow a path you've laid for them, but for the few that prefer to carve their own way, a search bar will help them along.

Returning guests have many reasons for their visit. In most cases, you want your website design to accommodate visitors so their navigation is simple. But for the few cases when you cannot anticipate a visitor's goal and provide a customized path, a search bar is a useful tool. Visitors will be able to find the specific information they are seeking, especially if they are coming back to find previously viewed content.

For large sites that have many pages of useful information, a search bar will be an invaluable tool for your users. Ecommerce sites must have a search bar for users who aren't interested in browsing and would rather go directly to specific products. For some websites, especially those that are only a few pages, a search bar might not be necessary as everything is only a click or two away. However, even the smallest sites often have a blog, and a searchable blog is a must!

The Benefits of Adding a Search Bar For Your Website

Along with giving your visitors what they're looking for, search bars will help you, too. If you find users searching for the same things over and over, that's valuable keyword information you can use for SEO and for building new site pages. 

You can also take a look and see if a search results page is the last destination for users before they exit your site. Chances are, they were unable to find what they wanted and went elsewhere. Now you can know what was missing and see if you can fill the void. 

On the other hand, a poorly-designed search bar will only frustrate users and send them away. If you're going to include a search bar, it must be done right. 

Search Bar Best Practices

When considering the design of a search bar, creativity isn't at the top of the list. Instead, meeting expectations is essential. A search bar is a common element found on many websites, and the majority of web browsing begins with a Google search. Staying within the norms is necessary so make sure to:

Use Common Symbols. We're all used to a magnifying glass being the nonverbal symbol for search, so use it rather than trying to be unique. For the best results, use a simple icon with fewer details as it will be easiest for people to recognize. 

Display the Search Field. Don't use a link to a search page. Instead, use an actionable search box prominently displayed on the screen. Make it as simple as possible for visitors to use by reducing any unnecessary steps and clicks. 

Size Matters. If you make your search field too small, only a portion of longer search terms will be visible and that's annoying for users. In some cases, a smaller box will discourage visitors from searching with the terms they'd prefer and cause them to choose shorter words to try to make them fit. 

Easy Search Button. Most people will expect to get search results after pressing the "enter" key so you want that functionality. For everyone else, make sure there's a big, easy to find "search" button to click after entering a search term. 

More Design Options. Depending on your products and services, a drop-down or popup menu from the search bar might make navigation even faster and easier. 

Search Bar Design: Location Matters

The golden rule of search boxes is that they must be easy to find. You don't want one that blends in with the rest of the website; after all, searching for a search bar is a bit ridiculous. While you don't want one that's a sore thumb, a contrasting color is necessary so it's easy to spot.

In most cases, people will look for a search bar at the top of the page and on the right side of the screen so that's where to put it. As with all web page elements, a bit of A/B testing should be included to make sure you're customizing for your readers, so you may want to experiment with left, center, and right side placement. 

You should also put the search bar on every page, and in the same location on each page. When a user cannot find the information she is looking for, she will go looking for your search bar and you want it to be right where she thinks it is. 

Search Box Optimization

Giving searchers easy ways to filter and sort results is crucial. If customers are looking for products, they may want to sort by highest ratings or lowest cost. If they are looking for information, they may want to sort for the most recent or relevant updates.

Similarly, being able to filter results in a meaningful way helps users narrow their search. Options like size and color are common filters for many items. Keep your filter options limited to just the most important as too many filters can become confusing and distracting and lead to searches with no results.

Consider which filtering and sorting options make the most sense for your products and which are the most important to your customers and put those first. 

How you display your search results matters, too. A grid view is good for products that are chosen for their look (think: clothing) as it gives users an easy view to compare. Lists are better for informational results, similar to how Google returns a list of links for a basic search.

Bonus Features to Consider

Depending on the complexity of your website and the products, services, and information it contains, here are a few more things to consider when designing your search box:

Synonym Results. In most cases, returning synonym results is the right way to prevent user frustration. Just make sure the results will still be relevant to the original search terms.

Avoid No Results. When your search engine cannot return a complete match, be sure to provide the user with other possibilities such as similar categories or similar items that are close, but not an exact match. When you do this, be sure it's clear to users that you are providing alternate results to avoid confusion.

Auto-Suggestion. When users start entering search terms, providing autocompleted suggestions will help them create a good query faster. 

Advanced Search Options. Most people will take care of advanced search options when they filter and sort search results. Some old-school searchers, however, would like to have advanced options up front. While you want your main box to be a single, super-simple box, having advanced options accessible from your results page might be useful.

Good Search is Good for Everyone

For the most robust websites, searching will be a fundamental way for visitors to find what they want quickly and easily. When your search functions are difficult to find, cumbersome to use, or missing entirely, it's likely that users will go elsewhere rather than spend a lot of time clicking around in hopes of getting lucky. 

Getting the right search results displayed in a meaningful format with useful ways of sorting that data is also essential. If the results are confusing, overwhelming, or irrelevant, frustrated users will eventually give up.

As with all elements on your website, when you design them with your customers in mind at every turn, you will create a positive experience for them which is always good for you.

Back to All Articles
Back to All Articles
Aug 25, 2017

4 Search Box Optimization Tips For Your Website

Joel Varty
SHARE POST
BlogBlog

Leveraging Headless Commerce for Seamless Tech Integration

Read More
Leveraging Headless Commerce for Seamless Tech Integration
BlogBlog

Unleashing the Power of Headless CMS for Dynamic Marketing Campaigns

Read More
Unleashing the Power of Headless CMS for Dynamic Marketing Campaigns

Coming Soon: Agility CMS New UI

More modern. More accessible.

Learn More

Giving your website visitors a search bar to find content is important so everyone can easily find what they're looking for. Dropping in a search feature is a good start, but customizing the functionality and placement is important, too.

Let's take a look at why search bars are necessary along with some search bar best practices so you can give your visitors the best experience.

Why Your Website Visitors Want a Search Bar

The biggest reason to include a search bar is to improve user experience. Most new visitors to your site will arrive there from elsewhere on the web: a Google search, a social media update, or a link from another site. Most of these visitors will follow a path you've laid for them, but for the few that prefer to carve their own way, a search bar will help them along.

Returning guests have many reasons for their visit. In most cases, you want your website design to accommodate visitors so their navigation is simple. But for the few cases when you cannot anticipate a visitor's goal and provide a customized path, a search bar is a useful tool. Visitors will be able to find the specific information they are seeking, especially if they are coming back to find previously viewed content.

For large sites that have many pages of useful information, a search bar will be an invaluable tool for your users. Ecommerce sites must have a search bar for users who aren't interested in browsing and would rather go directly to specific products. For some websites, especially those that are only a few pages, a search bar might not be necessary as everything is only a click or two away. However, even the smallest sites often have a blog, and a searchable blog is a must!

The Benefits of Adding a Search Bar For Your Website

Along with giving your visitors what they're looking for, search bars will help you, too. If you find users searching for the same things over and over, that's valuable keyword information you can use for SEO and for building new site pages. 

You can also take a look and see if a search results page is the last destination for users before they exit your site. Chances are, they were unable to find what they wanted and went elsewhere. Now you can know what was missing and see if you can fill the void. 

On the other hand, a poorly-designed search bar will only frustrate users and send them away. If you're going to include a search bar, it must be done right. 

Search Bar Best Practices

When considering the design of a search bar, creativity isn't at the top of the list. Instead, meeting expectations is essential. A search bar is a common element found on many websites, and the majority of web browsing begins with a Google search. Staying within the norms is necessary so make sure to:

Use Common Symbols. We're all used to a magnifying glass being the nonverbal symbol for search, so use it rather than trying to be unique. For the best results, use a simple icon with fewer details as it will be easiest for people to recognize. 

Display the Search Field. Don't use a link to a search page. Instead, use an actionable search box prominently displayed on the screen. Make it as simple as possible for visitors to use by reducing any unnecessary steps and clicks. 

Size Matters. If you make your search field too small, only a portion of longer search terms will be visible and that's annoying for users. In some cases, a smaller box will discourage visitors from searching with the terms they'd prefer and cause them to choose shorter words to try to make them fit. 

Easy Search Button. Most people will expect to get search results after pressing the "enter" key so you want that functionality. For everyone else, make sure there's a big, easy to find "search" button to click after entering a search term. 

More Design Options. Depending on your products and services, a drop-down or popup menu from the search bar might make navigation even faster and easier. 

Search Bar Design: Location Matters

The golden rule of search boxes is that they must be easy to find. You don't want one that blends in with the rest of the website; after all, searching for a search bar is a bit ridiculous. While you don't want one that's a sore thumb, a contrasting color is necessary so it's easy to spot.

In most cases, people will look for a search bar at the top of the page and on the right side of the screen so that's where to put it. As with all web page elements, a bit of A/B testing should be included to make sure you're customizing for your readers, so you may want to experiment with left, center, and right side placement. 

You should also put the search bar on every page, and in the same location on each page. When a user cannot find the information she is looking for, she will go looking for your search bar and you want it to be right where she thinks it is. 

Search Box Optimization

Giving searchers easy ways to filter and sort results is crucial. If customers are looking for products, they may want to sort by highest ratings or lowest cost. If they are looking for information, they may want to sort for the most recent or relevant updates.

Similarly, being able to filter results in a meaningful way helps users narrow their search. Options like size and color are common filters for many items. Keep your filter options limited to just the most important as too many filters can become confusing and distracting and lead to searches with no results.

Consider which filtering and sorting options make the most sense for your products and which are the most important to your customers and put those first. 

How you display your search results matters, too. A grid view is good for products that are chosen for their look (think: clothing) as it gives users an easy view to compare. Lists are better for informational results, similar to how Google returns a list of links for a basic search.

Bonus Features to Consider

Depending on the complexity of your website and the products, services, and information it contains, here are a few more things to consider when designing your search box:

Synonym Results. In most cases, returning synonym results is the right way to prevent user frustration. Just make sure the results will still be relevant to the original search terms.

Avoid No Results. When your search engine cannot return a complete match, be sure to provide the user with other possibilities such as similar categories or similar items that are close, but not an exact match. When you do this, be sure it's clear to users that you are providing alternate results to avoid confusion.

Auto-Suggestion. When users start entering search terms, providing autocompleted suggestions will help them create a good query faster. 

Advanced Search Options. Most people will take care of advanced search options when they filter and sort search results. Some old-school searchers, however, would like to have advanced options up front. While you want your main box to be a single, super-simple box, having advanced options accessible from your results page might be useful.

Good Search is Good for Everyone

For the most robust websites, searching will be a fundamental way for visitors to find what they want quickly and easily. When your search functions are difficult to find, cumbersome to use, or missing entirely, it's likely that users will go elsewhere rather than spend a lot of time clicking around in hopes of getting lucky. 

Getting the right search results displayed in a meaningful format with useful ways of sorting that data is also essential. If the results are confusing, overwhelming, or irrelevant, frustrated users will eventually give up.

As with all elements on your website, when you design them with your customers in mind at every turn, you will create a positive experience for them which is always good for you.

About the Author

Joel is CTO at Agility. His first job, though, is as a father to 2 amazing humans.

Joining Agility in 2005, he has over 20 years of experience in software development and product management. He embraced cloud technology as a groundbreaking concept over a decade ago, and he continues to help customers adopt new technology with hybrid frameworks and the Jamstack. He holds a degree from The University of Guelph in English and Computer Science. He's led Agility CMS to many awards and accolades during his tenure such as being named the Best Cloud CMS by CMS Critic, as a leader on G2.com for Headless CMS, and a leader in Customer Experience on Gartner Peer Insights.

As CTO, Joel oversees the Product team, as well as working closely with the Growth and Customer Success teams. When he's not kicking butt with Agility, Joel coaches high-school football and directs musical theatre. Learn more about Joel HERE.

SHARE POST
BlogBlog

Leveraging Headless Commerce for Seamless Tech Integration

Read More
Leveraging Headless Commerce for Seamless Tech Integration
BlogBlog

Unleashing the Power of Headless CMS for Dynamic Marketing Campaigns

Read More
Unleashing the Power of Headless CMS for Dynamic Marketing Campaigns

Coming Soon: Agility CMS New UI

More modern. More accessible.

Learn More

Take the next steps

We're ready when you are. Get started today, and choose the best learning path for you with Agility CMS.

Get startedRequest a Demo