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 strive for better UX, especially search experience, on all websites. Here, we have put together best practices implemented by well-known UX experts and our customers. Follow our general guidance on how to design a search bar UI that your visitors will love: from using predictable, discoverable, and accessible design to including features like autocomplete to make searching simpler.
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 ui 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.
This information is crucial to consider when planning out your search bar design.
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 a magnifying glass
A magnifying glass is still a well-recognized symbol of search. Add magnifying glass when you design your search bar ui 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.
7. Make your search bar always discoverable
Users shouldn’t have to look for the search bar. The search box should be large enough to be visible without being concealed by the rest of the site. Consider things such as the search bars colors, size and placement and how these factors contrasts with the rest of the website.
8. Use large field size
Designers frequently make the error of making the input field too short. Although this still lets users input long queries, it only allows them to see a section of the entered content at a given time; This makes it difficult for users to evaluate and change their query readily, resulting in overall poor usability.
9. Use a search button
Having a search button is a must, it acts as a visual to remind users that there is an additional step required to initiate the search.
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.
Best Examples of search input design
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;
