Why does a site need a search bar?

Actually, the question would be why not? It is verified by the Nielsen Norman Group (usability and UX consultant) that one of the first elements that users interact with on a website is the search bar . Despite the fact that the navigation menu is complete and well categorized, there will come a point in which a person will want to find what they need more quickly, that is why you must give control and accessibility to those pages to which they are most hard to get to

Keys to design a search bar

A good location will always be at the top right . It is preset that users will look for it there . If you want to give it even more prominence, since it will be the main navigation element on your site, you can place it in the top center.
It will be of no use if you place it at the bottom, remember that the objective is to facilitate access to the search bar.
Also, be sure to incorporate it into all the pages that make up your website.

The search box should be long enough to accommodate what users will type. The recommended width is approximately 27 characters . Likewise, an acceptable height for the box will be one in which the user does not have to be “hollowing” the mouse. It’s frustrating when we want to click on an element (link, box, button) and it’s not big enough to do it without having to try several times.

It needs to be recognizable to the naked eye and this will be achieved by achieving a good contrast between the search bar and the background of the website, otherwise what good is it if they are the same color as the background?

If the background is white or a very light color, it’s always a good option to add a border to the search box, or give the box a subdued color, we want users to use it!

Make it big enough so that the mouse pointer (or index finger in case the user is using a mobile device) can easily click on it. Make the button not an icon, but a button with the word “search” on it that is more actionable.

You can add a suggestion about what to search for or add an action like “Search”, “Enter your search term here”. We recommend, as always, that this text be adapted to the vocabulary of your audience . For example, if your audience is mostly Latin American, always talk about “you”. If you always talk to the user about “you”, keep the style of the vocabulary used.

Adding a search engine

Now, I already have my search bar designed and placed correctly within the site. It just needs to work, that is, when searching for a term it shows me a result. For that you must use a keyword search system . They are databases that will automatically incorporate web pages by means of web search “robots”.

Installing a search engine requires technical knowledge, and you will likely need a programmer to further this task.

The user is not the one who has to adapt to the language or vocabulary associated with your site, but on the contrary, it is your site that must take into account the different ways in which a user can express himself to find what he is looking for . For example, some people will search for “blue jean”, others “blue denim”, or more generically “blue pants”. For all these formulations you have to be there to deliver them a search result. It is likely that if they do not find what they want on the first search attempt, they will get frustrated and not try another search term again, that is, if users do not find their result on the first try, they will be less likely to continue trying with another search term. alternative search terms.

Users expect to be corrected for misspellings or incorrectly pronounced words . If your site is prepared for these failures, you will have a more sophisticated site and you will increase the chances that users will find what they are looking for. The solution to this problem will be to show them alternative search suggestions .

The first page in the search results is always the most important since the most relevant products should be displayed on it . If you search for “straight jeans” and on the first page you only see “oxford jeans”, it is advisable to rethink how the search engine is taking the information from your site.

One way to prioritize is by taking into account the most viewed or sold products . It is not for nothing that these products are the most popular, and these should be the ones that you want to show users first.

Sphinx – Open Source Search Server
Solr – Apache Lucene – Apache Solr
Elastic Search – Open Source, Distributed, RESTful, Search Engine

Search Results Pages

Now that we know the keys to design a good search bar and incorporate a search engine, it will be necessary to display the information in the search results in an orderly manner , that is, the step after the query was made. This page must have the following characteristics:

1. The search box should be visible at the top along with the search term and again at the bottom of the search results.

2. The quantity of results expressed in number.

3.  Menu with filter to reorder the results . For example “Price from lowest to highest”, “Best-selling products”, “Most viewed products”.

4.  Links visited in a different color.

5.  Paginate the search results , or use the infinite scroll so that the results are displayed as the user scrolls down.

In summary

If you want your search bar to work to the fullest, don’t forget these three keys:

• Users’ first interaction with your site will probably be the search box. Make it visible .
• You will have to use a search engine that takes the information from your site. Consult with a programmer who can perform the installation .
• Understand the vocabulary of your audience and take into account the different alternatives they use to perform searches.