A search box (or a search bar) is a simple element of a website consisting of an input field and a submit button. One might think this doesn’t require any special design. On the contrary, a poorly designed search box can be deadly for business and can lead to generally poorer user experience, thus less happy visitors, and fewer conversions.
Table of Contents
How to design a search bar?
At AddSearch, we work hard to bring simplicity and usability to site search and we strive for better UX and especially search experience at all websites. Here we put together best practices implemented by the well-known UX experts and our customers. Follow our general guidance on how to design a search bar that your visitors will love.
1. Users expect search at the top right or left corner
According to a study by A. Dawn Shaikh and Keisi Lenz, most website visitors expect a search bar to be at the top right or left corner of the website.
The figure above illustrates where participants of the study expected to find the search on the website. Top right and top left corner have been chosen the most.
2. Use prompt text to guide users
Lead your users to search with helping text. Very often “Search” or “Type to search” would do the job, however, if you want to highlight your search, you may want to specify what the user can search for (like you would see “Search for books“ at the online bookstore).
How do organizations see the role of site search and measure its success in 2022? Download the State of Site Search report now!
3. Use magnifying glass
A magnifying glass is still a well-recognized symbol of search. Add magnifying glass to your search bar and benefit from one of the most universally recognized icons to help website visitors use your website faster and more efficiently.
4. Add a search box to every page on your website
Provide access to search regardless of a visitor’s location. If your users can’t find what they’re looking for, they would undoubtedly benefit from the possibility to search.
5. Autocomplete search suggestions
Search suggestions and “search-as-you-type” instant results are a powerful tool to increase the speed and usability of your search. Use a search solution that allows you to do both.
6. Search as a part of your website
It goes without saying that search should be well designed to suit and improve your website visual design as well as user experience. Put your customers first and understand how important search is for them. If search. is a critical business function, you might want to highlight it, add filters and attract users’ attention. However, remember that visual design is as important as functional design.
Ready-made search box designs & elements
Here we put together a few search bar designs that have been widely used by our customers. Feel free to take designs as they are or customize the code to suit your websites the best.
When using AddSearch, you can customize the style of the search using CSS. Some of the most used styles used with our search are:
- font-family, font-size and font-color
- border, border-radius
- background-color
- padding, margin
You can easily modify the styles of the search box right from the AddSearch Dashboard.
Examples of search input fields
font-size: 16px !important;
font-weight: 300 !important;
color: #333 !important;
line-height: 1.625 !important;
background-color: #fff !important;
background-image: url( //addsearch.com/logo/AAAAAA-20.png ) !important;
background-repeat: no-repeat;
background-position: 95% 50%;
border: 1px solid #eee !important;
border-radius: 4px !important;
width: 100% !important;
padding: 15px !important;
cursor: auto !important;
font-size: 16px !important;
font-weight: 300 !important;
color: #333 !important;
line-height: 1.625 !important;
background-color: #fff !important;
border-color: #eee;
border: none;
border-bottom: 1px solid #9e9e9e;
box-shadow: none;
box-sizing: content-box;
border-radius: 0;
background-image: url( //addsearch.com/logo/AAAAAA-20.png ) !important;
background-repeat: no-repeat;
background-position: 95% 50%;
width: 100% !important;
padding: 15px !important;
cursor: auto !important;
font-size: 16px !important;
font-weight: 300 !important;
color: #eee !important;
line-height: 1.625 !important;
background-color: #333 !important;
background-image: url( //addsearch.com/logo/AAAAAA-20.png ) !important;
background-repeat: no-repeat;
background-position: 95% 50%;
border: 1px solid #eee !important;
border-radius: 4px !important;
width: 100% !important;
padding: 15px !important;
cursor: auto !important;
font-size: 16px !important;
font-weight: 300 !important;
color: #eee !important;
line-height: 1.625 !important;
background-color: #333 !important;
border-color: #eee;
border: none;
border-bottom: 1px solid #eee;
box-shadow: none;
box-sizing: content-box;
border-radius: 0;
background-image: url( //addsearch.com/logo/AAAAAA-20.png ) !important;
background-repeat: no-repeat;
background-position: 95% 50%;
width: 100% !important;
padding: 15px !important;
cursor: auto !important;
font-size: 16px !important;
font-weight: 300 !important;
color: #eee !important;
line-height: 1.625 !important;
background-color: #055bb6 !important;
background-image: url( //addsearch.com/logo/AAAAAA-20.png ) !important;
background-repeat: no-repeat;
background-position: 95% 50%;
border: 0px !important;
border-radius: 8px !important;
width: 100% !important;
padding: 15px !important;
cursor: auto !important;
font-size: 16px !important;
font-weight: 300 !important;
color: #eee !important;
line-height: 1.625 !important;
background-color: #eee !important;
background-image: url( //addsearch.com/logo/AAAAAA-20.png ) !important;
background-repeat: no-repeat;
background-position: 95% 50%;
border: 0px !important;
border-radius: 32px !important;
width: 100% !important;
padding: 15px !important;
cursor: auto !important;
