The search box is one of the most important elements on a website. Regardless of what type of business you have, having a well-designed search box in place is essential so that visitors can easily find what they’re looking for. This doesn’t mean it’s enough to simply add a search feature without even thinking about how it looks.

You’ll need to consider the functionality, the user-friendliness, the aesthetics and even the placement of the search box. This is all so that you can improve user experience on your website, which may even lead to increased conversions.

So what do you have to do when designing a search box? Although the exact recommendations may be subjective based on your needs and goals, there are a few general tips that could work for different types of websites. So here are some of the best practices in search box design and placement:

1. Make it Prominent

The first and most important rule in search box design is to make it easily noticeable. You may be too focused on the design aesthetics that you create a search box that blends in with the rest of the website. But it’s important to remember that you’re adding a search box for people who want to find something on your website. Having them search for the search box won’t make sense and might even have a negative impact on their experience.

This doesn’t mean you have to compromise on aesthetics altogether. Come up with a design that looks great against your existing website design while still being prominent enough for people to notice. So the size of the box should be large but not too large that it’s taking up too much space on the page. And the color should be contrasting yet still complementary to the rest of the colors used on the page.

The Best Buy search box is a good example as the white contrasts against the blue of the page while still aligning with the other colors used in the page design. The size of the search box isn’t too large while still being prominent enough for people to immediately notice once they enter the page.

2. Highlight the Submit Button

As mentioned earlier, the whole purpose of a search box is to make things easier for site visitors. Avoid overcomplicating things with miniscule submit buttons that users have to focus on in order to click. Making the submit button stand out improves the visibility of the search box itself and also makes it easier for users to click on.

Whether you choose to use a magnifying glass icon or spell out “Submit” in the submit button is up to you. However, focus on the size and color of the button so as to ensure that users have no trouble finding it after typing in the search field. Make it clear to them what they have to do after they type in what they’re looking for.

Some websites even go so far as to put only the magnifying glass icon for visitors to search for something. This may prove to be of great benefit for the website aesthetics as in the case of Levi’s Strauss. But this isn’t an optimal search box design example.

While this looks good in terms of design, it can be inconvenient for visitors as they have to wait for the search box to load after clicking on the magnifying glass icon. It can be frustrating especially if you’re accessing the site from a place where the connection is slow. Instead of having it load separately, it might be better to have the search box expand on the same location where the magnifying glass is placed.

When stuck with limited space, but search is important it can be nice to have it blend into the top navigation. This is exactly what shralpin did on their mobile site.

Xero Shoes, on the other hand, doesn’t have a submit button at all. Visitors will have to enter a keyword in the search filed and then hit enter in order to search for something within the site. Now you may think it’s not so bad to simply hit the enter key to initiate the search, but what about the rest of the visitors? Some of them may be specifically searching for the submit button and may have a difficult time conducting search using this type of design.

Amazon’s submit button is quite prominent in orange while the rest of the search box is in white. The color of the submit button also contrasts against the darker color of the website header. So although they only use a magnifying glass icon as the submit button, it’s still prominently visible unlike the Levi’s example. Make sure the icon is padded, as this will increase the visibility.

3. Place it Where Users are Most Likely to Look

There’s an ongoing debate about the best place to put search box on a website. But if you look around at some of the most popular websites, you’ll notice that the search boxes are often placed towards the top center or top right of the page. This is evident from the study published by SLI Systems. The analysis found that 54% of retailers place the search box on the top right, 30% on the center, and only 16% on the left.

This means that visitors might expect to find the search box towards the top right-hand side of your website. Placing it somewhere unexpected means users might need to put in extra effort to find the search box. Despite this, it’s still a good idea tostudy visitor activity using a heat map or an eye-tracking tool. This will help you identify where they are most likely to look, helping you understand where you should place the search box on your site.

Regardless of whether you choose left, right or center; make sure it’s towards the top of the page as this is where visitors as more likely to scan first according to an NN Group eye-tracking study.It would do you good to conduct an A/B test on different search box placements and then determine which position seems to be performing the best for you.

Here’s an example of a search box placed on the right side of the page from Get Plus Followers.

EBay’s search box placement is at the center of the page, where’s it’s prominently visible and one of the first things visitors will notice about the website.

4. Combine Auto-complete with Graphics

Your website may be among the 62.5% using auto-complete feature in their search box. In order to gain competitive advantage, you could further enhance the feature by adding image previews of the product along with the auto-complete suggestions in your search function. This is because only 28.2% of participating websites are currently implementing this feature.

To further make a case for auto-complete with graphics, you might want to take a look at the case of LED Hut. After adding image previews to their auto-complete suggestions, the LED lighting provider managed to increase their search conversion rate by 200%. Here’s how it will look when you add image previews to the search suggestion.

5. Avoid Isolating or Overcrowding the Search Box

The first point mentioned how important it is to make the search box prominent. This means that you should avoid overcrowding the surrounding areas with icons or other elements that might distract visitors from the search box. The search box needs to be prioritized and focused on.At the same time, avoid overdoing this as you might end up isolating the search box to the extent of making it difficult to find.

The search box of Snow and Rock is a good example of a well-designed search box. As you can see in the image below, there aren’t too many elements crowding the area where it’s placed. But you can still see it towards the center-left of the page and isn’t placed somewhere users will have a hard time finding. The submit button is also contrasting with the rest of the colors on the website, making it stand out.

6. Opt for an Expanding Search Box

When you’re looking for ways to save space while still making the search box prominent for users, you can opt for a growing search box. This is an ideal choice for websites in which search may not be too essential but you still want to give users the option to search for something. Instead of adding only a magnifying glass icon, you’ll be adding a small search box next to it to act as a visual clue for site visitors. When a user clicks on the field, the box will expand and enable users to enter the term they need.

Here’s a good example from Net-a-Porter. If you look at the top right-hand side of the website, you see that the search box is visible but not too large. There’s a magnifying glass icon for users to identify that it’s a search option.

But once you click on the field, the search box expands out for you type in your required search term. This combination of aesthetics and usability is excellent for a website that needs to include plenty of elements on the home page as it helps you save space without compromising on the visibility of the search box.

7. Consider Adding a Drop-down Menu

The search box exists for people who already have some idea what they’re looking for. But what about those who aren’t too sure what they’re looking for. You may have an auto-complete suggestion feature but adding a drop-down function just next to the search box may be a good idea for some websites. It gives users a sense of direction and gives them clues about what to look for.

This tactic proved to be a success for Casa Mineira, a Brazil-based real estate company. In a case study conducted on the website, replacing the standard search box with drop-down menus helped in generating more leads. In fact, the variation resulted in 57.25% more leads than before.

The reason why this variation performed so well is because visitors were given a clear path of action and they were able to quickly find what they’re looking for. In the previous design, visitors had to be certain of what exactly they were looking for. So to guide visitors better, they decided to cover a wide variety of locations and types of accommodation.

But it’s important to remember that this option might not be the best for all types of websites. An ecommerce store, for instance, might be unable to make search more functional for visitors using this technique. But for real estate companies and service-related businesses, a drop-down search functionality might be the perfect solution.

Bottom Line

You now have a better understanding of search box design and placement with the help of examples and tips. So what have you learned from this? You might have noticed the stress placed on prominence and visibility of the search box. This means that color contrast, aesthetics and size of the search box are some of the most important aspects.

Your focus should be on functionality and aesthetics combined, which may not be easy to execute. The best advice you can get is to conduct A/B tests on various designs and positions as mentioned in the previous points. Got any questions about search box design? Feel free to leave a comment below.